UI Lab

    All Components

    Install with:
    npx afnoui add accordion/accordion-single
    Accordion Component

    Install with:
    npx afnoui add accordion/accordion-multiple
    Multiple Selection

    Install with:
    npx afnoui add alert/alert-default
    Default Alert
    Install with:
    npx afnoui add alert/alert-destructive
    Destructive Alert
    Install with:
    npx afnoui add alert-dialog/alert-dialog-basic
    Basic Alert Dialog
    Install with:
    npx afnoui add alert-dialog/alert-dialog-destructive
    Destructive Action
    Install with:
    npx afnoui add alert-dialog/alert-dialog-logout
    Logout Confirmation
    Install with:
    npx afnoui add alert-dialog/alert-dialog-security
    Security Verification
    Install with:
    npx afnoui add alert-dialog/alert-dialog-payment
    Payment Confirmation
    Install with:
    npx afnoui add async-field/async-field-select
    Async Field Select
    Install with:
    npx afnoui add async-field/async-field-combobox
    Async Field Combobox
    Install with:
    npx afnoui add async-field/async-field-multi-select
    Async Field Multi Select
    Install with:
    npx afnoui add async-field/async-field-multi-combobox
    Async Field Multi Combobox
    Install with:
    npx afnoui add infinite-field/infinite-field-select
    Infinite Field Select
    Install with:
    npx afnoui add infinite-field/infinite-field-combobox
    Infinite Field Combobox
    Install with:
    npx afnoui add infinite-field/infinite-field-multi-select
    Infinite Field Multi Select
    Install with:
    npx afnoui add infinite-field/infinite-field-multi-combobox
    Infinite Field Multi Combobox
    Install with:
    npx afnoui add infinite-field/infinite-field-select-auto
    Infinite Field Select (auto-scroll)
    Install with:
    npx afnoui add infinite-field/infinite-field-combobox-auto
    Infinite Field Combobox (auto-scroll)
    Install with:
    npx afnoui add infinite-field/infinite-field-multi-select-auto
    Infinite Field Multi Select (auto-scroll)
    Install with:
    npx afnoui add infinite-field/infinite-field-multi-combobox-auto
    Infinite Field Multi Combobox (auto-scroll)
    Install with:
    npx afnoui add badge/badge-default
    Default Badge
    Default
    Install with:
    npx afnoui add badge/badge-secondary
    Secondary Badge
    Secondary
    Install with:
    npx afnoui add badge/badge-outline
    Outline Badge
    Outline
    Install with:
    npx afnoui add badge/badge-destructive
    Destructive Badge
    Destructive
    Install with:
    npx afnoui add breadcrumb/breadcrumb-basic
    Basic Breadcrumb
    Install with:
    npx afnoui add breadcrumb/breadcrumb-with-icons
    With Icons
    Install with:
    npx afnoui add breadcrumb/breadcrumb-with-ellipsis
    With Ellipsis Dropdown
    Install with:
    npx afnoui add breadcrumb/breadcrumb-custom-separator
    Custom Separator
    Install with:
    npx afnoui add breadcrumb/breadcrumb-file-path
    File Path Style
    Install with:
    npx afnoui add button/button-variants
    Variants
    Install with:
    npx afnoui add button/button-sizes
    Sizes
    Install with:
    npx afnoui add button/button-with-icons
    With Icons
    Install with:
    npx afnoui add button/button-states
    States
    Install with:
    npx afnoui add card/card-basic
    Basic Card

    Create Project

    Deploy your new project in one-click.

    Notifications

    Manage your notification settings.

    Receive push notifications

    Receive email updates

    Install with:
    npx afnoui add card/card-stats
    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

    +201from last month

    Install with:
    npx afnoui add card/card-pricing
    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
    Install with:
    npx afnoui add card/card-profile
    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
    Install with:
    npx afnoui add card/card-social-post
    Social Post Card
    AB
    Alex Brown
    Pro

    @alexbrown2h 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

    Install with:
    npx afnoui add card/card-notification
    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

    Install with:
    npx afnoui add card/card-progress
    Progress Card

    Project Progress

    In Progress

    Website Redesign

    Overall Progress75%
    DesignComplete
    DevelopmentIn Progress
    TestingPending
    Due Dec 15
    JDSMAB
    Install with:
    npx afnoui add card/card-event
    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
    Install with:
    npx afnoui add carousel/carousel-premium-fade
    Premium Fade
    Slide 1
    Slide 2
    Slide 3
    Engine BehaviorOpacity TransitionLoopingYes
    Install with:
    npx afnoui add carousel/carousel-product-row
    Product Row
    Product 1
    Product 2
    Product 3
    Product 4
    Product 5
    Product 6
    Engine BehaviorBasis-1/3 Align StartLoopingNo
    Install with:
    npx afnoui add carousel/carousel-infinite-slider
    Infinite Slider
    FirstStandard sliding effect
    SecondStandard sliding effect
    ThirdStandard sliding effect
    Engine BehaviorDefault Slide LogicLoopingYes
    Install with:
    npx afnoui add carousel/carousel-scale-focus
    Scale Focus
    1
    2
    3
    4
    5
    Engine BehaviorConditional Opacity/ScaleLoopingYes
    Install with:
    npx afnoui add carousel/carousel-progress-bar
    Progress Bar
    Slide 1
    Slide 2
    Slide 3
    Slide 4
    Engine BehaviorState Driven WidthLoopingYes
    Install with:
    npx afnoui add carousel/carousel-momentum-gallery
    Momentum Gallery
    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: trueLoopingYes
    Install with:
    npx afnoui add carousel/carousel-horizontal-feed
    Horizontal Feed
    System Alert: Success Level
    System Alert: Warning Level
    System Alert: Error Level
    System Alert: Info Level
    Engine BehaviorAutoplayLoopingYes
    Install with:
    npx afnoui add checkbox/checkbox-basic
    Basic Checkbox
    Install with:
    npx afnoui add checkbox/checkbox-indeterminate
    Indeterminate State (Select All)
    Install with:
    npx afnoui add checkbox/checkbox-with-description
    With Description

    Receive email notifications when someone mentions you.

    Receive push notifications on your mobile device.

    Receive important updates via SMS.

    Install with:
    npx afnoui add checkbox/checkbox-card-style
    Card Style Selection
    Install with:
    npx afnoui add checkbox/checkbox-group
    Checkbox Group (Multi-select)
    Install with:
    npx afnoui add checkbox/checkbox-inline
    Inline Checkboxes
    Install with:
    npx afnoui add checkbox/checkbox-form-agreement
    Form Agreement

    I agree to the Terms of Service and Privacy Policy.

    Send me promotional emails about new features and updates (optional)

    Install with:
    npx afnoui add checkbox/checkbox-task-list
    Task List Style
    Install with:
    npx afnoui add checkbox/checkbox-colored
    Colored Variants
    Install with:
    npx afnoui add collapsible/collapsible-basic
    Basic Collapsible
    Install with:
    npx afnoui add collapsible/collapsible-file-tree
    File Tree Explorer
    App.tsx
    main.tsx
    Install with:
    npx afnoui add collapsible/collapsible-settings
    Settings Sections
    LanguageEnglish
    TimezoneUTC-5
    Date FormatMM/DD/YYYY
    Install with:
    npx afnoui add collapsible/collapsible-faq
    FAQ Style
    Install with:
    npx afnoui add collapsible/collapsible-animated
    Animated Content
    Logged in2 minutes ago
    Updated profile1 hour ago
    Created new project3 hours ago
    Invited team member1 day ago
    Install with:
    npx afnoui add combobox/combobox-basic
    Basic Combobox
    Install with:
    npx afnoui add combobox/combobox-country
    Country Selector
    Install with:
    npx afnoui add combobox/combobox-user
    User Selector
    Install with:
    npx afnoui add combobox/combobox-multiselect
    Multi-select (Manual logic)
    Install with:
    npx afnoui add combobox/combobox-creatable
    Creatable Content
    Install with:
    npx afnoui add command/command-basic
    Basic Command Menu
    Install with:
    npx afnoui add command/command-palette
    Command Palette (Spotlight Style)
    Install with:
    npx afnoui add command/command-theme-switcher
    Theme Switcher
    Install with:
    npx afnoui add command/command-user-menu
    User Menu Command
    JD

    John Doe

    john@example.com

    Log Out
    Install with:
    npx afnoui add command/command-compact
    Compact Command (No Input)
    Install with:
    npx afnoui add command/command-inline
    Inline Command Menu

    Quick actions:

    Install with:
    npx afnoui add composite-input/composite-input-price
    Price Input with Currency
    Install with:
    npx afnoui add composite-input/composite-input-phone
    Phone Number with Country Code
    Install with:
    npx afnoui add composite-input/composite-input-url
    URL Input with Protocol
    Install with:
    npx afnoui add composite-input/composite-input-icon-prefix
    Input with Icon Prefix
    Install with:
    npx afnoui add composite-input/composite-input-button-suffix
    Input with Button Suffix
    Install with:
    npx afnoui add composite-input/composite-input-password
    Password with Toggle
    Install with:
    npx afnoui add composite-input/composite-input-select-suffix
    Input with Select Suffix
    Install with:
    npx afnoui add composite-input/composite-input-search
    Search with Category Filter
    Install with:
    npx afnoui add composite-input/composite-input-domain
    Domain Input
    .example.com

    Your site will be available at mysite.example.com

    Install with:
    npx afnoui add composite-input/composite-input-credit-card
    Credit Card Input
    💳
    Install with:
    npx afnoui add dialog/dialog-basic
    Basic Dialog
    Install with:
    npx afnoui add dialog/dialog-confirmation
    Confirmation / Delete Dialog
    Install with:
    npx afnoui add dialog/dialog-form
    Form Dialog
    Install with:
    npx afnoui add dialog/dialog-success
    Success / Status Dialog
    Install with:
    npx afnoui add dialog/dialog-settings
    Settings Dialog
    Install with:
    npx afnoui add dialog/dialog-image-upload
    File Upload Dialog
    Install with:
    npx afnoui add dialog/dialog-scrollable
    Scrollable Content Dialog
    Install with:
    npx afnoui add dropdown/dropdown-basic
    Basic Dropdown
    Install with:
    npx afnoui add dropdown/dropdown-icon-only
    Icon Only
    Install with:
    npx afnoui add dropdown/dropdown-keyboard-shortcuts
    Keyboard Shortcuts
    Install with:
    npx afnoui add dropdown/dropdown-checkbox-items
    Checkbox Items
    Install with:
    npx afnoui add dropdown/dropdown-radio-items
    Radio Items (Theme)
    Install with:
    npx afnoui add dropdown/dropdown-radio-items-priority
    Radio Items (Priority)
    Install with:
    npx afnoui add dropdown/dropdown-nested
    Nested Submenu
    Install with:
    npx afnoui add dropdown/dropdown-user-account
    User Account
    Install with:
    npx afnoui add dropdown/dropdown-context-actions
    Context Actions

    Document.pdf

    2.4 MBModified 2 hours ago

    Install with:
    npx afnoui add form/form-sign-in
    Sign In Form

    Sign In

    Enter your credentials to access your account.

    Install with:
    npx afnoui add input/input-fields
    Input Fields
    Install with:
    npx afnoui add menubar/menubar-application
    Application Menubar
    Install with:
    npx afnoui add menubar/menubar-editor
    Text Editor Menubar
    Install with:
    npx afnoui add menubar/menubar-simple
    Simple Navigation
    Install with:
    npx afnoui add navigation-menu/navigation-menu-advanced
    Advanced Multi-Level Navigation
    Install with:
    npx afnoui add navigation-menu/navigation-menu-full
    Full Navigation Menu
    Install with:
    npx afnoui add navigation-menu/navigation-menu-simple
    Simple Links Navigation
    Install with:
    npx afnoui add navigation-menu/navigation-menu-mega
    Products Mega Menu
    Install with:
    npx afnoui add popover/popover-basic
    Basic Popover
    Install with:
    npx afnoui add popover/popover-positions
    Popover Positions
    Install with:
    npx afnoui add popover/popover-date-picker
    Date Picker Popover
    Install with:
    npx afnoui add popover/popover-form
    Form in Popover
    Install with:
    npx afnoui add popover/popover-settings
    Settings Popover
    Install with:
    npx afnoui add popover/popover-share
    Share Popover
    Install with:
    npx afnoui add popover/popover-slider
    Slider in Popover
    Install with:
    npx afnoui add progress/progress-linear
    Linear Progress
    Loading...33%
    Install with:
    npx afnoui add progress/progress-circular
    Circular Progress
    25%

    Small

    50%

    Medium

    75%

    Large

    100%

    Complete

    Install with:
    npx afnoui add progress/progress-colored-circular
    Colored Circular Progress
    0%

    Primary

    0%

    Success

    0%

    Warning

    0%

    Error

    Install with:
    npx afnoui add progress/progress-ring
    Ring/Donut Progress
    0percent
    0percent
    100percent
    Install with:
    npx afnoui add progress/progress-semi-circular
    Semi-circular & Indeterminate
    65%

    Semi-circular

    Indeterminate

    Spinner Icon

    Refresh Spin

    Install with:
    npx afnoui add progress/progress-styled
    Styled Progress Bars
    Install with:
    npx afnoui add progress/progress-step
    Step Progress
    2
    3
    4
    Install with:
    npx afnoui add progress/progress-system-indicators
    System Indicators
    75%
    Install with:
    npx afnoui add progress/progress-contextual-cards
    Contextual Progress Cards

    Downloading...

    project-assets.zip

    0%

    Uploading...

    3 of 5 files

    60%

    Storage Used

    7.5 GB of 10 GB

    75%

    Profile Completion

    4/5 steps
    Install with:
    npx afnoui add radio/radio-basic
    Radio Group
    Install with:
    npx afnoui add scroll-area/scroll-area-basic
    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
    Install with:
    npx afnoui add scroll-area/scroll-area-notifications
    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

    Install with:
    npx afnoui add scroll-area/scroll-area-horizontal
    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
    Install with:
    npx afnoui add scroll-area/scroll-area-code-block
    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;
    Install with:
    npx afnoui add scroll-area/scroll-area-chat
    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
    Install with:
    npx afnoui add scroll-area/scroll-area-both
    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
    Install with:
    npx afnoui add select/select-basic
    Select Component
    Install with:
    npx afnoui add separator/separator-basic
    Basic Separator

    Radix Primitives

    An open-source UI component library.

    Blog
    Docs
    Source
    Install with:
    npx afnoui add separator/separator-horizontal
    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.

    Install with:
    npx afnoui add separator/separator-vertical
    Vertical Separator
    Install with:
    npx afnoui add separator/separator-navigation
    Navigation Separator
    Install with:
    npx afnoui add separator/separator-with-label
    With Label
    Or continue with
    Install with:
    npx afnoui add separator/separator-profile-card
    Profile Card Separator

    John Doe

    john@example.com

    128

    Posts

    1.2k

    Followers

    384

    Following

    Install with:
    npx afnoui add separator/separator-form-section
    Form Section Separator

    Personal Information

    Contact Details

    Preferences

    Install with:
    npx afnoui add separator/separator-footer
    Footer Links
    Install with:
    npx afnoui add sheet/sheet-right
    Right Side Sheet
    Install with:
    npx afnoui add sheet/sheet-sides
    Side Variations
    Install with:
    npx afnoui add sheet/sheet-mobile-nav
    Mobile Navigation
    Install with:
    npx afnoui add sheet/sheet-cart
    Shopping Cart
    Install with:
    npx afnoui add sheet/sheet-filter
    Filter Panel
    Install with:
    npx afnoui add sheet/sheet-notifications
    Notifications Panel
    Install with:
    npx afnoui add slider/slider-basic
    Slider Component
    Install with:
    npx afnoui add switch/switch-basic
    Switch Component
    Install with:
    npx afnoui add switch/switch-inline
    Basic Switch
    Install with:
    npx afnoui add switch/switch-with-state
    Switch with State

    Turn on this feature to unlock additional options.

    Receive notifications about updates.

    Toggle dark mode appearance.

    Install with:
    npx afnoui add switch/switch-disabled
    Disabled Switch
    Install with:
    npx afnoui add switch/switch-sizes
    Switch Sizes
    Install with:
    npx afnoui add tabs/tabs-basic
    Tabs Component

    Account

    Make changes to your account here.

    Install with:
    npx afnoui add toggle/toggle-basic
    Basic Toggle
    Install with:
    npx afnoui add toggle/toggle-variants
    Toggle Variants
    Install with:
    npx afnoui add toggle/toggle-sizes
    Toggle Sizes
    Install with:
    npx afnoui add toggle/toggle-with-text
    Toggle With Text
    Install with:
    npx afnoui add toggle/toggle-controlled
    Controlled Toggle

    Bold is off

    Install with:
    npx afnoui add toggle/toggle-text-alignment-group
    Text Alignment Toggle Group
    Install with:
    npx afnoui add toggle/toggle-multiple-selection
    Multiple Selection
    Install with:
    npx afnoui add toggle/toggle-view-switcher
    View Switcher
    Install with:
    npx afnoui add toggle/toggle-theme-switcher
    Theme Switcher
    Install with:
    npx afnoui add toggle/toggle-list-type
    List Type Toggle
    Install with:
    npx afnoui add toggle/toggle-media-controls
    Media Player Controls
    Install with:
    npx afnoui add toggle/toggle-group-sizes
    Toggle Group Sizes
    Install with:
    npx afnoui add tooltip/tooltip-basic
    Basic Tooltips
    Install with:
    npx afnoui add tooltip/tooltip-arrows
    Arrow Tooltips
    Install with:
    npx afnoui add tooltip/tooltip-positions
    Tooltip Positions
    Install with:
    npx afnoui add tooltip/tooltip-styled
    Styled Tooltips
    Install with:
    npx afnoui add tooltip/tooltip-rich-content
    Rich Content Tooltips
    Install with:
    npx afnoui add tooltip/tooltip-toolbar
    Interactive Toolbar
    Install with:
    npx afnoui add tooltip/tooltip-shortcuts
    Keyboard Shortcuts
    Install with:
    npx afnoui add tooltip/tooltip-status-indicators
    Status Indicator Tooltips
    Online
    Degraded
    Offline