UI Lab

    All Components

    Accordion

    Accordion Component

    Alerts

    Alert Variants

    Alert Dialogs

    Basic Alert Dialog
    Destructive Action
    Logout Confirmation
    Security Verification
    Payment Confirmation

    Badges

    Badge Variants
    Default
    Secondary
    Outline
    Destructive

    Breadcrumbs

    Basic Breadcrumb
    With Icons
    With Ellipsis Dropdown
    Custom Separator
    File Path Style

    Buttons

    Variants
    Sizes
    With Icons
    States

    Card

    Basic Card

    Create Project

    Deploy your new project in one-click.

    Notifications

    Manage your notification settings.

    Receive push notifications

    Receive email updates

    Stats Cards

    Total Revenue

    $45,231.89

    +20.1% from last month

    Subscriptions

    +2,350

    +180.1% from last month

    Sales

    +12,234

    -4.5% from last month

    Active Now

    +573

    +201 since last hour

    Pricing Cards

    Starter

    Perfect for individuals

    $0/mo
    • 5 projects
    • Basic analytics
    • Community support
    Most Popular

    Pro

    Best for growing teams

    $29/mo
    • Unlimited projects
    • Advanced analytics
    • Priority support
    • Custom integrations

    Enterprise

    For large organizations

    $99/mo
    • Everything in Pro
    • Dedicated support
    • SLA guarantee
    • Custom contracts
    Profile Card
    JD

    John Doe

    Senior Developer

    124

    Posts

    8.2k

    Followers

    256

    Following

    SM

    Sarah Miller

    San Francisco, CA

    Product Designer with 8+ years of experience. Passionate about creating beautiful and functional interfaces.

    UI/UX
    Design Systems
    Figma
    4.9 rating Joined 2019
    Social Post Card
    AB
    Alex Brown
    Pro

    @alexbrown • 2h ago

    Just shipped a new feature! 🚀 Really excited about this one - it's going to make everyone's workflow so much smoother. Check it out and let me know what you think!

    New Feature Announcement

    blog.example.com

    Notification Card

    Notifications

    JD

    John Doe liked your post

    2m ago

    SM

    Sarah Miller commented on your photo

    1h ago

    AB

    Alex Brown started following you

    3h ago

    TC

    Tom Chen mentioned you in a comment

    5h ago

    Progress Card

    Project Progress

    In Progress

    Website Redesign

    Overall Progress75%
    DesignComplete
    DevelopmentIn Progress
    TestingPending
    Due Dec 15
    JDSMAB
    Event Card

    DEC

    15

    Team Standup

    10:00 AM - 10:30 AM

    Weekly sync to discuss project updates, blockers, and priorities for the week ahead.

    Conference Room A / Zoom
    Attendees:
    JDSMABTC
    +3

    Carousel Lab

    Carousel Lab

    Properties sync audit v1.0

    7 Scenarios Loaded
    01. Premium Fade - Slow Cross-Dissolve Effect
    Slide 1
    Slide 2
    Slide 3
    Engine BehaviorOpacity Transition
    LoopingYes
    02. Product Row - Multi-item grid display
    Product 1
    Product 2
    Product 3
    Product 4
    Product 5
    Product 6
    Engine BehaviorBasis-1/3 Align Start
    LoopingNo
    03. Infinite Slider - Standard sliding movement
    FirstStandard sliding effect
    SecondStandard sliding effect
    ThirdStandard sliding effect
    Engine BehaviorDefault Slide Logic
    LoopingYes
    04. Scale Focus - Center-aligned zoom effect
    1
    2
    3
    4
    5
    Engine BehaviorConditional Opacity/Scale
    LoopingYes
    05. Progress Bar - Visual navigation indicator
    Slide 1
    Slide 2
    Slide 3
    Slide 4
    Engine BehaviorState Driven Width
    LoopingYes
    06. Momentum Gallery - Free-drag variable width
    ASSET_ID: 000

    Dynamic Width 40%

    ASSET_ID: 001

    Dynamic Width 60%

    ASSET_ID: 002

    Dynamic Width 30%

    ASSET_ID: 003

    Dynamic Width 70%

    Engine BehaviordragFree: true
    LoopingYes
    07. Horizontal Feed - Horizontal alert ticker
    System Alert: Success Level
    System Alert: Warning Level
    System Alert: Error Level
    System Alert: Info Level
    Engine Behavioraxis: 'x'
    LoopingYes

    Checkbox

    Basic Checkbox
    Indeterminate State (Select All)
    With Description

    Receive email notifications when someone mentions you.

    Receive push notifications on your mobile device.

    Receive important updates via SMS.

    Card Style Selection
    Checkbox Group (Multi-select)
    Inline Checkboxes
    Form Agreement
    Task List Style
    Colored Variants

    Collapsibles

    Basic Collapsible
    File Tree Explorer
    App.tsx
    main.tsx
    Settings Sections
    LanguageEnglish
    TimezoneUTC-5
    Date FormatMM/DD/YYYY
    FAQ Style
    Animated Content
    Logged in2 minutes ago
    Updated profile1 hour ago
    Created new project3 hours ago
    Invited team member1 day ago

    Combobox

    Basic Combobox
    Country Selector (with Icons)
    User Selector (with Avatars)
    Multi-select Tags
    Creatable Combobox
    States

    Command

    Basic Command Menu
    Command Palette (Spotlight Style)
    Theme Switcher
    User Menu Command
    JD

    John Doe

    john@example.com

    Log Out
    Compact Command (No Input)
    Inline Command Menu

    Quick actions:

    Composite Inputs

    Price Input with Currency
    Phone Number with Country Code
    URL Input with Protocol
    Input with Icon Prefix
    Input with Button Suffix
    Password with Toggle
    Input with Select Suffix
    Search with Category Filter
    Domain Input
    .example.com

    Your site will be available at mysite.example.com

    Credit Card Input
    💳

    Dialog

    Basic Dialog
    Confirmation / Delete Dialog
    Form Dialog
    Success / Status Dialog
    Settings Dialog
    File Upload Dialog
    Scrollable Content Dialog

    Dropdown Menu

    Basic Dropdown
    With Keyboard Shortcuts
    Checkbox Items
    Radio Items
    Nested Submenu
    User Account Menu
    Context Actions (File Item)

    Document.pdf

    2.4 MB • Modified 2 hours ago

    Form Example

    Sign In Form

    Sign In

    Enter your credentials to access your account.

    Inputs

    Input Fields

    Menubar

    Application Menubar
    Text Editor Menubar
    Simple Navigation

    Navigation Menu

    Advanced Multi-Level Navigation
    Full Navigation Menu
    Simple Links Navigation
    Products Mega Menu

    Popover

    Basic Popover
    Popover Positions
    Date Picker Popover
    Form in Popover
    Settings Popover
    Share Popover
    Slider in Popover

    Progress

    Linear Progress
    Loading...33%
    Circular Progress
    25%

    Small

    50%

    Medium

    75%

    Large

    100%

    Complete

    Colored Circular Progress
    0%

    Primary

    0%

    Success

    0%

    Warning

    0%

    Error

    Ring/Donut Progress
    0percent
    0percent
    100percent
    Semi-circular & Indeterminate
    65%

    Semi-circular

    Indeterminate

    Spinner Icon

    Refresh Spin

    Styled Progress Bars
    Step Progress
    2
    3
    4
    System Indicators
    75%
    Contextual Progress Cards

    Downloading...

    project-assets.zip

    0%

    Uploading...

    3 of 5 files

    60%

    Storage Used

    7.5 GB of 10 GB

    Profile Completion

    4/5 steps

    Radio Group

    Radio Group Component

    Scroll Area

    Basic Scroll Area

    Tags

    v1.2.0-beta.0
    v1.2.0-beta.1
    v1.2.0-beta.2
    v1.2.0-beta.3
    v1.2.0-beta.4
    v1.2.0-beta.5
    v1.2.0-beta.6
    v1.2.0-beta.7
    v1.2.0-beta.8
    v1.2.0-beta.9
    v1.2.0-beta.10
    v1.2.0-beta.11
    v1.2.0-beta.12
    v1.2.0-beta.13
    v1.2.0-beta.14
    v1.2.0-beta.15
    v1.2.0-beta.16
    v1.2.0-beta.17
    v1.2.0-beta.18
    v1.2.0-beta.19
    v1.2.0-beta.20
    v1.2.0-beta.21
    v1.2.0-beta.22
    v1.2.0-beta.23
    v1.2.0-beta.24
    v1.2.0-beta.25
    v1.2.0-beta.26
    v1.2.0-beta.27
    v1.2.0-beta.28
    v1.2.0-beta.29
    v1.2.0-beta.30
    v1.2.0-beta.31
    v1.2.0-beta.32
    v1.2.0-beta.33
    v1.2.0-beta.34
    v1.2.0-beta.35
    v1.2.0-beta.36
    v1.2.0-beta.37
    v1.2.0-beta.38
    v1.2.0-beta.39
    v1.2.0-beta.40
    v1.2.0-beta.41
    v1.2.0-beta.42
    v1.2.0-beta.43
    v1.2.0-beta.44
    v1.2.0-beta.45
    v1.2.0-beta.46
    v1.2.0-beta.47
    v1.2.0-beta.48
    v1.2.0-beta.49
    Notifications List

    Notifications

    Your call has been confirmed.

    1 hour ago

    You have a new message!

    2 hours ago

    Your subscription is expiring soon!

    5 hours ago

    Payment received successfully.

    1 day ago

    New feature available.

    2 days ago

    Weekly report is ready.

    3 days ago

    Security update applied.

    4 days ago

    Team member joined.

    5 days ago

    Horizontal Scroll
    Abstract Waves
    John Doe · $299
    Mountain Sunset
    Jane Smith · $450
    City Nights
    Mike Chen · $375
    Ocean Dreams
    Sarah Lee · $520
    Forest Path
    Tom Wilson · $280
    Desert Storm
    Anna Brown · $390
    Code Block
    import { useState, useEffect } from 'react';
    
    interface User {
      id: number;
      name: string;
      email: string;
      role: 'admin' | 'user' | 'guest';
    }
    
    function useUsers() {
      const [users, setUsers] = useState<User[]>([]);
      const [loading, setLoading] = useState(true);
      const [error, setError] = useState<Error | null>(null);
    
      useEffect(() => {
        async function fetchUsers() {
          try {
            const response = await fetch('/api/users');
            const data = await response.json();
            setUsers(data);
          } catch (err) {
            setError(err as Error);
          } finally {
            setLoading(false);
          }
        }
    
        fetchUsers();
      }, []);
    
      return { users, loading, error };
    }
    
    export default useUsers;
    Chat Messages

    Team Chat

    Alice

    Hey team! 👋

    10:30 AM

    Hi Alice! How's the project going?

    10:32 AM

    Alice

    Going well! Just finished the design review.

    10:33 AM

    Bob

    Great work everyone!

    10:35 AM

    Thanks! Let's sync up later today.

    10:36 AM

    Alice

    Sounds good. How about 3 PM?

    10:38 AM

    Perfect! 👍

    10:39 AM
    Both Directions
    IDNameEmailStatusRole
    1User 1user1@example.com
    Active
    Admin
    2User 2user2@example.com
    Inactive
    User
    3User 3user3@example.com
    Active
    User
    4User 4user4@example.com
    Inactive
    Admin
    5User 5user5@example.com
    Active
    User
    6User 6user6@example.com
    Inactive
    User
    7User 7user7@example.com
    Active
    Admin
    8User 8user8@example.com
    Inactive
    User
    9User 9user9@example.com
    Active
    User
    10User 10user10@example.com
    Inactive
    Admin
    11User 11user11@example.com
    Active
    User
    12User 12user12@example.com
    Inactive
    User
    13User 13user13@example.com
    Active
    Admin
    14User 14user14@example.com
    Inactive
    User
    15User 15user15@example.com
    Active
    User

    Select

    Select Component

    Separators

    Basic Separator

    Radix Primitives

    An open-source UI component library.

    Blog
    Docs
    Source
    Horizontal Separator

    Account Settings

    Manage your account preferences and settings.

    Privacy

    Control who can see your profile and activity.

    Notifications

    Choose what notifications you want to receive.

    Vertical Separator
    Navigation Separator
    With Label
    Or continue with
    Profile Card Separator

    John Doe

    john@example.com

    128

    Posts

    1.2k

    Followers

    384

    Following

    Form Section Separator

    Personal Information

    Contact Details

    Preferences

    Footer Links

    Sheet (Slide-over Panel)

    Right Side Sheet
    Side Variations
    Mobile Navigation
    Shopping Cart
    Filter Panel
    Notifications Panel

    Slider

    Slider Component

    Switch

    Switch Component
    Basic Switch
    Switch with State

    Turn on this feature to unlock additional options.

    Receive notifications about updates.

    Toggle dark mode appearance.

    Disabled Switch
    Switch Sizes

    Tabs

    Tabs Component

    Account

    Make changes to your account here.

    Toggle & Toggle Group

    Basic Toggle
    Toggle Variants
    Toggle Sizes
    With Text
    Controlled Toggle

    Bold is off

    Text Alignment Toggle Group
    Multiple Selection
    View Switcher
    Theme Switcher
    List Type Toggle
    Media Player Controls
    Toggle Group Sizes

    Tooltip

    Basic Tooltips
    Arrow Tooltips (Using TooltipPrimitive.Arrow)
    Tooltip Positions with Arrows
    Styled Tooltips with Arrows
    Rich Content Tooltips with Arrows
    Interactive Toolbar
    Keyboard Shortcuts Tooltips
    Status Indicator Tooltips
    Online
    Degraded
    Offline