Components
Beautifully designed components built with Radix UI and Tailwind CSS.
Accordion
A vertically stacked set of interactive headings that reveal content.
AI Chat Input
An intelligent chat input with AI-powered suggestions and formatting.
Alert
Displays a callout for user attention with various severity levels.
Animated Group
Animate children with staggered entrance and exit animations.
Animated Number
Smoothly animate number changes with spring physics.
Avatar
An image element with a fallback for representing the user.
Badge
Displays a badge or a component that looks like a badge.
Border Trail
An animated border effect that trails around elements.
Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Button
Displays a button or a component that looks like a button.
Button Group
A set of related buttons grouped together.
Calendar
A date picker component with range and multiple selection support.
Card
A container component for displaying content in a structured format.
Chart
Beautiful and customizable charts built with Recharts.
Checkbox
A control that allows the user to toggle between checked and not checked.
Collapsible
An interactive component which expands/collapses a panel.
Combobox
Autocomplete input and command palette with a list of suggestions.
Command
Fast, composable, unstyled command menu for React.
Context Menu
Displays a menu triggered by right click or long press.
Data Table
Powerful tables with sorting, filtering, and pagination.
Date Picker
A date picker built on top of the Calendar component.
Dialog
A modal dialog that interrupts the user with important content.
Dropdown Menu
Displays a menu to the user triggered by a button.
Empty
Displays an empty state with optional actions.
Field
A form field wrapper with label, description, and error handling.
Glow Effect
Add a glowing effect to elements on hover or focus.
Input
Displays a form input field or a component that looks like an input field.
Input Group
Group related inputs with addons and actions.
Item
A flexible item component for lists and menus.
Kbd
Display keyboard shortcuts and key combinations.
Menubar
A visually persistent menu common in desktop applications.
Novel Editor
A Notion-style WYSIWYG editor with AI-powered features.
Pagination
Navigate through multiple pages of content.
Progress
Displays an indicator showing the completion progress of a task.
Progressive Blur
Apply a progressive blur effect that gradually increases in intensity.
Select
Displays a list of options for the user to pick from.
Sheet
Extends the Dialog component to display content that slides in from the edge.
Skeleton
Use to show a placeholder while content is loading.
Sonner
An opinionated toast component for React.
Spinner
Display a loading spinner to indicate ongoing processes.
Spotlight
A mouse-following spotlight effect that highlights content.
Switch
A control that allows the user to toggle between checked and not checked.
Table
A responsive table component for displaying tabular data.
Tabs
A set of layered sections of content—known as tab panels.
Text Effect
Animated text effects with various entrance animations.
Text Shimmer
Add a shimmering gradient animation to text.
Textarea
Displays a form textarea or a component that looks like a textarea.
Toggle
A two-state button that can be either on or off.
Toggle Group
A set of two-state buttons that can be toggled on or off.
Tree
A hierarchical tree view for displaying nested data structures.
Typography
Styles for headings, paragraphs, lists, and other text elements.