Rivet UI documentation
Components,engineered.
Accessible React components with precise APIs, readable source, and a visual system built for technical products.
- Components
- 58
- Foundation
- Base UI
- Delivery
- shadcn CLI
Quick start
From zero to first component.
Initialize shadcn, connect the Rivet registry, then install only the components you need.
01
Initialize shadcn
Initialize shadcn
bunx --bun shadcn@latest init02
Connect the registry
Add Rivet registry
bunx --bun shadcn@latest registry add @rivetui=https://rivetui.reuss.dev/r/{name}.json03
Add global styles
Add Rivet styles
bunx --bun shadcn@latest add @rivetui/rivet-style04
Install a component
Add component
bunx --bun shadcn@latest add @rivetui/button05
Import locally
app/page.tsxtsx
import { Button } from "@/components/ui/button"
export default function Page() {
return <Button>Deploy</Button>
}Principles
A small set of firm decisions.
Rivet stays predictable by favoring usability, semantics, and composition over decorative options.
01
Accessible by construction
Native semantics and Base UI primitives provide a reliable interaction model.
02
Source you own
The CLI writes readable component source directly into your application.
03
One visual system
Sharp geometry, restrained motion, and technical typography stay consistent.
Component index
58 components, grouped by purpose.
Use the categories to scan the system or press Command K to jump directly to a component.
Controls
15 entries
- CheckboxLets a user toggle a binary or indeterminate choice.
- InputAccepts a single line of native text, search, date, or numeric input.
- Input OTPCaptures one-time passcodes through one accessible native input and a precise segmented display.
- Number FieldCaptures formatted numeric values with precise stepping, range constraints, and keyboard control.
- Password FieldCollects a password with accessible visibility controls and Caps Lock feedback.
- Radio GroupLets a user select exactly one option from a visible set.
- RatingCaptures a single score through a compact, keyboard-accessible star scale.
- Search FieldCollects a search query with native form behavior, clear controls, loading feedback, and controlled or uncontrolled state.
- SelectLets a user choose one value from a compact, keyboard-accessible list.
- Multi SelectLets a user choose multiple values from a compact, keyboard-accessible list.
- SliderSelects one value or a bounded range along a continuous track.
- SwitchToggles a setting that takes effect immediately.
- Toggle GroupGroups related two-state controls into a compact single- or multi-selection interface.
- TextareaAccepts longer, multiline text using a native textarea element.
Forms & pickers
07 entries
- FieldConnects a control with its label, supporting text, and validation message.
- ComboboxCombines text search and single selection in one keyboard-ready control.
- Date PickerSelects one date or a date range with direct month and year navigation.
- Time PickerSelects a precise local time with stepped controls and canonical form values.
- Color PickerEdits colors through optional RGB, Hex, RGBA, RYB, CMYK, HSL, HSV, and preset controls.
- File UploadSelects and validates files through a native picker or drag and drop.
Navigation
05 entries
- PaginationNavigates a paginated collection with explicit current and boundary states.
- StepperShows progress through a sequence and lets users return to available steps.
- TabsSwitches between related panels while keeping their context visible.
- Website LinkDisplays a compact inline website link with an automatically derived favicon and resilient fallback.
Overlays
09 entries
- Alert DialogRequests explicit confirmation before a consequential action is committed.
- Command BarSearches and executes grouped application actions from a modal keyboard surface.
- DialogPresents a modal task with managed focus and explicit dismissal.
- DrawerPresents mobile-first actions or content in a bottom panel with swipe dismissal and optional snap points.
- PopoverDisplays an interactive, collision-aware surface anchored to a trigger.
- SheetPresents a focused task in an edge-anchored modal panel without replacing the current page.
- TooltipAdds a supplementary hint to an already labelled interactive control.
Feedback
09 entries
- AlertCommunicates contextual information, success, warnings, and failures.
- BadgeDisplays compact metadata, identifiers, and categorical labels.
- Empty StateExplains an empty surface and guides the next useful action without adding noise.
- Loading BarShows global navigation progress and exposes application-wide loading controls.
- ProgressCommunicates determinate, completed, or indeterminate task progress.
- SkeletonReserves layout space while content is loading.
- SpinnerIndicates indeterminate activity in controls and compact status regions.
- StatusCommunicates a current operational state with text and restrained color.
- ToastDelivers application-wide, non-blocking feedback through a provider and controller hook.
Layout & data
08 entries
- AccordionOrganizes related disclosure regions in a semantic, keyboard-accessible set.
- AvatarRepresents a person or entity with an image and resilient fallback content.
- CardGroups related content and actions into clearly defined regions.
- CollapsibleReveals or hides one related region from a persistent trigger.
- Data ListPresents the labeled properties of a single object with native description-list semantics.
- Data TableTurns typed records into a sortable, searchable, selectable, and paginated data surface.
- SeparatorCreates a semantic visual boundary between related regions.
- TableStructures dense technical data with native table semantics.
Developer tools
05 entries
- Code BlockPresents source code with file metadata, copying, and optional line numbers.
- Keyboard ShortcutDisplays platform-aware key combinations and registers matching keyboard listeners.
- QR CodeEncodes links and structured payloads as responsive, accessible SVG with scan-safe defaults.
- TerminalDisplays commands and output with copy support and switchable variants.
- Theme SwitcherSelects a light, dark, or system-matched interface theme.