Browse the full UI catalog, preview components, tune the common props, and generate usage code that stays aligned with the registry behind the CLI.
Mengubah bentuk snippet yang digenerate untuk konteks Next.js atau Vite.
Quick preview respects the selected surface theme.
Mengubah aksen warna preview playground.
Navigation
Collapsible content sections
Feedback
Inline status messages
Overlays
Confirmation dialog with destructive actions
Components
Container with fixed aspect ratio
Data Display
User avatar with size variants
Status and label tags
Navigation breadcrumb trail
Actions
Primary, secondary, ghost, outline, destructive variants
Visually connected group of buttons with shared variant and size
Visual calendar for date selection with single, range, and multiple modes
Content container with variants
Horizontal/vertical content slider with touch drag and loop mode
Responsive charts (bar, line, area, pie) with themed tooltips and legends
Forms
Controlled checkbox with label
Simple expand/collapse component for single-section toggling
Searchable dropdown select
Command palette container
Right-click menu with nested dropdowns
Full-featured table with sorting, filtering, and pagination
Date input with calendar picker
Modal dialog with compound sub-components
Slide-in panel (left/right)
Contextual dropdown
Form field wrapper with label, helper text, and error message
Hover-activated popover for previews
Text input with variants
Input with prefix and suffix slots
Segmented input for OTP/PIN codes
Composable list item with icon, label, description, and trailing slots
Keyboard shortcut and key combination display
Desktop-style menu bar with nested dropdowns
Styled native select element
Horizontal navigation with dropdown/flyout panels
Animated top progress bar tied to navigation
Page navigation
Floating content anchored to a trigger
Linear progress bar
Radio button group
Resizable panel layout with drag handles
Scrollable container with custom scrollbar styling
Full-screen search dialog
Native select with styling
Layout
Horizontal/vertical divider
Panel that slides in from any edge of the screen (top/right/bottom/left)
Loading placeholder shapes
Range input
Animated circular loading indicator
Toggle switch
Styled HTML table primitives with responsive overflow
Tabbed content panels
Multi-line text input
Transient notification
Two-state button with pressed/unpressed behavior
Group of toggle buttons with single/multiple selection
Hover tooltip with positioning
Semantic text elements with consistent styling
Quick preview
Code output
"use client"; import { Button } from "@/components/ui/Button"; export function Example() { return ( <Button variant="primary" size="md"> Create recipe </Button> ); }
Workflow
npx react-principles add button
