Shared components, one consistent interface across our products.
Layout
Accordion
Expandable sections with keyboard navigation.
THE RECRAV COMPONENT LIBRARY
A shared language.
A little more considered.
The building blocks behind our products. Familiar React components, thoughtful details, and one consistent foundation for whatever comes next.
New components
16 NEW IN THIS RELEASEThe component collection
76 LIVE PREVIEWSChoose an action to see the result.
ActionsNew
Action List
Grouped action rows with trailing icons, for menus and action sheets.
Everything is up to date
Your changes are saved and ready to share.
Connection interrupted
Check your network settings and try again.
Feedback
Alert
Inline messages for important information.
Overlays
Alert Dialog
Confirmation dialogs for consequential actions.
16 : 9
Layout
Aspect Ratio
Keep media and surfaces at a consistent ratio.
SMMDLG
RAJL
+3
Display
Avatar
Profile images with accessible initial fallbacks.
DefaultSecondaryOutlineDestructiveGhostLink
Display
Badge
Compact labels for states and metadata.
Navigation
Breadcrumb
A clear path through nested pages.
Actions
Button
Pill-shaped actions with shared sizes, states, and variants.
Actions
Button Group
Related actions grouped into one control.
Loading preview…
Inputs
Calendar
Date selection with keyboard navigation.
Layout
Card
A raised surface for a self-contained item.
1
2
3
Layout
Carousel
A keyboard-accessible, horizontally sliding collection.
Drag the handle, drag elsewhere to nudge (Opacity follows the pointer), or tap to type.
InputsNew
Cell Slider
A numeric cell you drag to adjust, or tap to type an exact value.
Weekly traffic
Visits and returning visitors
436total visits
Display
Chart
Responsive charts using the shared chart tokens.
Loading preview…
Email notifications
Choose what lands in your inbox.
States
Inputs
Checkbox
A selectable boolean control with an accessible label.
Layout
Collapsible
Show and hide supporting details.
Inputs
Combobox
Searchable selection with an accessible popup.
No actions found.
Create project⌘N
Invite member⌘I
Settings⌘,
Navigation
Command
A filterable list of commands and destinations.
Side-opening menuRight-click or touch and holdKeyboard: Shift+F10
Single panel with BackRight-click or touch and holdKeyboard: Shift+F10
Both targets support Shift+F10. The drill-down variant keeps every level in one panel.
Choose an action to see the result.
Overlays
Context Menu
Contextual actions opened with a right click.
Overlays
Dialog
A focused modal surface with title and description.
MotionNew
Digit Pop
Animate a changing number, popping only the digits that changed.
١٢٣Right to left
Layout
Direction
Direction-aware layout for left-to-right and right-to-left interfaces.
Loading preview…
Bottom layout
Direction
Nesting
Actions
Overlays
Drawer
A draggable drawer for focused mobile-friendly flows.
Side-opening
Single panel with Back
Overflow (⋯)
Use variant="drilldown" with nested items to replace the panel. Back or the left arrow returns; Escape closes the menu.
Choose an action to see the result.
Overlays
Dropdown Menu
A popup menu for related actions.
No projects yet
Your next idea starts here.
Feedback
Empty
A helpful starting point when there is nothing to show.
Vertical field with helper text.
Use lowercase letters, numbers, and hyphens only.
Inputs
Field
Consistent labels, descriptions, and form layout.
Showing home
NavigationNew
Floating Nav
A floating bottom tab bar that keeps the active tab in view.
LayoutNew
Horizontal Scroll Hints
A horizontal scroller with edge buttons when content overflows.
Overlays
Hover Card
Supporting information shown on hover or keyboard focus.
Inputs
Input
Text fields with shared focus, invalid, and disabled states.
Inputs
Input Group
Inputs with integrated prefixes, suffixes, and actions.
Inputs
Input Otp
One-time passcode entry with individual digit slots.
Design system
Default row inside an ItemGroup
Product notes
Muted variant for secondary rows
Pinned
Standalone outline item
Bordered variant outside a group
Display
Item
Compact rows for related content and actions.
Quick search⌘K
Display
Kbd
Visual hints for keyboard shortcuts.
Inputs
Label
An accessible label linked to its form control.
Open, then zoom with + / − or the wheel.
OverlaysNew
Media Lightbox
A full-screen image viewer with zoom and pan.
Side-opening
Single panel with Back
Try nested projects, checkboxes, and radio items. Drill-down supports Back and arrow keys without opening another panel.
Choose an action to see the result.
Navigation
Menubar
Desktop-style menus with keyboard navigation.
Overlays
Modal
A controlled dialog wrapper retained for existing consumers.
Inputs
Native Select
A styled native select for straightforward choices.
Navigation
Navigation Menu
Top-level navigation with expandable content.
You're offline · showing recently viewed data
Page content
FeedbackNew
Offline Indicator
A slim banner shown while the browser is offline.
Weekend trip
4 members · 12 expenses
Settings
LayoutNew
Page Header
A page title row with back button, subtitle, and action.
Page 1 of 3
Navigation
Pagination
Navigation between pages of results.
MotionNew
Panel Reveal
Slide content in when switching panels, without breaking sticky children.
Revealed passwords hide again after 5 seconds.
InputsNew
Password Input
A password field with a reveal toggle that re-hides automatically.
+62
Inputs
Phone Input
International phone entry with a searchable country selector.
AM
JL
RS
Compatibility
Player Avatar
Initials avatar retained from Minton for import compatibility.
Overlays
Popover
A lightweight surface anchored to a trigger.
LayoutNew
Pressable Card
A card that is pressable as a whole, with subtle press feedback.
Uploading files
Feedback
Progress
Progress tracking with an accessible value.
Inputs
Radio Group
Choose one option from a labeled set.
Sidebar
Content
Layout
Resizable
Adjustable panels separated by a draggable handle.
Layout
Scroll Area
Scrollable content with styled scrollbars.
Ada Lovelace
Grace Hopper
Alan Turing
Katherine Johnson
InputsNew
Search Input
A search field with a clear button that keeps focus in place.
LayoutNew
Section Card
A card with a minimal title, count pill, and action header.
Navigation
Segment
A compact segmented filter built on tabs.
Inputs
Select
An accessible, styled selection control.
Workspace settings
Manage your team and billing preferences.
MembersBillingPreferences
Layout
Separator
A subtle divider between related content.
Overlays
Sheet
A side panel for focused editing without losing context.
Loading preview…
Navigation
Sidebar
A collapsible application sidebar and supporting primitives.
Feedback
Skeleton
Placeholder shapes while content is loading.
Inputs
Slider
Choose a value along an adjustable range.
Feedback
Sonner
Toast notifications using the shared surface and motion styles.
Syncing workspace…
Feedback
Spinner
A compact loading indicator.
MemberHarianG5G3*A+
Compatibility
Status Badge
Minton membership and grade labels retained for compatibility.
Ada Lovelace
Grace Hopper
Alan Turing
Swipe rows on a touch screen.
ActionsNew
Swipe Actions Row
Touch swipe shortcuts for list rows, alongside visible actions.
Inputs
Switch
A boolean toggle with reduced-motion-aware feedback.
| Project | Status |
|---|---|
| Billwithme | Active |
| Minton | Active |
Display
Table
Semantic tables with consistent spacing and surfaces.
| Player | Wins |
|---|---|
| Ada | 12 |
| Grace | 10 |
| Alan | 9 |
DisplayNew
Table Expand Footer
A footer button that expands or collapses a truncated table.
Loading preview…
Default pill tabs with a sliding surface indicator.
Navigation
Tabs
Pill and line tabs with a shared active indicator.
Inputs
Textarea
A multiline field for longer-form text.
Selected: system
ActionsNew
Theme Toggle
A dropdown menu preset for light, dark, and system themes.
Actions
Toggle
A pressable button with an on/off state.
Loading preview…
View mode
Date range
Text styles · multiple selection
Actions
Toggle Group
A group of related toggle buttons.
Overlays
Tooltip
Short contextual hints on hover and keyboard focus.