Skip to content

/* Without measurements, keep document navigation in normal flow so enlarged headings cannot scroll behind an estimated sticky header. */ .site-page-frame > .container-wrapper > header:has([data-docs-site-header]) { position: static !important; } @media (max-width: 63.999rem) { [data-page-frame-layout] { flex-direction: column !important; } .docs-sidebar { width: 100% !important; } .mobile-sidebar-pane { position: static !important; inset: auto !important; display: flex !important; width: 100% !important; max-height: min(60svh, 32rem); border-bottom: 1px solid var(--color-border); } .main-frame { width: 100% !important; } [data-site-contents-command] { display: none !important; } }

Brutalist Library

Overview and 0.2.0 availability of the Proto UI-maintained Neo-Brutalist prototype library.

Brutalist is a Proto UI-maintained Neo-Brutalist design-language projection with visual recipes adapted from neobrutalism.dev at 3306a802: DM Sans typography, component-owned rounded geometry, 2px structural borders, flat color and role-specific hard shadows. Its semantic implementation and documented extensions remain Proto UI-owned; no upstream API compatibility or certification is claimed.

The stable @proto.ui/prototypes-brutalist@0.2.0 package combines projections over existing Base families—Button, Toggle, Switch, Tabs, Hover Card, Dropdown Menu, Select, Dialog, Scroll Area, Separator, and Textarea—with direct styled-only Badge, Card, and Skeleton prototypes. Textarea is a visual-only projection over Base Textarea. This is the same reviewed surface admitted in rc.7, now published without surface expansion as part of the exact 40-package 0.2.0 ecosystem release.

Each card below shows one basic demo for quickly browsing the component range and visual language. API documentation and code examples remain on the individual component pages.

17 previewable prototypes Demos load as they approach the viewport

Hard shadows, strong borders, and high-contrast actions.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A passive, roleless high-contrast label with three semantic tones.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A passive four-part content grouping surface with hard-edged structure.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A square check surface with a hard shadow and high-contrast tick or mixed glyph.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A square toggle with an explicit pressed state.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A bold, direct boolean state switch.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

Square tabs with vivid selected states.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A high-contrast mask and hard-edged task surface.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A strongly bordered value picker and options panel.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

An explicit dividing line used as visual rhythm.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A high-contrast passive loading placeholder.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

Workspace-only Spinner draft, absent from npm package versions 0.2.0 and 0.3.0-alpha.1; the 0.3 ecosystem train remains draft.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

Visible track and thumb over native scrolling.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

Single-line plain-text editing inherited from Base.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

Native multiline editing with square geometry and a hard shadow.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

The current workspace visual refresh is a draft on the 0.3.0-alpha.1 train. The published 0.2.0 package and its historical visual evidence are unchanged.

Status

Provenance: the Neo-Brutalist design language and upstream visual recipes are not Proto UI originals. This projection adapts the pinned neobrutalism-components source, retaining its MIT attribution; Proto UI maintains its own semantic implementation and documented extensions.
Semantics: Button, Toggle, Switch, Tabs, Hover Card, Dropdown Menu, Select, Dialog, Scroll Area, Separator, and Textarea project their corresponding Base protocols. Textarea adds only resize-y, rounded neutral/ink, proportional sans styling. Badge and Card are direct passive styled-only prototypes with no Base counterparts. Skeleton is a direct styled-only, passive, contentless visual prototype; its parent owns loading, announcements, replacement timing, and focus continuity.
Release status: @proto.ui/prototypes-brutalist@0.2.0 is published under npm latest as part of the stable v0.2.0 release; rc.7 remains available only as historical prerelease evidence.
Lifecycle boundary: stable package publication does not promote every included prototype contract. Each catalog entity keeps its own active, draft, deprecated, or removed status; the individual pages and linked spec entities define the applicable guarantee.
0.2.0 package surface: root plus ./button, ./badge, ./card, ./toggle, ./switch, ./tabs, ./hover-card, ./dropdown, ./select, ./dialog, ./scroll-area, ./separator, ./skeleton, and ./textarea subpaths.
Maintenance: admitted to the 0.2 launch-commitment set; later semantic changes and long-term ownership remain subject to Proto UI governance.

Passive atoms

Text and Surface are draft reusable presentation atoms in this workspace. They preserve the existing semantic owner and do not establish complete family or native/Compiler coverage.

Collapsible (Draft) provides Root, Trigger and Content projections over the shared Base disclosure protocol.