---
name: "@velobits"
slug: "velobits"
description: "An open source collection of accessible, contrast-gated React components on a warm neutral palette and a two-tier glass material — the VeloBits design system, authored once and shipped both as an npm package and as this registry."
category: "Animated components"
tags: ["accessibility", "animation", "auth", "blocks", "buttons", "cards", "design-system", "forms", "glassmorphism", "hooks", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: null
author: "VeloBits"
website: "https://ui.velobits.dev"
github: "https://github.com/VeloBits/velobits-UI"
registry: "https://ui.velobits.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 48
generated_at: "2026-09-05T09:50:59.044Z"
---

# @velobits

An open source collection of accessible, contrast-gated React components on a warm neutral palette and a two-tier glass material — the VeloBits design system, authored once and shipped both as an npm package and as this registry.

## Links

- Website: https://ui.velobits.dev
- GitHub: https://github.com/VeloBits/velobits-UI
- Registry JSON: https://ui.velobits.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/velobits
- This file: https://sh4dcn.vercel.app/md/velobits.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.velobits.dev/r/registry.json
pnpm dlx shadcn@latest add https://ui.velobits.dev/r/registry.json
bunx shadcn@latest add https://ui.velobits.dev/r/registry.json
# clone the source repo
git clone https://github.com/VeloBits/velobits-UI.git
# fetch the raw registry index
curl -s https://ui.velobits.dev/r/registry.json
```

## Components (48)

| name | type | description | install |
| --- | --- | --- | --- |
| velobits | registry:style | The base style: tokens, the cn util, the provider stack, and every Tier-1 primitive, Tier-2 overlay and Tier-3 composite. Start here. | `npx shadcn@latest add https://ui.velobits.dev/r/velobits.json` |
| velobits-theme | registry:theme | The full token layer as CSS variables. Every colour pair here is contrast-verified in both themes by the @velobitsio/tokens test suite. | `npx shadcn@latest add https://ui.velobits.dev/r/velobits-theme.json` |
| cn | registry:lib | Tailwind-aware class merger. Signature must stay twMerge(clsx(...)) , the dashboard app points components.json `utils` at it. | `npx shadcn@latest add https://ui.velobits.dev/r/cn.json` |
| theme | registry:lib | React-free light/dark resolution, storage and the blocking init script. Storage key is required, never defaulted. | `npx shadcn@latest add https://ui.velobits.dev/r/theme.json` |
| use-theme | registry:hook | ThemeProvider + useTheme. Honours the existing fmx_theme_mode and tf.theme keys. | `npx shadcn@latest add https://ui.velobits.dev/r/use-theme.json` |
| use-media-query | registry:hook | Media query subscription plus usePrefersReducedMotion. Import breakpoints from @velobitsio/tokens rather than re-typing the pixel value, so the JS and CSS brea… | `npx shadcn@latest add https://ui.velobits.dev/r/use-media-query.json` |
| use-row-selection | registry:hook | Row selection for DataTable. The selection is DERIVED , the stored set intersected with the rows on screen , so a bulk action can never point at a row the filt… | `npx shadcn@latest add https://ui.velobits.dev/r/use-row-selection.json` |
| velobits-provider | registry:ui | Mount once at the shell root: ThemeProvider + TooltipProvider + MotionConfig reducedMotion="user". | `npx shadcn@latest add https://ui.velobits.dev/r/velobits-provider.json` |
| alert | registry:ui | 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… | `npx shadcn@latest add https://ui.velobits.dev/r/alert.json` |
| avatar | registry:ui | Avatar | `npx shadcn@latest add https://ui.velobits.dev/r/avatar.json` |
| badge | registry:ui | Soft washes pair with the matching text token, never with the solid fill. | `npx shadcn@latest add https://ui.velobits.dev/r/badge.json` |
| button | registry:ui | Controls are radius-md. No variant paints --primary as text; `link` uses --primary-text. | `npx shadcn@latest add https://ui.velobits.dev/r/button.json` |
| card | registry:ui | 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. | `npx shadcn@latest add https://ui.velobits.dev/r/card.json` |
| checkbox | registry:ui | Includes the indeterminate state bulk-selection headers need. | `npx shadcn@latest add https://ui.velobits.dev/r/checkbox.json` |
| field | registry:ui | Label/description/error wiring. Keeps BOTH ids in aria-describedby when a field has an error and a hint. | `npx shadcn@latest add https://ui.velobits.dev/r/field.json` |
| glass-surface | registry:ui | All three glass tiers behind one prop: surface (Tier S, no blur by default) · overlay · elevated. Never for page backgrounds, table rows, or nested glass. | `npx shadcn@latest add https://ui.velobits.dev/r/glass-surface.json` |
| input | registry:ui | border-input maps to --field-border, the half WCAG 1.4.11 gates. | `npx shadcn@latest add https://ui.velobits.dev/r/input.json` |
| kbd | registry:ui | Kbd | `npx shadcn@latest add https://ui.velobits.dev/r/kbd.json` |
| label | registry:ui | A real <label>, so htmlFor resolves. Non-control roots need aria-labelledby instead. | `npx shadcn@latest add https://ui.velobits.dev/r/label.json` |
| native-select | registry:ui | A cva-styled native <select>. Deliberately NOT Radix Select, which is undriveable under happy-dom. | `npx shadcn@latest add https://ui.velobits.dev/r/native-select.json` |
| scroll-area | registry:ui | A scrollable region with a styled scrollbar. The thumb is --field-border, not --border: it is an interactive control, so 1.4.11 applies to it. | `npx shadcn@latest add https://ui.velobits.dev/r/scroll-area.json` |
| separator | registry:ui | Decorative, so it uses --border and is exempt from 1.4.11. | `npx shadcn@latest add https://ui.velobits.dev/r/separator.json` |
| skeleton | registry:ui | aria-hidden; pair with ONE sr-only live region rather than announcing each block. | `npx shadcn@latest add https://ui.velobits.dev/r/skeleton.json` |
| slider | registry:ui | The name goes on the THUMB , Radix puts role="slider" there, so htmlFor and a root aria-label both dangle. | `npx shadcn@latest add https://ui.velobits.dev/r/slider.json` |
| spinner | registry:ui | Spinner | `npx shadcn@latest add https://ui.velobits.dev/r/spinner.json` |
| switch | registry:ui | Applies immediately. Thumb translation is mirrored explicitly for RTL. | `npx shadcn@latest add https://ui.velobits.dev/r/switch.json` |
| textarea | registry:ui | Textarea | `npx shadcn@latest add https://ui.velobits.dev/r/textarea.json` |
| tooltip | registry:ui | TooltipProvider is required , Radix throws without it, and under Module Federation it must be a singleton. | `npx shadcn@latest add https://ui.velobits.dev/r/tooltip.json` |
| command-palette | registry:ui | 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. | `npx shadcn@latest add https://ui.velobits.dev/r/command-palette.json` |
| dialog | registry:ui | The centred form modal. `focusFirstField` exists because autoFocus is silently swallowed by Radix FocusScope. | `npx shadcn@latest add https://ui.velobits.dev/r/dialog.json` |
| dropdown-menu | registry:ui | Highlight is data-[highlighted], never :hover , Radix drives keyboard focus through it. Cannot host a text input; use Dialog or Popover. | `npx shadcn@latest add https://ui.velobits.dev/r/dropdown-menu.json` |
| popover | registry:ui | The elevated tier, for glass stacked on glass. PopoverTitle wires aria-labelledby , Radix content is role="dialog" with no Title part, so it is otherwise unnam… | `npx shadcn@latest add https://ui.velobits.dev/r/popover.json` |
| side-panel | registry:ui | The anchored reading sheet. Deliberately NOT Dialog and deliberately does NOT redirect focus , the two focus policies are opposites, so do not merge them behin… | `npx shadcn@latest add https://ui.velobits.dev/r/side-panel.json` |
| toast | registry:ui | Variants use a logical border stripe, not a soft wash: bg-*-soft is a utility and beats --glass-bg from the components layer, flattening the tier. | `npx shadcn@latest add https://ui.velobits.dev/r/toast.json` |
| accordion | registry:ui | The one sanctioned height animation: Radix measures --radix-accordion-content-height, so it does not thrash layout the way an unbounded height:auto transition … | `npx shadcn@latest add https://ui.velobits.dev/r/accordion.json` |
| app-shell | registry:ui | 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 na… | `npx shadcn@latest add https://ui.velobits.dev/r/app-shell.json` |
| breadcrumb | registry:ui | 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… | `npx shadcn@latest add https://ui.velobits.dev/r/breadcrumb.json` |
| code-block | registry:ui | Preformatted code, with a copy button that survives an insecure origin (navigator.clipboard is absent over plain http). The `terminal` variant is the theme-inv… | `npx shadcn@latest add https://ui.velobits.dev/r/code-block.json` |
| data-table | registry:ui | Sorting, selection and row activation over a column registry , deliberately not TanStack, whose grouping and pivoting nothing here uses. aria-sort goes on the … | `npx shadcn@latest add https://ui.velobits.dev/r/data-table.json` |
| diff-viewer | registry:ui | A unified line diff. The +/− gutter is the primary channel and the green/red wash the secondary , colour alone fails 1.4.1, and the gutter is also the only cha… | `npx shadcn@latest add https://ui.velobits.dev/r/diff-viewer.json` |
| empty-state | registry:ui | First-run, filtered-to-nothing and failed-to-load are three different states; this covers the first two and an Alert covers the third. The title is a <p> unles… | `npx shadcn@latest add https://ui.velobits.dev/r/empty-state.json` |
| form | registry:ui | react-hook-form bound to Field’s ARIA wiring. label and description are PROPS, not children, because aria-describedby is assembled before children render , a d… | `npx shadcn@latest add https://ui.velobits.dev/r/form.json` |
| motion | registry:ui | Page transitions and capped list staggers on framer-motion, which was already a required peer for VelobitsProvider’s MotionConfig and until now bought nothing … | `npx shadcn@latest add https://ui.velobits.dev/r/motion.json` |
| pagination | registry:ui | Numbers are links, previous/next are buttons: an <a> cannot express "unavailable" without ceasing to be focusable. Unavailability is aria-disabled plus a guard… | `npx shadcn@latest add https://ui.velobits.dev/r/pagination.json` |
| segmented-control | registry:ui | Radix ToggleGroup with a REAL disabled and a working accessible name , a div root makes an external htmlFor dangle, and pointer-events-none leaves the control … | `npx shadcn@latest add https://ui.velobits.dev/r/segmented-control.json` |
| status-chip | registry:ui | On/off/partial/pending/archived as one chip. Every status ships a DISTINCT glyph, because colour alone fails 1.4.1 and on-versus-off is the distinction a contr… | `npx shadcn@latest add https://ui.velobits.dev/r/status-chip.json` |
| table | registry:ui | Rows are never glass , one backdrop-filter per row repaints its own backdrop region on every scroll. Surface treatment belongs on the container. | `npx shadcn@latest add https://ui.velobits.dev/r/table.json` |
| tabs | registry:ui | Tabs | `npx shadcn@latest add https://ui.velobits.dev/r/tabs.json` |

## For AI agents

```text
You are adding components from @velobits to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/velobits.md) for the component list.
2. Fetch the machine-readable index: https://ui.velobits.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: velobits).
```