P
preetsuthar17
/
HextaUI
/
ui
Files
Code
Info
Accordion
accordion
Expands to show or hide content.
AI Chat History
ai-chat-history
Display and manage conversation history with search and filtering.
AI Citations
ai-citations
Display citations and sources with collapsible source previews.
AI Conversation
ai-conversation
Display AI conversation messages with streaming support.
AI Error Handler
ai-error-handler
Display and handle AI errors with retry functionality.
AI File Upload
ai-file-upload
Upload files for AI analysis with drag and drop support.
AI Message
ai-message
Display AI messages with markdown support and code highlighting.
AI Model Selector
ai-model-selector
Select AI models from different providers with search.
AI Prompt Input
ai-prompt-input
Input component for AI prompts with context selection and options.
AI Prompt Templates
ai-prompt-templates
Browse and use pre-built prompt templates with variables.
AI Settings Panel
ai-settings-panel
Configure AI model parameters and behavior settings.
AI Streaming Response
ai-streaming-response
Display streaming AI responses with token-by-token animation.
AI Suggested Prompts
ai-suggested-prompts
Display suggested prompts with categories and search.
AI Thinking
ai-thinking
Display AI thinking process with animated scrolling content.
AI Usage Quota
ai-usage-quota
Display AI usage statistics, rate limits, and quota information.
Alert
alert
Displays a status or message banner.
Alert Dialog
alert-dialog
Modal dialog for important actions or decisions.
Aspect Ratio
aspect-ratio
Maintains a fixed ratio for child content.
Auth Account Delete
auth-account-delete
Delete account with password confirmation and data loss acknowledgment.
Auth Change Password
auth-change-password
Change password with current and new password fields.
Auth Email Change
auth-email-change
Change email address with password verification.
Auth Forgot Password
auth-forgot-password
Request password reset link via email.
Auth Login Form
auth-login-form
Login form with email/password and social login options.
Auth Magic Link
auth-magic-link
Passwordless authentication via magic link email.
Auth OTP Verify
auth-otp-verify
Verify OTP code sent via email, SMS, or WhatsApp.
Auth Phone Verify
auth-phone-verify
Verify phone number with OTP code via SMS.
Auth Recovery Codes
auth-recovery-codes
Display and manage two-factor authentication recovery codes.
Auth Reset Password
auth-reset-password
Reset password with strength indicator and token validation.
Auth Session Manager
auth-session-manager
Manage active sessions across devices with revoke functionality.
Auth Signup Form
auth-signup-form
User registration form with email/password and social signup options.
Auth Social Accounts
auth-social-accounts
Manage connected social accounts for authentication.
Auth Two Factor Setup
auth-two-factor-setup
Set up two-factor authentication with QR code and backup codes.
Auth Two Factor Verify
auth-two-factor-verify
Verify two-factor authentication code or recovery code.
Auth Verify Email
auth-verify-email
Email verification status with resend functionality.
Avatar
avatar
Shows an image or initials for a user/object.
Badge
badge
Small badge for counts or indicators.
Billing Billing History
billing-billing-history
Display transaction history with search, filters, and pagination.
Billing Coupon Code
billing-coupon-code
Apply and manage discount coupon codes.
Billing Invoice Details
billing-invoice-details
Detailed invoice view in a sheet with line items and payment information.
Billing Invoice List
billing-invoice-list
List of invoices with search, filters, and pagination.
Billing Payment Failed
billing-payment-failed
Display payment failure details with retry and support options.
Billing Payment Form
billing-payment-form
Form to add payment methods with card details and billing address.
Billing Payment Method
billing-payment-method
Manage payment methods with add, edit, delete, and set default options.
Billing Payment Schedule
billing-payment-schedule
View scheduled payments with next payment preview and retry options.
Billing Plan Selector
billing-plan-selector
Select subscription plans with monthly/annual billing toggle.
Billing Pricing Table
billing-pricing-table
Compare pricing plans in a table format with feature comparison.
Billing Subscription Card
billing-subscription-card
Display current subscription with usage, billing date, and management options.
Billing Subscription Settings
billing-subscription-settings
Manage subscription settings including pause, cancel, and billing period changes.
Billing Upgrade Prompt
billing-upgrade-prompt
Prompt users to upgrade their plan with feature highlights.
Billing Usage Alerts
billing-usage-alerts
Configure and manage usage alerts with notification channels.
Billing Usage Billing
billing-usage-billing
Display usage statistics with charts, breakdowns, and trend analysis.
Breadcrumb
breadcrumb
Displays navigation path as links.
Button
button
Clickable button for actions.
Button Group
button-group
Groups multiple buttons in a row.
Calendar
calendar
Grid to display days and dates.
Card
card
Container with header, content, and footer sections.
Carousel
carousel
Rotates or slides multiple items.
Checkbox
checkbox
Box for selecting true or false.
Collapsible
collapsible
Panel that expands and collapses.
Command Menu
command-menu
Popup menu for running commands.
Context Menu
context-menu
Menu that appears on right-click or action.
Dialog
dialog
Modal overlay for dialogs and forms.
Drawer
drawer
Drawer panel that slides in from edge.
Dropdown Menu
dropdown-menu
Menu that opens with a trigger control.
Empty
empty
Graphic placeholder for empty states.
Field
field
Field layout with label and help.
Hover Card
hover-card
Card that appears on hover.
Input
input
Single-line text input.
Input Group
input-group
Combines inputs and add-ons in a row.
Input OTP
input-otp
Inputs for one-time code entry.
Item
item
List item component with actions.
Kbd
kbd
Renders keyboard key appearance.
Label
label
Label for form input.
Menubar
menubar
Horizontal menu bar for navigation.
Native Select
native-select
Dropdown using the native select element.
Navigation Menu
navigation-menu
A collection of links for navigating websites.
Pagination
pagination
Controls for paging through content.
Popover
popover
Floating panel for additional content.
Progress
progress
Linear progress indicator.
Project List
project-list
Display and manage projects with progress tracking, member avatars, and task counts.
Radio Group
radio-group
Group of choices where only one can be selected.
Resizable
resizable
Container that users can resize.
Scroll Area
scroll-area
Scrollable area for overflowing content.
Select
select
Custom dropdown select input.
Separator
separator
Horizontal or vertical dividing line.
Settings Account
settings-account
Manage account settings, subscription, and team members.
Settings Activity Log
settings-activity-log
View account activity and audit trail with search and filters.
Settings Advanced
settings-advanced
Developer tools and experimental features configuration.
Settings API Keys
settings-api-keys
Manage API keys for programmatic access with scopes and permissions.
Settings Backup
settings-backup
Manage automatic backups and restore your data.
Settings Domains
settings-domains
Manage custom domains and SSL certificates.
Settings Export Data
settings-export-data
Export your data in various formats with category selection.
Settings Import Data
settings-import-data
Import data from JSON or CSV files with conflict resolution.
Settings Integrations
settings-integrations
Connect and manage third-party integrations.
Settings Notifications
settings-notifications
Manage notification preferences and quiet hours.
Settings Preferences
settings-preferences
Customize app experience, appearance, and accessibility.
Settings Privacy
settings-privacy
Control privacy settings and data sharing preferences.
Settings Profile
settings-profile
Manage profile information, avatar, and social links.
Settings Security
settings-security
Manage account security, 2FA, and active sessions.
Settings SSO
settings-sso
Configure SSO providers for your organization.
Settings Storage
settings-storage
Manage storage usage and quotas by category.
Settings Team Members
settings-team-members
Manage team members, roles, and invitations.
Settings Webhooks
settings-webhooks
Configure webhooks for event notifications and deliveries.
Sheet
sheet
Drawer panel that slides in from edge.
Sidebar
sidebar
A collapsible sidebar component for navigation.
Skeleton
skeleton
Shimmer effect placeholder preview.
Slider
slider
Draggable control for selecting a value.
Sonner
sonner
Displays toast notifications.
Spinner
spinner
Circular activity indicator.
Switch
switch
Toggle to switch between states.
Table
table
Displays data in rows and columns.
Tabs
tabs
Switches views using tabbed buttons.
Task Board
task-board
Kanban-style board for managing tasks with drag-and-drop functionality.
Task Create
task-create
Form to create new tasks with all necessary fields including assignees, projects, and due dates.
Task Detail
task-detail
Detailed view of a task with subtasks, comments, attachments, and activity log. Includes URL-synced tabs.
Task Filters
task-filters
Filter and search tasks by status, priority, assignees, projects, and tags with active filter badges.
Task List
task-list
List view of tasks with sorting, filtering, bulk selection, and inline status updates.
Task Progress
task-progress
Visual progress indicator for task completion goals with percentage and count display.
Team Activity Feed
team-activity-feed
Display team activity and events in a feed with filtering.
Team AI Room
team-ai-room
Collaborative AI workspace for team members with shared conversations.
Team Analytics
team-analytics
View team analytics and usage statistics with charts and breakdowns.
Team Chat
team-chat
Team chat interface with messages and channels.
Team Dashboard
team-dashboard
Team dashboard with overview and metrics.
Team Files
team-files
Manage and share team files with upload and download.
Team Invitations
team-invitations
Send and manage team invitations with email and link options.
Team Member List
team-member-list
List and manage team members with roles and permissions.
Team Notes
team-notes
Collaborative notes and documentation with AI summarization.
Team Notifications
team-notifications
Team notifications and alerts with filtering and management.
Team Permissions Matrix
team-permissions-matrix
Manage team permissions and roles with visual matrix.
Team Projects
team-projects
Manage team projects and tasks with member assignment.
Team Prompt Library
team-prompt-library
Shared prompt library for the team with favorites and categories.
Team Settings
team-settings
Team settings and configuration with avatar upload.
Team Switcher
team-switcher
Switch between teams and workspaces with search.
Textarea
textarea
Multi-line text input.
Toggle
toggle
Pressable toggle button.
Toggle Group
toggle-group
Groups multiple toggle buttons.
Tooltip
tooltip
Shows info on hover or focus.
Tree
tree
Hierarchical collapsible structure.
Video Player
video-player
Video playback with controls.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Accordion
accordion
Expands to show or hide content.
AI Chat History
ai-chat-history
Display and manage conversation history with search and filtering.
AI Citations
ai-citations
Display citations and sources with collapsible source previews.
AI Conversation
ai-conversation
Display AI conversation messages with streaming support.
AI Error Handler
ai-error-handler
Display and handle AI errors with retry functionality.
AI File Upload
ai-file-upload
Upload files for AI analysis with drag and drop support.
AI Message
ai-message
Display AI messages with markdown support and code highlighting.
AI Model Selector
ai-model-selector
Select AI models from different providers with search.
AI Prompt Input
ai-prompt-input
Input component for AI prompts with context selection and options.
AI Prompt Templates
ai-prompt-templates
Browse and use pre-built prompt templates with variables.
AI Settings Panel
ai-settings-panel
Configure AI model parameters and behavior settings.
AI Streaming Response
ai-streaming-response
Display streaming AI responses with token-by-token animation.
AI Suggested Prompts
ai-suggested-prompts
Display suggested prompts with categories and search.
AI Thinking
ai-thinking
Display AI thinking process with animated scrolling content.
AI Usage Quota
ai-usage-quota
Display AI usage statistics, rate limits, and quota information.
Alert
alert
Displays a status or message banner.
Alert Dialog
alert-dialog
Modal dialog for important actions or decisions.
Aspect Ratio
aspect-ratio
Maintains a fixed ratio for child content.
Auth Account Delete
auth-account-delete
Delete account with password confirmation and data loss acknowledgment.
Auth Change Password
auth-change-password
Change password with current and new password fields.
Auth Email Change
auth-email-change
Change email address with password verification.
Auth Forgot Password
auth-forgot-password
Request password reset link via email.
Auth Login Form
auth-login-form
Login form with email/password and social login options.
Auth Magic Link
auth-magic-link
Passwordless authentication via magic link email.
Auth OTP Verify
auth-otp-verify
Verify OTP code sent via email, SMS, or WhatsApp.
Auth Phone Verify
auth-phone-verify
Verify phone number with OTP code via SMS.
Auth Recovery Codes
auth-recovery-codes
Display and manage two-factor authentication recovery codes.
Auth Reset Password
auth-reset-password
Reset password with strength indicator and token validation.
Auth Session Manager
auth-session-manager
Manage active sessions across devices with revoke functionality.
Auth Signup Form
auth-signup-form
User registration form with email/password and social signup options.
Auth Social Accounts
auth-social-accounts
Manage connected social accounts for authentication.
Auth Two Factor Setup
auth-two-factor-setup
Set up two-factor authentication with QR code and backup codes.
Auth Two Factor Verify
auth-two-factor-verify
Verify two-factor authentication code or recovery code.
Auth Verify Email
auth-verify-email
Email verification status with resend functionality.
Avatar
avatar
Shows an image or initials for a user/object.
Badge
badge
Small badge for counts or indicators.
Billing Billing History
billing-billing-history
Display transaction history with search, filters, and pagination.
Billing Coupon Code
billing-coupon-code
Apply and manage discount coupon codes.
Billing Invoice Details
billing-invoice-details
Detailed invoice view in a sheet with line items and payment information.
Billing Invoice List
billing-invoice-list
List of invoices with search, filters, and pagination.
Billing Payment Failed
billing-payment-failed
Display payment failure details with retry and support options.
Billing Payment Form
billing-payment-form
Form to add payment methods with card details and billing address.
Billing Payment Method
billing-payment-method
Manage payment methods with add, edit, delete, and set default options.
Billing Payment Schedule
billing-payment-schedule
View scheduled payments with next payment preview and retry options.
Billing Plan Selector
billing-plan-selector
Select subscription plans with monthly/annual billing toggle.
Billing Pricing Table
billing-pricing-table
Compare pricing plans in a table format with feature comparison.
Billing Subscription Card
billing-subscription-card
Display current subscription with usage, billing date, and management options.
Billing Subscription Settings
billing-subscription-settings
Manage subscription settings including pause, cancel, and billing period changes.
Billing Upgrade Prompt
billing-upgrade-prompt
Prompt users to upgrade their plan with feature highlights.
Billing Usage Alerts
billing-usage-alerts
Configure and manage usage alerts with notification channels.
Billing Usage Billing
billing-usage-billing
Display usage statistics with charts, breakdowns, and trend analysis.
Breadcrumb
breadcrumb
Displays navigation path as links.
Button
button
Clickable button for actions.
Button Group
button-group
Groups multiple buttons in a row.
Calendar
calendar
Grid to display days and dates.
Card
card
Container with header, content, and footer sections.
Carousel
carousel
Rotates or slides multiple items.
Checkbox
checkbox
Box for selecting true or false.
Collapsible
collapsible
Panel that expands and collapses.
Command Menu
command-menu
Popup menu for running commands.
Context Menu
context-menu
Menu that appears on right-click or action.
Dialog
dialog
Modal overlay for dialogs and forms.
Drawer
drawer
Drawer panel that slides in from edge.
Dropdown Menu
dropdown-menu
Menu that opens with a trigger control.
Empty
empty
Graphic placeholder for empty states.
Field
field
Field layout with label and help.
Hover Card
hover-card
Card that appears on hover.
Input
input
Single-line text input.
Input Group
input-group
Combines inputs and add-ons in a row.
Input OTP
input-otp
Inputs for one-time code entry.
Item
item
List item component with actions.
Kbd
kbd
Renders keyboard key appearance.
Label
label
Label for form input.
Menubar
menubar
Horizontal menu bar for navigation.
Native Select
native-select
Dropdown using the native select element.
Navigation Menu
navigation-menu
A collection of links for navigating websites.
Pagination
pagination
Controls for paging through content.
Popover
popover
Floating panel for additional content.
Progress
progress
Linear progress indicator.
Project List
project-list
Display and manage projects with progress tracking, member avatars, and task counts.
Radio Group
radio-group
Group of choices where only one can be selected.
Resizable
resizable
Container that users can resize.
Scroll Area
scroll-area
Scrollable area for overflowing content.
Select
select
Custom dropdown select input.
Separator
separator
Horizontal or vertical dividing line.
Settings Account
settings-account
Manage account settings, subscription, and team members.
Settings Activity Log
settings-activity-log
View account activity and audit trail with search and filters.
Settings Advanced
settings-advanced
Developer tools and experimental features configuration.
Settings API Keys
settings-api-keys
Manage API keys for programmatic access with scopes and permissions.
Settings Backup
settings-backup
Manage automatic backups and restore your data.
Settings Domains
settings-domains
Manage custom domains and SSL certificates.
Settings Export Data
settings-export-data
Export your data in various formats with category selection.
Settings Import Data
settings-import-data
Import data from JSON or CSV files with conflict resolution.
Settings Integrations
settings-integrations
Connect and manage third-party integrations.
Settings Notifications
settings-notifications
Manage notification preferences and quiet hours.
Settings Preferences
settings-preferences
Customize app experience, appearance, and accessibility.
Settings Privacy
settings-privacy
Control privacy settings and data sharing preferences.
Settings Profile
settings-profile
Manage profile information, avatar, and social links.
Settings Security
settings-security
Manage account security, 2FA, and active sessions.
Settings SSO
settings-sso
Configure SSO providers for your organization.
Settings Storage
settings-storage
Manage storage usage and quotas by category.
Settings Team Members
settings-team-members
Manage team members, roles, and invitations.
Settings Webhooks
settings-webhooks
Configure webhooks for event notifications and deliveries.
Sheet
sheet
Drawer panel that slides in from edge.
Sidebar
sidebar
A collapsible sidebar component for navigation.
Skeleton
skeleton
Shimmer effect placeholder preview.
Slider
slider
Draggable control for selecting a value.
Sonner
sonner
Displays toast notifications.
Spinner
spinner
Circular activity indicator.
Switch
switch
Toggle to switch between states.
Table
table
Displays data in rows and columns.
Tabs
tabs
Switches views using tabbed buttons.
Task Board
task-board
Kanban-style board for managing tasks with drag-and-drop functionality.
Task Create
task-create
Form to create new tasks with all necessary fields including assignees, projects, and due dates.
Task Detail
task-detail
Detailed view of a task with subtasks, comments, attachments, and activity log. Includes URL-synced tabs.
Task Filters
task-filters
Filter and search tasks by status, priority, assignees, projects, and tags with active filter badges.
Task List
task-list
List view of tasks with sorting, filtering, bulk selection, and inline status updates.
Task Progress
task-progress
Visual progress indicator for task completion goals with percentage and count display.
Team Activity Feed
team-activity-feed
Display team activity and events in a feed with filtering.
Team AI Room
team-ai-room
Collaborative AI workspace for team members with shared conversations.
Team Analytics
team-analytics
View team analytics and usage statistics with charts and breakdowns.
Team Chat
team-chat
Team chat interface with messages and channels.
Team Dashboard
team-dashboard
Team dashboard with overview and metrics.
Team Files
team-files
Manage and share team files with upload and download.
Team Invitations
team-invitations
Send and manage team invitations with email and link options.
Team Member List
team-member-list
List and manage team members with roles and permissions.
Team Notes
team-notes
Collaborative notes and documentation with AI summarization.
Team Notifications
team-notifications
Team notifications and alerts with filtering and management.
Team Permissions Matrix
team-permissions-matrix
Manage team permissions and roles with visual matrix.
Team Projects
team-projects
Manage team projects and tasks with member assignment.
Team Prompt Library
team-prompt-library
Shared prompt library for the team with favorites and categories.
Team Settings
team-settings
Team settings and configuration with avatar upload.
Team Switcher
team-switcher
Switch between teams and workspaces with search.
Textarea
textarea
Multi-line text input.
Toggle
toggle
Pressable toggle button.
Toggle Group
toggle-group
Groups multiple toggle buttons.
Tooltip
tooltip
Shows info on hover or focus.
Tree
tree
Hierarchical collapsible structure.
Video Player
video-player
Video playback with controls.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information