Trending Society

CodeBlock | UI components | Trending Society

More from @velobits, 40 components

All @velobits

Accordion component
@velobits
The one sanctioned height animation: Radix measures --radix-accordion-content-height, so it does not thrash layout the way an unbounded height:auto transition would.
Layout1 registry dep · 2 packages
Alert component
@velobits
Status panel. Defaults to polite role="status"; escalate to "alert" deliberately. Tier-S glass on the neutral variant only , the four soft washes would replace the tint.
Feedback2 registry deps · 1 package
AppShell component
@velobits
The authenticated chrome. `sidebar` is a prop rather than a child because it is rendered TWICE , as a rail at md and up, and inside a drawer below it , so a nav item cannot exist in one and not the other. Ships the skip link, which is the most-skipped WCAG requirement in an admin UI.
Other5 registry deps · 3 packages
Avatar component
@velobits
Data display1 registry dep · 1 package
Badge component
@velobits
Soft washes pair with the matching text token, never with the solid fill.
Data display1 registry dep · 2 packages
Breadcrumb component
@velobits
A named nav landmark around an ordered list. The leaf is a plain span with aria-current="page" , NOT shadcn’s role="link" aria-disabled, which announces static text as a broken link.
Navigation1 registry dep · 2 packages
Button component
@velobits
Controls are radius-md. No variant paints --primary as text; `link` uses --primary-text.
Buttons and actions1 registry dep · 2 packages
Card component
@velobits
Tier-S glass by default; surface="panel" for the opaque original, which writes border-border explicitly so it survives an app that skipped the base layer.
Layout2 registry deps
Checkbox component
@velobits
Includes the indeterminate state bulk-selection headers need.
Forms1 registry dep · 2 packages
CommandPalette component
@velobits
cmdk inside a Radix Dialog. The ⌘K listener is opt-in via `shortcut` , a design system must not bind a global key by merely being imported.
Navigation2 registry deps · 3 packages
DataTable component
@velobits
Sorting, selection and row activation over a column registry , deliberately not TanStack, whose grouping and pivoting nothing here uses. aria-sort goes on the th, not the sort button, and an activatable row needs tabIndex + Enter/Space + a target check or it is mouse-only.
Data display3 registry deps · 1 package
Dialog component
@velobits
The centred form modal. `focusFirstField` exists because autoFocus is silently swallowed by Radix FocusScope.
Overlays2 registry deps · 3 packages

CodeBlock

Install

Live preview

Registry dependencies3

Packages2

CodeBlock

Install

Live preview

Registry dependencies3

Packages2

More from @velobits, 40 components

The Signal

Install

Live preview

Registry dependencies3

Packages2

Install

Live preview

Registry dependencies3

Packages2

More from @velobits40, 40 components

More from @velobits, 40 components