Documentation
Everything you need to build beautiful interfaces
Explore the full library of components, modern custom components, AI components, and pre-built blocks. Each component comes with live previews and code you can copy directly into your project.
Components
44A vertically stacked set of interactive headings that reveal content.
Displays a callout for user attention.
A modal dialog that interrupts the user for important content.
Displays content within a desired ratio.
An image element with a fallback for representing the user.
Displays a badge or a component that looks like a badge.
Displays the path to the current resource using a hierarchy of links.
Displays a button or a component that looks like a button.
A date field component that allows users to enter and edit date.
Displays a card with header, content, and footer.
A carousel with motion and swipe built using Embla.
A control that allows the user to toggle between checked and not checked.
An interactive component which expands/collapses a panel.
Fast, composable, unstyled command menu.
Displays a menu to the user triggered by right click.
A window overlaid on either the primary window or another dialog window.
A drawer component for mobile and desktop.
Displays a menu to the user triggered by a button.
Building forms with React Hook Form and Zod validation.
For sighted users to preview content available behind a link.
Displays a form input field or a component that looks like an input field.
Accessible one-time password component with copy paste functionality.
Renders an accessible label associated with controls.
A visually persistent menu common in desktop applications.
A collection of links for navigating websites.
Pagination with page navigation, previous and next links.
Displays rich content in a portal, triggered by a button.
Displays an indicator showing the completion progress of a task.
A set of checkable buttons—known as radio buttons.
Accessible resizable panel groups and layouts with keyboard support.
Augments native scroll functionality for custom, cross-browser styling.
Displays a list of options for the user to pick from.
Visually or semantically separates content.
Extends the Dialog component to display content that complements the main content.
Use to show a placeholder while content is loading.
An input where the user selects a value from within a given range.
An opinionated toast component for React.
A control that allows the user to toggle between two states.
A responsive table component.
A set of layered sections of content, known as tab panels.
Displays a form textarea or a component that looks like a textarea.
A two-state button that can be either on or off.
A set of two-state buttons that can be toggled on or off.
A popup that displays information related to an element.
Modern Components
16A chat bubble interface with typing indicators, message history, and assistant/user styling. Perfect for AI-powered applications.
An asymmetric grid layout for feature showcases, inspired by Apple's design language.
Animated gradient text component with configurable colors and animation speed.
A number counter that animates when it scrolls into view, with easing and configurable duration.
A card with a mouse-tracking spotlight/glow effect that follows the cursor.
A typewriter effect text component that cycles through multiple strings.
Drag-and-drop file upload zone with progress indicators, image previews, and multi-file support.
Multi-step wizard component with horizontal/vertical orientations, progress tracking, and animated transitions.
Styled code display with line numbers, syntax highlighting, copy button, and line highlighting.
Infinite scrolling marquee for logos, testimonials, or any content. Supports reverse direction and pause on hover.
Eye-catching button with an animated shimmer/glow sweep effect. Configurable colors and speed.
Smooth reveal animation that fades in with blur and vertical offset. Triggers on scroll into view.
Vertical timeline component for changelogs, activity feeds, or step-by-step processes.
macOS-style dock with magnification effect on hover. Supports tooltips and custom icons.
List component that reveals items one by one with staggered animations on scroll.
Material Design-inspired ripple click effect wrapper. Apply to any element for tactile feedback.
AI Components
8Full-featured AI chat interface with streaming responses, markdown rendering, code blocks, copy buttons, and conversation management. Inspired by ChatGPT and Claude.
Multi-line prompt input with file attachments, model selector, send button, and keyboard shortcuts. Like the input bar in ChatGPT/Claude.
Styled message bubble with avatar, role indicator, timestamp, copy button, regenerate, and feedback actions. Supports markdown and code.
Clickable prompt suggestion cards displayed as conversation starters. Categorized with icons, like ChatGPT's home screen.
Dropdown to select AI models with capability badges, context window info, and provider logos. Like the model picker in ChatGPT/Cursor.
Rich code output block with syntax highlighting, language detection, copy button, and 'Apply to file' action. Inspired by Cursor's code output.
Sidebar conversation history with search, pinning, grouping by date, rename, and delete. Like ChatGPT's sidebar.
Renders AI-generated markdown with proper typography, syntax-highlighted code blocks, tables, and LaTeX math support.
Blocks
16Full-width hero block with gradient text, typing animation, CTA buttons, and a badge.
A bento-grid style feature showcase block with icons and descriptions.
3-tier pricing cards with monthly/yearly toggle and feature lists.
A grid of testimonial cards with star ratings and avatars.
A call-to-action banner with gradient background and dual CTAs.
Animated counter stats row that animates on scroll.
Multi-column footer with links, social icons, and branding.
Accordion-based frequently asked questions block with expandable answers.
Team member cards with avatars, roles, bios, skill tags, and social links.
Scrolling marquee of company logos with 'Trusted by' header. Dual-row with reverse direction.
Feature comparison matrix with plan columns, category grouping, and highlighted recommended plan.
Email capture block with 3 variants: simple, card, and gradient. Includes success state.
Authentication page with social login, email/password form. Card and split-screen variants.
404/error page with decorative background, search option. Minimal and illustrated variants.
Complete SaaS dashboard shell with collapsible sidebar, top bar, stats grid, and activity feed.
Interactive dashboard with scaling/density controls. Switch between compact, default, and comfortable modes in real-time.