Description
Our take on shadcn/uiārebuilt with precision and care.
- Maintains the same clean vibe and flat high-contrast look
- Rebuilt from scratch with high attention to detail
- Styled using Tailwind CSS v4
- Easily customizable with CVA for styling and variants
- All interactive components include animations powered by Motion
- Declarative, isomorphic form validation
Details
- Default Theme Tokens
CSS variables for default theme to help you get started. Robust design system editor is coming soon.
- Auto Resize
Auto resize panel content to fit the container.
- Accordion
An accordion is a vertically stacked set of expandable panels, each containing an interactive header and an associated content area.
- Alert
The Alert component displays important, contextual messages within a page. It highlights key information or states that require user attention, often related to a specific task or feature.
- Alert Dialog
A modal dialog used for critical interactions, such as confirming destructive or irreversible actions. It interrupts the user flow to present important information and requires a clear, intentional decision. The dialog disables background interaction to ensure users cannot dismiss it accidentally.
- Badge
Badges are small, circular or pill-shaped elements used to display status, notification counts, or labels. They draw attention to updates, unread messages, or categorized content. By conveying key information at a glance, badges improve navigation, boost engagement, and enhance overall usability.
- Breadcrumb
Breadcrumbs are a navigational aid that help users track their location within an app or website. They display the current page in context, showing the hierarchy of pages and enabling easy navigation back to higher levels. Especially useful for deeply nested pages, breadcrumbs improve orientation and enhance the overall user experience.
- Button
Used to trigger an action or event, such as submitting a form, displaying a dialog or sending a request.
- Card
Displays a card with header, content, and footer.
- Carousel
A carousel with motion and swipe built using Embla.
- Checkbox
Checkbox allows users to make a binary choiceāeither toggling a single option on or off or selecting multiple options from a list.
- Checkbox Field
Checkbox wrapper component for use with Form validation.
- Collapsible
An interactive component which expands/collapses a panel.
- Dialog
Overlay that appears on top of the main content to display important information or prompt user interaction. It prevents interaction with the rest of the application while active, ensuring user focus on a specific task. Suitable for general-purpose overlays and non-destructive interactions such as forms, previews, or feature walkthroughs.
- Form
Type-safe form validation utilizing web fundamentals using Conform and Zod (or Valibot).
- Input
Component captures user text input and used to create interactive single-line controls for web-based forms.
- Input Field
Input wrapper component for use with Form validation.
- Input OTP
Accessible one-time password component with copy paste functionality.
- Label
Label is a text element used to identify and describe input fields or other UI controls. It renders an accessible <label> element that provides a clear, semantic caption linked to a corresponding form control.
- Pagination
Pagination is an interface control for navigating large datasets split across multiple pages. It helps users move between pages efficiently, reduces cognitive load, and improves performance in data-heavy interfaces like tables and lists.
- Progress
Visual indicator that shows the progression of a task or process, such as loading, file transfer, installation, or submitting. It provides users with real-time feedback, helping manage expectations and improve the overall experience.
- Radio Group
A control element used to allow users to make a single selection from a predefined set of mutually exclusive options.
- Radio Group Field
Radio Group wrapper component for use with Form validation.
- Resizable
Accessible resizable panel groups and layouts with keyboard support.
- Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
- Skeleton
Use to show a placeholder while content is loading.
- Segmented Control
A segmented control is a unified set of closely related, mutually exclusive options where only one can be selected at a time. It allows users to filter, change the presentation, input, or browse content within the same view, context or data.
- Separator
Visually or semantically separates content.
- Select
Select is a user interface control that lets users choose a single option from a dropdown list. Triggered by a button, it displays a list of options and collapses once an option is selected, showing the chosen value.
- Select Field
Select wrapper component for use with Form validation.
- Slider
Interactive UI element that lets users select a single value or a range within a defined minimum and maximum. Typically presented as a horizontal track with a draggable handle.
- Slider Field
Slider wrapper component for use with Form validation.
- Switch
Switch is a toggle control used to turn a single option on or off. Commonly used for binary settingsālike enabling features or switching modesāit provides immediate, visible feedback to indicate the current state.
- Switch Field
Switch wrapper component for use with Form validation.
- Tabs
Tabs are a UI component used to organize and navigate between related sections of content within the same context. They display one panel at a time, helping users switch between different views or subsections of a single topic without leaving the page.
- Textarea
A multi-line plain-text user textarea, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
- Textarea Field
Textarea wrapper component for use with Form validation.
- Toggle
A button that toggles between on and off states.
- Toggle Group
A set of two-state buttons that can be toggled on or off.
- useForm
A hook to manage form validation.