---
name: "@hextaui"
slug: "hextaui"
description: "A shadcn/ui extension registry with 139 items spanning the full primitive set (Accordion through Tooltip, plus Button Group, Command Menu, Empty, Field, Input Group, Spinner, Video Player, Native Select, and Tree) and large suites of AI chat components (14: AI Chat History, Citations, File Upload, Model Selector, Streaming Response, Thinking, etc.), Auth flows (15: Login, Signup, OTP, Social, Magic Link, Recovery Codes), Billing blocks (14: Pricing Table, Invoice List, Payment Form, Subscription Card), Settings panels (17), Team views (12), and Task management blocks (7). Tailwind CSS, shadcn-compatible. Free. Use for: scaffolding complete SaaS application UI sections — especially auth, billing, team management, and AI chat — with production-quality blocks."
category: "Component library (general)"
tags: ["ai", "audio", "auth", "blocks", "buttons", "cards", "components", "dashboard", "forms", "hooks", "loaders", "media", "mobile", "navigation", "overlays", "payments", "saas", "tables"]
framework: "react"
license: "MIT"
author: "preetsuthar17"
website: "https://hextaui.com"
github: "https://github.com/preetsuthar17/hextaui"
registry: "https://hextaui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 631
component_count: 139
generated_at: "2026-07-28T08:59:05.895Z"
---

# @hextaui

A shadcn/ui extension registry with 139 items spanning the full primitive set (Accordion through Tooltip, plus Button Group, Command Menu, Empty, Field, Input Group, Spinner, Video Player, Native Select, and Tree) and large suites of AI chat components (14: AI Chat History, Citations, File Upload, Model Selector, Streaming Response, Thinking, etc.), Auth flows (15: Login, Signup, OTP, Social, Magic Link, Recovery Codes), Billing blocks (14: Pricing Table, Invoice List, Payment Form, Subscription Card), Settings panels (17), Team views (12), and Task management blocks (7). Tailwind CSS, shadcn-compatible. Free. Use for: scaffolding complete SaaS application UI sections — especially auth, billing, team management, and AI chat — with production-quality blocks.

## Links

