Components
61 building blocks, ready to compose
Every component is server-rendered Rust with reactivity where it counts, themed by the same Tailwind tokens shadcn/ui uses. Install them with the CLI below, then pick one from the sidebar or browse the whole catalog.
Start with installationInstallation
A rahti-ui component is not imported from a crate. The installer is, and what it fetches is written into your application as source: src/components/rahti_ui/button.rs is a file in your repository, not a dependency you negotiate with. Change a class string, add a variant, delete the half you do not use.
- 1
A Rahti application
Components install into a project, so there has to be one. Skip this if you already have it — and add the icon runtime once either way, because the icon files a component pulls in call into that crate.
Terminal - 2
The installer, from crates.io
cargo install puts a cargo-rahti-ui binary on PATH, and cargo turns the name into a subcommand — the whole mechanism is the hyphen.
Terminal - 3
Add components
One or several names, or --all for everything in the catalog. Add is the command you keep coming back to; nothing else has to be wired up.
Terminal - 4
Import and render
The Rahti build regenerates src/components/mod.rs on every compile, so a component that landed a second ago is in scope as crate::components::rahti_ui::<file>::<Component> on the next build.
src/app/page.rs
One name, the whole graph
A Sidebar calls a Button, opens a Sheet on small screens, and reaches for two icons — and every one of those is a compile error if it is missing. The dependencies are read out of the component's use lines, the same ones the compiler reads, so they cannot drift from it. The icons are handed to cargo-rahti-icons, which already owns that catalog.
Editing is the point
rahti-ui.json records the SHA-256 of every file as it was installed. On update, a file that still hashes to that is replaced; one that does not has been worked on, and is reported and left alone until --force. So an edit is safe — and it is also what stops that component receiving upstream fixes, which is why a wrapper of your own usually costs less than a permanent fork of the file.
The stylesheet
Every class string here is shadcn's, and shadcn's classes name shadcn's theme: bg-primary, border-input, animate-in. None of those exist in the scaffold's placeholder stylesheet, so the theme goes in with the first component — into src/app/globals.css, with tw-animate-css vendored beside it. It is replaced only when it is missing or still byte-for-byte what cargo rahti new wrote. A stylesheet you have edited is left alone, with --print to merge from and --force to overrule.
Every command
Each command that changes what is installed rewrites rahti-ui.json and .github/instructions/rahti-ui.instructions.md at the project root, so whatever reads the project — a person, a script, a coding agent — is told what is there and how to add more.
The catalog
Every name below is a name add takes. Each page is that component's live demo and its test bench.
Forms & Input19
- ButtonDisplays a button or a component that looks like a button.
- InputA form input field for text and other values.
- TextareaA multi-line text input field.
- LabelAn accessible label paired with form controls.
- CheckboxA control that toggles between checked and unchecked.
- Radio GroupA set of options where only one can be selected.
- SelectA dropdown list of options to pick from.
- SwitchA toggle between on and off.
- SliderSelect a value or a range along a track.
- ToggleA two-state button that can be pressed or released.
- Toggle GroupA set of two-state buttons grouped together.
- Input OTPOne-time password input with segmented digits.
- FieldLabel, control, help and error wired together.
- Input GroupAn input with addons, buttons and text attached.
- Button GroupButtons joined into a single segmented control.
- ComboboxAn input with an autocomplete list of options.
- CalendarA month grid for browsing and picking dates.
- Date PickerA calendar in a popover bound to an input.
- QuestionnaireA multi-step form flow with progress and review.
Layout & Surfaces11
- CardA container with header, content and footer.
- SeparatorA visual divider between sections.
- Aspect RatioConstrains content to a fixed width-to-height ratio.
- Scroll AreaA scroll container with styled scrollbars.
- ResizablePanels resized by draggable handles.
- CollapsibleA region that expands and collapses.
- AccordionStacked sections that expand one at a time.
- TabsLayered panels of content shown one at a time.
- SidebarA composable, collapsible app navigation shell.
- Native NavigationA packaged-host desktop rail and mobile bottom navigation shell.
- ItemA flexible row for lists, menus and settings.
Overlays & Menus11
- DialogA modal window over the page.
- Alert DialogA modal that interrupts for confirmation.
- SheetA panel that slides in from the screen edge.
- DrawerA sliding drawer, tuned for touch.
- PopoverFloating content anchored to a trigger.
- Hover CardPreview content shown on hover.
- TooltipA short label shown on hover or focus.
- Dropdown MenuA menu of actions opened from a trigger.
- Context MenuA menu opened with a right click.
- MenubarA horizontal bar of application menus.
- CommandA command palette with fuzzy filtering.
Feedback & Status7
- AlertA callout for important information.
- BadgeA small status or label marker.
- ProgressA bar indicating completion of a task.
- SkeletonA placeholder shown while content loads.
- SpinnerAn animated loading indicator.
- ToastA brief notification that appears and dismisses.
- EmptyA friendly placeholder for empty states.
Data Display8
- AvatarAn image with a fallback for a user or entity.
- TableA styled HTML table for tabular data.
- Data TableTables with sorting, filtering and selection.
- PaginationNavigation between pages of content.
- BreadcrumbThe path to the current page as links.
- Navigation MenuA site navigation bar with dropdown panels.
- CarouselA slideshow of scrollable content.
- ChartComposable charts for visualizing data.