All Components
npx afnoui add accordion/accordion-singlenpx afnoui add accordion/accordion-multiplenpx afnoui add alert/alert-defaultHeads up!
npx afnoui add alert/alert-destructiveError
npx afnoui add alert-dialog/alert-dialog-basicnpx afnoui add alert-dialog/alert-dialog-destructivenpx afnoui add alert-dialog/alert-dialog-logoutnpx afnoui add alert-dialog/alert-dialog-securitynpx afnoui add alert-dialog/alert-dialog-paymentnpx afnoui add async-field/async-field-selectnpx afnoui add async-field/async-field-comboboxnpx afnoui add async-field/async-field-multi-selectnpx afnoui add async-field/async-field-multi-comboboxnpx afnoui add infinite-field/infinite-field-selectnpx afnoui add infinite-field/infinite-field-comboboxnpx afnoui add infinite-field/infinite-field-multi-selectnpx afnoui add infinite-field/infinite-field-multi-comboboxnpx afnoui add infinite-field/infinite-field-select-autonpx afnoui add infinite-field/infinite-field-combobox-autonpx afnoui add infinite-field/infinite-field-multi-select-autonpx afnoui add infinite-field/infinite-field-multi-combobox-autonpx afnoui add badge/badge-defaultnpx afnoui add badge/badge-secondarynpx afnoui add badge/badge-outlinenpx afnoui add badge/badge-destructivenpx afnoui add breadcrumb/breadcrumb-basicnpx afnoui add breadcrumb/breadcrumb-with-iconsnpx afnoui add breadcrumb/breadcrumb-with-ellipsisnpx afnoui add breadcrumb/breadcrumb-custom-separatornpx afnoui add breadcrumb/breadcrumb-file-pathnpx afnoui add button/button-variantsnpx afnoui add button/button-sizesnpx afnoui add button/button-with-iconsnpx afnoui add button/button-statesnpx afnoui add card/card-basicCreate Project
Deploy your new project in one-click.
Notifications
Manage your notification settings.
Receive push notifications
Receive email updates
npx afnoui add card/card-statsTotal Revenue
+20.1%from last month
Subscriptions
+180.1%from last month
Sales
-4.5%from last month
Active Now
+201from last month
npx afnoui add card/card-pricingStarter
Perfect for individuals
- 5 projects
- Basic analytics
- Community support
Pro
Best for growing teams
- Unlimited projects
- Advanced analytics
- Priority support
- Custom integrations
Enterprise
For large organizations
- Everything in Pro
- Dedicated support
- SLA guarantee
- Custom contracts
npx afnoui add card/card-profileJohn Doe
Senior Developer
124
Posts
8.2k
Followers
256
Following
Sarah Miller
San Francisco, CA
Product Designer with 8+ years of experience. Passionate about creating beautiful and functional interfaces.
npx afnoui add card/card-social-post@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
npx afnoui add card/card-notificationNotifications
John Doe liked your post
2m ago
Sarah Miller commented on your photo
1h ago
Alex Brown started following you
3h ago
Tom Chen mentioned you in a comment
5h ago
npx afnoui add card/card-progressProject Progress
Website Redesign
npx afnoui add card/card-eventDEC
15
Team Standup
10:00 AM - 10:30 AM
Weekly sync to discuss project updates, blockers, and priorities for the week ahead.
npx afnoui add carousel/carousel-premium-fadenpx afnoui add carousel/carousel-product-rownpx afnoui add carousel/carousel-infinite-slidernpx afnoui add carousel/carousel-scale-focusnpx afnoui add carousel/carousel-progress-barnpx afnoui add carousel/carousel-momentum-galleryDynamic Width 40%
Dynamic Width 60%
Dynamic Width 30%
Dynamic Width 70%
npx afnoui add carousel/carousel-horizontal-feednpx afnoui add checkbox/checkbox-basicnpx afnoui add checkbox/checkbox-indeterminatenpx afnoui add checkbox/checkbox-with-descriptionReceive email notifications when someone mentions you.
Receive push notifications on your mobile device.
Receive important updates via SMS.
npx afnoui add checkbox/checkbox-card-stylenpx afnoui add checkbox/checkbox-groupnpx afnoui add checkbox/checkbox-inlinenpx afnoui add checkbox/checkbox-form-agreementI agree to the Terms of Service and Privacy Policy.
Send me promotional emails about new features and updates (optional)
npx afnoui add checkbox/checkbox-task-listnpx afnoui add checkbox/checkbox-colorednpx afnoui add collapsible/collapsible-basicnpx afnoui add collapsible/collapsible-file-treenpx afnoui add collapsible/collapsible-settingsnpx afnoui add collapsible/collapsible-faqnpx afnoui add collapsible/collapsible-animatednpx afnoui add combobox/combobox-basicnpx afnoui add combobox/combobox-countrynpx afnoui add combobox/combobox-userAssign to...
npx afnoui add combobox/combobox-multiselectnpx afnoui add combobox/combobox-creatableSelect or create...
npx afnoui add command/command-basicnpx afnoui add command/command-palettenpx afnoui add command/command-theme-switchernpx afnoui add command/command-user-menuJohn Doe
john@example.com
npx afnoui add command/command-compactnpx afnoui add command/command-inlineQuick actions:
npx afnoui add composite-input/composite-input-pricenpx afnoui add composite-input/composite-input-phonenpx afnoui add composite-input/composite-input-urlnpx afnoui add composite-input/composite-input-icon-prefixnpx afnoui add composite-input/composite-input-button-suffixnpx afnoui add composite-input/composite-input-passwordnpx afnoui add composite-input/composite-input-select-suffixnpx afnoui add composite-input/composite-input-searchnpx afnoui add composite-input/composite-input-domainYour site will be available at mysite.example.com
npx afnoui add composite-input/composite-input-credit-cardnpx afnoui add dialog/dialog-basicnpx afnoui add dialog/dialog-confirmationnpx afnoui add dialog/dialog-formnpx afnoui add dialog/dialog-successnpx afnoui add dialog/dialog-settingsnpx afnoui add dialog/dialog-image-uploadnpx afnoui add dialog/dialog-scrollablenpx afnoui add dropdown/dropdown-basicnpx afnoui add dropdown/dropdown-icon-onlynpx afnoui add dropdown/dropdown-keyboard-shortcutsnpx afnoui add dropdown/dropdown-checkbox-itemsnpx afnoui add dropdown/dropdown-radio-itemsnpx afnoui add dropdown/dropdown-radio-items-prioritynpx afnoui add dropdown/dropdown-nestednpx afnoui add dropdown/dropdown-user-accountnpx afnoui add dropdown/dropdown-context-actionsDocument.pdf
2.4 MB • Modified 2 hours ago
npx afnoui add form/form-sign-inSign In
Enter your credentials to access your account.
npx afnoui add input/input-fieldsnpx afnoui add menubar/menubar-applicationnpx afnoui add menubar/menubar-editornpx afnoui add menubar/menubar-simplenpx afnoui add navigation-menu/navigation-menu-fullnpx afnoui add navigation-menu/navigation-menu-simplenpx afnoui add navigation-menu/navigation-menu-meganpx afnoui add popover/popover-basicnpx afnoui add popover/popover-positionsnpx afnoui add popover/popover-date-pickernpx afnoui add popover/popover-formnpx afnoui add popover/popover-settingsnpx afnoui add popover/popover-sharenpx afnoui add popover/popover-slidernpx afnoui add progress/progress-linearnpx afnoui add progress/progress-circularSmall
Medium
Large
Complete
npx afnoui add progress/progress-colored-circularPrimary
Success
Warning
Error
npx afnoui add progress/progress-ringnpx afnoui add progress/progress-semi-circularSemi-circular
Indeterminate
Spinner Icon
Refresh Spin
npx afnoui add progress/progress-stylednpx afnoui add progress/progress-stepnpx afnoui add progress/progress-system-indicatorsnpx afnoui add progress/progress-contextual-cardsDownloading...
project-assets.zip
Uploading...
3 of 5 files
Storage Used
7.5 GB of 10 GB
Profile Completion
4/5 stepsnpx afnoui add radio/radio-basicnpx afnoui add scroll-area/scroll-area-basicnpx afnoui add scroll-area/scroll-area-notificationsNotifications
npx afnoui add scroll-area/scroll-area-horizontalnpx afnoui add scroll-area/scroll-area-code-blocknpx afnoui add scroll-area/scroll-area-chatTeam Chat
npx afnoui add scroll-area/scroll-area-bothnpx afnoui add select/select-basicnpx afnoui add separator/separator-basicRadix Primitives
An open-source UI component library.
npx afnoui add separator/separator-horizontalAccount Settings
Manage your account preferences and settings.
Privacy
Control who can see your profile and activity.
Notifications
Choose what notifications you want to receive.
npx afnoui add separator/separator-verticalnpx afnoui add separator/separator-navigationnpx afnoui add separator/separator-with-labelnpx afnoui add separator/separator-profile-cardJohn Doe
john@example.com
128
Posts
1.2k
Followers
384
Following
npx afnoui add separator/separator-form-sectionPersonal Information
Contact Details
Preferences
npx afnoui add sheet/sheet-rightnpx afnoui add sheet/sheet-sidesnpx afnoui add sheet/sheet-mobile-navnpx afnoui add sheet/sheet-cartnpx afnoui add sheet/sheet-filternpx afnoui add sheet/sheet-notificationsnpx afnoui add slider/slider-basicnpx afnoui add switch/switch-basicnpx afnoui add switch/switch-inlinenpx afnoui add switch/switch-with-stateTurn on this feature to unlock additional options.
Receive notifications about updates.
Toggle dark mode appearance.
npx afnoui add switch/switch-disablednpx afnoui add switch/switch-sizesnpx afnoui add tabs/tabs-basicAccount
Make changes to your account here.
npx afnoui add toggle/toggle-basicnpx afnoui add toggle/toggle-variantsnpx afnoui add toggle/toggle-sizesnpx afnoui add toggle/toggle-with-textnpx afnoui add toggle/toggle-controlledBold is off
npx afnoui add toggle/toggle-text-alignment-groupnpx afnoui add toggle/toggle-multiple-selectionnpx afnoui add toggle/toggle-view-switchernpx afnoui add toggle/toggle-theme-switchernpx afnoui add toggle/toggle-list-typenpx afnoui add toggle/toggle-media-controlsnpx afnoui add toggle/toggle-group-sizesnpx afnoui add tooltip/tooltip-basicnpx afnoui add tooltip/tooltip-arrowsnpx afnoui add tooltip/tooltip-positionsnpx afnoui add tooltip/tooltip-stylednpx afnoui add tooltip/tooltip-rich-contentnpx afnoui add tooltip/tooltip-toolbarnpx afnoui add tooltip/tooltip-shortcutsnpx afnoui add tooltip/tooltip-status-indicatorsTheme Editor
Light Mode
Export will use this format