- Website: https://hextaui.com
- GitHub: https://github.com/preetsuthar17/hextaui
- Registry JSON: https://hextaui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/hextaui
- This file: https://sh4dcn.vercel.app/md/hextaui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://hextaui.com/r/registry.json
pnpm dlx shadcn@latest add https://hextaui.com/r/registry.json
bunx shadcn@latest add https://hextaui.com/r/registry.json
# clone the source repo
git clone https://github.com/preetsuthar17/hextaui.git
# fetch the raw registry index
curl -s https://hextaui.com/r/registry.json
```

## Components (139)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | Expands to show or hide content. | `npx shadcn@latest add https://hextaui.com/r/accordion.json` |
| alert | registry:ui | Displays a status or message banner. | `npx shadcn@latest add https://hextaui.com/r/alert.json` |
| alert-dialog | registry:ui | Modal dialog for important actions or decisions. | `npx shadcn@latest add https://hextaui.com/r/alert-dialog.json` |
| aspect-ratio | registry:ui | Maintains a fixed ratio for child content. | `npx shadcn@latest add https://hextaui.com/r/aspect-ratio.json` |
| avatar | registry:ui | Shows an image or initials for a user/object. | `npx shadcn@latest add https://hextaui.com/r/avatar.json` |
| badge | registry:ui | Small badge for counts or indicators. | `npx shadcn@latest add https://hextaui.com/r/badge.json` |
| breadcrumb | registry:ui | Displays navigation path as links. | `npx shadcn@latest add https://hextaui.com/r/breadcrumb.json` |
| button | registry:ui | Clickable button for actions. | `npx shadcn@latest add https://hextaui.com/r/button.json` |
| button-group | registry:ui | Groups multiple buttons in a row. | `npx shadcn@latest add https://hextaui.com/r/button-group.json` |
| calendar | registry:ui | Grid to display days and dates. | `npx shadcn@latest add https://hextaui.com/r/calendar.json` |
| card | registry:ui | Container with header, content, and footer sections. | `npx shadcn@latest add https://hextaui.com/r/card.json` |
| carousel | registry:ui | Rotates or slides multiple items. | `npx shadcn@latest add https://hextaui.com/r/carousel.json` |
| checkbox | registry:ui | Box for selecting true or false. | `npx shadcn@latest add https://hextaui.com/r/checkbox.json` |
| collapsible | registry:ui | Panel that expands and collapses. | `npx shadcn@latest add https://hextaui.com/r/collapsible.json` |
| command-menu | registry:ui | Popup menu for running commands. | `npx shadcn@latest add https://hextaui.com/r/command-menu.json` |
| context-menu | registry:ui | Menu that appears on right-click or action. | `npx shadcn@latest add https://hextaui.com/r/context-menu.json` |
| dialog | registry:ui | Modal overlay for dialogs and forms. | `npx shadcn@latest add https://hextaui.com/r/dialog.json` |
| drawer | registry:ui | Drawer panel that slides in from edge. | `npx shadcn@latest add https://hextaui.com/r/drawer.json` |
| dropdown-menu | registry:ui | Menu that opens with a trigger control. | `npx shadcn@latest add https://hextaui.com/r/dropdown-menu.json` |
| empty | registry:ui | Graphic placeholder for empty states. | `npx shadcn@latest add https://hextaui.com/r/empty.json` |
| field | registry:ui | Field layout with label and help. | `npx shadcn@latest add https://hextaui.com/r/field.json` |
| hover-card | registry:ui | Card that appears on hover. | `npx shadcn@latest add https://hextaui.com/r/hover-card.json` |
| input | registry:ui | Single-line text input. | `npx shadcn@latest add https://hextaui.com/r/input.json` |
| input-group | registry:ui | Combines inputs and add-ons in a row. | `npx shadcn@latest add https://hextaui.com/r/input-group.json` |
| input-otp | registry:ui | Inputs for one-time code entry. | `npx shadcn@latest add https://hextaui.com/r/input-otp.json` |
| item | registry:ui | List item component with actions. | `npx shadcn@latest add https://hextaui.com/r/item.json` |
| label | registry:ui | Label for form input. | `npx shadcn@latest add https://hextaui.com/r/label.json` |
| menubar | registry:ui | Horizontal menu bar for navigation. | `npx shadcn@latest add https://hextaui.com/r/menubar.json` |
| navigation-menu | registry:ui | A collection of links for navigating websites. | `npx shadcn@latest add https://hextaui.com/r/navigation-menu.json` |
| pagination | registry:ui | Controls for paging through content. | `npx shadcn@latest add https://hextaui.com/r/pagination.json` |
| popover | registry:ui | Floating panel for additional content. | `npx shadcn@latest add https://hextaui.com/r/popover.json` |
| progress | registry:ui | Linear progress indicator. | `npx shadcn@latest add https://hextaui.com/r/progress.json` |
| radio-group | registry:ui | Group of choices where only one can be selected. | `npx shadcn@latest add https://hextaui.com/r/radio-group.json` |
| resizable | registry:ui | Container that users can resize. | `npx shadcn@latest add https://hextaui.com/r/resizable.json` |
| scroll-area | registry:ui | Scrollable area for overflowing content. | `npx shadcn@latest add https://hextaui.com/r/scroll-area.json` |
| sidebar | registry:ui | A collapsible sidebar component for navigation. | `npx shadcn@latest add https://hextaui.com/r/sidebar.json` |
| select | registry:ui | Custom dropdown select input. | `npx shadcn@latest add https://hextaui.com/r/select.json` |
| separator | registry:ui | Horizontal or vertical dividing line. | `npx shadcn@latest add https://hextaui.com/r/separator.json` |
| sheet | registry:ui | Drawer panel that slides in from edge. | `npx shadcn@latest add https://hextaui.com/r/sheet.json` |
| skeleton | registry:ui | Shimmer effect placeholder preview. | `npx shadcn@latest add https://hextaui.com/r/skeleton.json` |
| slider | registry:ui | Draggable control for selecting a value. | `npx shadcn@latest add https://hextaui.com/r/slider.json` |
| sonner | registry:ui | Displays toast notifications. | `npx shadcn@latest add https://hextaui.com/r/sonner.json` |
| spinner | registry:ui | Circular activity indicator. | `npx shadcn@latest add https://hextaui.com/r/spinner.json` |
| switch | registry:ui | Toggle to switch between states. | `npx shadcn@latest add https://hextaui.com/r/switch.json` |
| table | registry:ui | Displays data in rows and columns. | `npx shadcn@latest add https://hextaui.com/r/table.json` |
| tabs | registry:ui | Switches views using tabbed buttons. | `npx shadcn@latest add https://hextaui.com/r/tabs.json` |
| textarea | registry:ui | Multi-line text input. | `npx shadcn@latest add https://hextaui.com/r/textarea.json` |
| toggle | registry:ui | Pressable toggle button. | `npx shadcn@latest add https://hextaui.com/r/toggle.json` |
| toggle-group | registry:ui | Groups multiple toggle buttons. | `npx shadcn@latest add https://hextaui.com/r/toggle-group.json` |
| tooltip | registry:ui | Shows info on hover or focus. | `npx shadcn@latest add https://hextaui.com/r/tooltip.json` |
| kbd | registry:ui | Renders keyboard key appearance. | `npx shadcn@latest add https://hextaui.com/r/kbd.json` |
| native-select | registry:ui | Dropdown using the native select element. | `npx shadcn@latest add https://hextaui.com/r/native-select.json` |
| tree | registry:ui | Hierarchical collapsible structure. | `npx shadcn@latest add https://hextaui.com/r/tree.json` |
| video-player | registry:ui | Video playback with controls. | `npx shadcn@latest add https://hextaui.com/r/video-player.json` |
| ai-chat-history | registry:ui | Display and manage conversation history with search and filtering. | `npx shadcn@latest add https://hextaui.com/r/ai-chat-history.json` |
| ai-citations | registry:ui | Display citations and sources with collapsible source previews. | `npx shadcn@latest add https://hextaui.com/r/ai-citations.json` |
| ai-conversation | registry:ui | Display AI conversation messages with streaming support. | `npx shadcn@latest add https://hextaui.com/r/ai-conversation.json` |
| ai-error-handler | registry:ui | Display and handle AI errors with retry functionality. | `npx shadcn@latest add https://hextaui.com/r/ai-error-handler.json` |
| ai-file-upload | registry:ui | Upload files for AI analysis with drag and drop support. | `npx shadcn@latest add https://hextaui.com/r/ai-file-upload.json` |
| ai-message | registry:ui | Display AI messages with markdown support and code highlighting. | `npx shadcn@latest add https://hextaui.com/r/ai-message.json` |
| ai-model-selector | registry:ui | Select AI models from different providers with search. | `npx shadcn@latest add https://hextaui.com/r/ai-model-selector.json` |
| ai-prompt-input | registry:ui | Input component for AI prompts with context selection and options. | `npx shadcn@latest add https://hextaui.com/r/ai-prompt-input.json` |
| ai-prompt-templates | registry:ui | Browse and use pre-built prompt templates with variables. | `npx shadcn@latest add https://hextaui.com/r/ai-prompt-templates.json` |
| ai-settings-panel | registry:ui | Configure AI model parameters and behavior settings. | `npx shadcn@latest add https://hextaui.com/r/ai-settings-panel.json` |
| ai-streaming-response | registry:ui | Display streaming AI responses with token-by-token animation. | `npx shadcn@latest add https://hextaui.com/r/ai-streaming-response.json` |
| ai-suggested-prompts | registry:ui | Display suggested prompts with categories and search. | `npx shadcn@latest add https://hextaui.com/r/ai-suggested-prompts.json` |
| ai-thinking | registry:ui | Display AI thinking process with animated scrolling content. | `npx shadcn@latest add https://hextaui.com/r/ai-thinking.json` |
| ai-usage-quota | registry:ui | Display AI usage statistics, rate limits, and quota information. | `npx shadcn@latest add https://hextaui.com/r/ai-usage-quota.json` |
| auth-account-delete | registry:ui | Delete account with password confirmation and data loss acknowledgment. | `npx shadcn@latest add https://hextaui.com/r/auth-account-delete.json` |
| auth-change-password | registry:ui | Change password with current and new password fields. | `npx shadcn@latest add https://hextaui.com/r/auth-change-password.json` |
| auth-email-change | registry:ui | Change email address with password verification. | `npx shadcn@latest add https://hextaui.com/r/auth-email-change.json` |
| auth-forgot-password | registry:ui | Request password reset link via email. | `npx shadcn@latest add https://hextaui.com/r/auth-forgot-password.json` |
| auth-login-form | registry:ui | Login form with email/password and social login options. | `npx shadcn@latest add https://hextaui.com/r/auth-login-form.json` |
| auth-magic-link | registry:ui | Passwordless authentication via magic link email. | `npx shadcn@latest add https://hextaui.com/r/auth-magic-link.json` |
| auth-otp-verify | registry:ui | Verify OTP code sent via email, SMS, or WhatsApp. | `npx shadcn@latest add https://hextaui.com/r/auth-otp-verify.json` |
| auth-phone-verify | registry:ui | Verify phone number with OTP code via SMS. | `npx shadcn@latest add https://hextaui.com/r/auth-phone-verify.json` |
| auth-recovery-codes | registry:ui | Display and manage two-factor authentication recovery codes. | `npx shadcn@latest add https://hextaui.com/r/auth-recovery-codes.json` |
| auth-reset-password | registry:ui | Reset password with strength indicator and token validation. | `npx shadcn@latest add https://hextaui.com/r/auth-reset-password.json` |
| auth-session-manager | registry:ui | Manage active sessions across devices with revoke functionality. | `npx shadcn@latest add https://hextaui.com/r/auth-session-manager.json` |
| auth-signup-form | registry:ui | User registration form with email/password and social signup options. | `npx shadcn@latest add https://hextaui.com/r/auth-signup-form.json` |
| auth-social-accounts | registry:ui | Manage connected social accounts for authentication. | `npx shadcn@latest add https://hextaui.com/r/auth-social-accounts.json` |
| auth-two-factor-setup | registry:ui | Set up two-factor authentication with QR code and backup codes. | `npx shadcn@latest add https://hextaui.com/r/auth-two-factor-setup.json` |
| auth-two-factor-verify | registry:ui | Verify two-factor authentication code or recovery code. | `npx shadcn@latest add https://hextaui.com/r/auth-two-factor-verify.json` |
| auth-verify-email | registry:ui | Email verification status with resend functionality. | `npx shadcn@latest add https://hextaui.com/r/auth-verify-email.json` |
| billing-billing-history | registry:ui | Display transaction history with search, filters, and pagination. | `npx shadcn@latest add https://hextaui.com/r/billing-billing-history.json` |
| billing-coupon-code | registry:ui | Apply and manage discount coupon codes. | `npx shadcn@latest add https://hextaui.com/r/billing-coupon-code.json` |
| billing-invoice-details | registry:ui | Detailed invoice view in a sheet with line items and payment information. | `npx shadcn@latest add https://hextaui.com/r/billing-invoice-details.json` |
| billing-invoice-list | registry:ui | List of invoices with search, filters, and pagination. | `npx shadcn@latest add https://hextaui.com/r/billing-invoice-list.json` |
| billing-payment-failed | registry:ui | Display payment failure details with retry and support options. | `npx shadcn@latest add https://hextaui.com/r/billing-payment-failed.json` |
| billing-payment-form | registry:ui | Form to add payment methods with card details and billing address. | `npx shadcn@latest add https://hextaui.com/r/billing-payment-form.json` |
| billing-payment-method | registry:ui | Manage payment methods with add, edit, delete, and set default options. | `npx shadcn@latest add https://hextaui.com/r/billing-payment-method.json` |
| billing-payment-schedule | registry:ui | View scheduled payments with next payment preview and retry options. | `npx shadcn@latest add https://hextaui.com/r/billing-payment-schedule.json` |
| billing-plan-selector | registry:ui | Select subscription plans with monthly/annual billing toggle. | `npx shadcn@latest add https://hextaui.com/r/billing-plan-selector.json` |
| billing-pricing-table | registry:ui | Compare pricing plans in a table format with feature comparison. | `npx shadcn@latest add https://hextaui.com/r/billing-pricing-table.json` |
| billing-subscription-card | registry:ui | Display current subscription with usage, billing date, and management options. | `npx shadcn@latest add https://hextaui.com/r/billing-subscription-card.json` |
| billing-subscription-settings | registry:ui | Manage subscription settings including pause, cancel, and billing period changes. | `npx shadcn@latest add https://hextaui.com/r/billing-subscription-settings.json` |
| billing-upgrade-prompt | registry:ui | Prompt users to upgrade their plan with feature highlights. | `npx shadcn@latest add https://hextaui.com/r/billing-upgrade-prompt.json` |
| billing-usage-alerts | registry:ui | Configure and manage usage alerts with notification channels. | `npx shadcn@latest add https://hextaui.com/r/billing-usage-alerts.json` |
| billing-usage-billing | registry:ui | Display usage statistics with charts, breakdowns, and trend analysis. | `npx shadcn@latest add https://hextaui.com/r/billing-usage-billing.json` |
| settings-account | registry:ui | Manage account settings, subscription, and team members. | `npx shadcn@latest add https://hextaui.com/r/settings-account.json` |
| settings-activity-log | registry:ui | View account activity and audit trail with search and filters. | `npx shadcn@latest add https://hextaui.com/r/settings-activity-log.json` |
| settings-advanced | registry:ui | Developer tools and experimental features configuration. | `npx shadcn@latest add https://hextaui.com/r/settings-advanced.json` |
| settings-api-keys | registry:ui | Manage API keys for programmatic access with scopes and permissions. | `npx shadcn@latest add https://hextaui.com/r/settings-api-keys.json` |
| settings-export-data | registry:ui | Export your data in various formats with category selection. | `npx shadcn@latest add https://hextaui.com/r/settings-export-data.json` |
| settings-backup | registry:ui | Manage automatic backups and restore your data. | `npx shadcn@latest add https://hextaui.com/r/settings-backup.json` |
| settings-domains | registry:ui | Manage custom domains and SSL certificates. | `npx shadcn@latest add https://hextaui.com/r/settings-domains.json` |
| settings-import-data | registry:ui | Import data from JSON or CSV files with conflict resolution. | `npx shadcn@latest add https://hextaui.com/r/settings-import-data.json` |
| settings-integrations | registry:ui | Connect and manage third-party integrations. | `npx shadcn@latest add https://hextaui.com/r/settings-integrations.json` |
| settings-notifications | registry:ui | Manage notification preferences and quiet hours. | `npx shadcn@latest add https://hextaui.com/r/settings-notifications.json` |
| settings-preferences | registry:ui | Customize app experience, appearance, and accessibility. | `npx shadcn@latest add https://hextaui.com/r/settings-preferences.json` |
| settings-privacy | registry:ui | Control privacy settings and data sharing preferences. | `npx shadcn@latest add https://hextaui.com/r/settings-privacy.json` |
| settings-profile | registry:ui | Manage profile information, avatar, and social links. | `npx shadcn@latest add https://hextaui.com/r/settings-profile.json` |
| settings-security | registry:ui | Manage account security, 2FA, and active sessions. | `npx shadcn@latest add https://hextaui.com/r/settings-security.json` |
| settings-sso | registry:ui | Configure SSO providers for your organization. | `npx shadcn@latest add https://hextaui.com/r/settings-sso.json` |
| settings-storage | registry:ui | Manage storage usage and quotas by category. | `npx shadcn@latest add https://hextaui.com/r/settings-storage.json` |
| settings-team-members | registry:ui | Manage team members, roles, and invitations. | `npx shadcn@latest add https://hextaui.com/r/settings-team-members.json` |
| settings-webhooks | registry:ui | Configure webhooks for event notifications and deliveries. | `npx shadcn@latest add https://hextaui.com/r/settings-webhooks.json` |
| team-activity-feed | registry:ui | Display team activity and events in a feed with filtering. | `npx shadcn@latest add https://hextaui.com/r/team-activity-feed.json` |
| team-ai-room | registry:ui | Collaborative AI workspace for team members with shared conversations. | `npx shadcn@latest add https://hextaui.com/r/team-ai-room.json` |
| team-analytics | registry:ui | View team analytics and usage statistics with charts and breakdowns. | `npx shadcn@latest add https://hextaui.com/r/team-analytics.json` |
| team-chat | registry:ui | Team chat interface with messages and channels. | `npx shadcn@latest add https://hextaui.com/r/team-chat.json` |
| team-dashboard | registry:ui | Team dashboard with overview and metrics. | `npx shadcn@latest add https://hextaui.com/r/team-dashboard.json` |
| team-files | registry:ui | Manage and share team files with upload and download. | `npx shadcn@latest add https://hextaui.com/r/team-files.json` |
| team-invitations | registry:ui | Send and manage team invitations with email and link options. | `npx shadcn@latest add https://hextaui.com/r/team-invitations.json` |
| team-member-list | registry:ui | List and manage team members with roles and permissions. | `npx shadcn@latest add https://hextaui.com/r/team-member-list.json` |
| team-notes | registry:ui | Collaborative notes and documentation with AI summarization. | `npx shadcn@latest add https://hextaui.com/r/team-notes.json` |
| team-notifications | registry:ui | Team notifications and alerts with filtering and management. | `npx shadcn@latest add https://hextaui.com/r/team-notifications.json` |
| team-permissions-matrix | registry:ui | Manage team permissions and roles with visual matrix. | `npx shadcn@latest add https://hextaui.com/r/team-permissions-matrix.json` |
| team-projects | registry:ui | Manage team projects and tasks with member assignment. | `npx shadcn@latest add https://hextaui.com/r/team-projects.json` |
| team-prompt-library | registry:ui | Shared prompt library for the team with favorites and categories. | `npx shadcn@latest add https://hextaui.com/r/team-prompt-library.json` |
| team-settings | registry:ui | Team settings and configuration with avatar upload. | `npx shadcn@latest add https://hextaui.com/r/team-settings.json` |
| team-switcher | registry:ui | Switch between teams and workspaces with search. | `npx shadcn@latest add https://hextaui.com/r/team-switcher.json` |
| task-board | registry:ui | Kanban-style board for managing tasks with drag-and-drop functionality. | `npx shadcn@latest add https://hextaui.com/r/task-board.json` |
| task-create | registry:ui | Form to create new tasks with all necessary fields including assignees, projects, and due dates. | `npx shadcn@latest add https://hextaui.com/r/task-create.json` |
| task-detail | registry:ui | Detailed view of a task with subtasks, comments, attachments, and activity log. Includes URL-synced tabs. | `npx shadcn@latest add https://hextaui.com/r/task-detail.json` |
| task-filters | registry:ui | Filter and search tasks by status, priority, assignees, projects, and tags with active filter badges. | `npx shadcn@latest add https://hextaui.com/r/task-filters.json` |
| task-list | registry:ui | List view of tasks with sorting, filtering, bulk selection, and inline status updates. | `npx shadcn@latest add https://hextaui.com/r/task-list.json` |
| task-progress | registry:ui | Visual progress indicator for task completion goals with percentage and count display. | `npx shadcn@latest add https://hextaui.com/r/task-progress.json` |
| project-list | registry:ui | Display and manage projects with progress tracking, member avatars, and task counts. | `npx shadcn@latest add https://hextaui.com/r/project-list.json` |

## For AI agents

```text
You are adding components from @hextaui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/hextaui.md) for the component list.
2. Fetch the machine-readable index: https://hextaui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: hextaui).
```