Base Components

Skip months of design and development work. HextaUI provides a complete set of base components that you can copy, adapt, and personalize for your Next.js projects. These components are designed to be flexible, customizable, and easy to integrate into your applications.

What Are Base Components?

Base components are the fundamental building blocks of your user interface. They include essential elements like buttons, inputs, modals, and more. HextaUI's base components are designed to be:

• Modular: Each component is self-contained, allowing you to use only what you need.
• Customizable: Easily change styles, colors, and behaviors to fit your design requirements.
• Responsive: Built with modern design principles, ensuring they look great on all devices.
• Accessible: Designed with accessibility in mind, following best practices to ensure all users can interact with your application.

Ready to Use

Each component in HextaUI comes with a live example and code snippet that you can copy directly into your project. This means you can get started quickly without having to build everything from scratch.

• Styling components - Tailwind CSS
• TypeScript support - TypeScript
• Built in accessibility features - WAI-ARIA
• Responsive design - CSS Media Queries

Next steps

Explore the base components available in HextaUI and see how they can fit into your Next.js projects. Each component is designed to be easy to use and customize, so you can focus on building your application without worrying about the underlying UI.

Start by checking out the Avatar component or checkout entire list of Components.

List of Base Components

• Accordion - A component for displaying collapsible content sections.
• Alert - A versatile component for displaying important messages, notifications, and status updates.
• Avatar - A component for displaying user profile images or icons.
• Badge - A small component for displaying status or notifications.
• Breadcrumb - A navigation component that shows the current page's location within a hierarchy.
• Button - A clickable button component with various styles and states.
• Calendar - A component for selecting dates and managing calendar events.
• Card - A flexible container for displaying content in a card format.
• Checkbox - A component for selecting one or more options from a set.
• Chip - A small component for displaying tags or categories.
• Color Picker - A component for selecting colors.
• Command Menu - A component for executing commands or actions through a menu interface.
• Date Picker - A component for selecting dates with a calendar interface.
• Drawer - A sliding panel component for displaying additional content or options.
• Dropdown Menu - A menu component that displays a list of options when clicked.
• File Upload - A component for uploading files with drag-and-drop support.
• Input OTP - A component for entering one-time passwords.
• Input - A basic text input component for user input.
• Kbd - A component for displaying keyboard shortcuts.
• Label - A component for labeling form elements.
• Loader - A component for displaying loading indicators.
• Menubar - A horizontal menu component for navigation.
• Modal - A dialog component for displaying content in a modal window.
• Navigation Menu - A component for creating navigation menus with multiple levels.
• Pagination - A component for navigating through paginated content.
• Progress - A component for displaying progress bars.
• Radio - A component for selecting one option from a set.
• Resizable - A component for resizing elements interactively.
• Scroll Area - A component for creating scrollable areas with custom styles.
• Select - A dropdown component for selecting options from a list.
• Separator - A component for visually separating content.
• Sidebar - A component for navigation and quick access.
• Skeleton - A placeholder component for loading states.
• Slider - A component for selecting a value from a range.
• Switch - A toggle switch component for binary choices.
• Table - A component for displaying tabular data.
• Tabs - A component for organizing content into tabbed sections.
• Textarea - A multi-line text input component.
• Toast - A flexible toast notification component built on top of Sonner with customizable styling and comprehensive functionality.