Slider

from @velobits

The name goes on the THUMB , Radix puts role="slider" there, so htmlFor and a root aria-label both dangle.

Install

New to shadcn? Set up your project

If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.

$pnpm dlx shadcn@latest init

Setup by framework · Configure a registry namespace

$pnpm dlx shadcn@latest add @velobits/slider

Live preview

No live preview has been built for this component yet.

Registry dependencies1

Packages1

radix-ui

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
CodeBlock component
@velobits
Preformatted code, with a copy button that survives an insecure origin (navigator.clipboard is absent over plain http). The `terminal` variant is the theme-invariant --code/--on-code pair, which is what a one-time secret is revealed on.
Text3 registry deps · 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

The Signal

Install

Live preview

Registry dependencies1

Packages1

Install

Live preview

Registry dependencies1

Packages1

Source

More from @velobits40, 40 components

More from @velobits, 40 components