Components

Twistail offers a collection of foundational UI components designed with accessibility, customization, and developer experience in mind. Each component is built to seamlessly integrate into your projects while maintaining consistent behavior across different environments.

Layout Components

Aspect Ratio - Maintains a consistent width-to-height ratio for content as it resizes.
Card - A flexible container for grouping related content and actions.
Collapsible - A component that can be expanded or collapsed to show or hide content.
Divider - A visual separator used to create a division between content sections.
Scroll Area - A custom scrollable container with cross-browser compatibility and customizable scrollbars.
Sidebar - A navigation component that is typically used to display a list of links or other content.
Split Pane - A resizable panel that divides content into two adjustable sections.
Table - A component for displaying structured data in rows and columns.

Display & Typography

Avatar - An image element with a fallback for representing the user.
Blockquote - A styled container for quoting content from another source, typically used for testimonials or citations.
Callout - A highlighted message that attracts attention to important information.
Description List - A component for displaying name-value pairs in a structured format.
Heading - A text element used for section titles with various importance levels.
Kbd - Represents keyboard input or keyboard shortcuts in documentation.
Text - A versatile typography component for displaying text with various styles and sizes.

Form Components

Button - An interactive element that triggers an action when clicked or pressed.
Calendar - A foundational date display component that serves as the basis for building date pickers, allowing users to navigate and select dates or date ranges.
Checkbox - A control that allows users to select multiple options from a set.
Combobox - A combination of a text input and a dropdown list for selecting from predefined options.
Datetime Picker - A component that allows users to select both date and time values through an intuitive interface, supporting various formats and time zones.
Form - Build forms with the Radix UI Form component, supports built-in validation and custom validation.
Input PIN - A specialized input for entering PIN codes or verification numbers.
Input - A form control that allows users to enter text data.
Label - A text descriptor for form elements that improves accessibility and usability.
Listbox - A custom select component that allows users to select item from a list of options.
Multi Select - A form control that allows users to select multiple options from a dropdown list.
Radio Card Group - A group of selectable card options where only one option can be selected at a time.
Radio Group - A set of radio buttons where users can select only one option from multiple choices.
Select - A vanilla select component with custom styling for a consistent look and feel.
Slider - An input control that allows users to select a value from a specified range by dragging a handle.
Switch - A toggle control that allows users to turn an option on or off, similar to a checkbox.
Textarea - A multi-line text input control that allows users to enter longer text content.
Toggle - A two-state button that can be either on or off, typically used for enabling/disabling features.

Breadcrumb - A navigation aid that helps users understand their location within a website hierarchy.
Command - A keyboard-centric interface for navigating and taking actions quickly.
Menubar - A horizontal navigation component typically found at the top of applications.
Navigation Menu - A hierarchical navigation component for complex site structures.
Pagination - A navigation system that helps users move through multiple pages of content.
Tab Navigation - A navigation component that organizes content into multiple tabs, showing one section at a time.
Tabs - A set of layered sections of content that display one panel at a time.

Disclosure Components

Accordion - A vertically stacked set of interactive headings that each reveal a section of content.
Alert Dialog - A modal dialog that interrupts the user with important content and expects a response.
Context Menu - A menu that appears upon user interaction, typically right-clicking, providing contextual actions.
Dialog - A modal window that appears in front of app content to provide critical information or request user input.
Drawer - A panel that slides in from the edge of the screen, typically containing navigation or supplementary content.
Dropdown Menu - A toggleable menu that displays a list of actions or options.
Hover Card - A card that appears when hovering over a trigger element to display additional information.
Popover - A floating element that displays contextual information or UI related to a trigger element.
Tooltip - A small informational popup that appears when users hover over or focus on an element.

Feedback Components

Badge - A small visual indicator for highlighting status, categories, or labels.
Skeleton - A placeholder UI used to indicate that content is loading, improving perceived performance.
Toast - A brief, non-intrusive notification that appears temporarily to provide feedback.

Data Visualization Components

Area Chart - A chart that displays quantitative data using a filled area below a line, useful for showing volume or cumulative values over time.
Bar Chart - A chart that presents categorical data with rectangular bars proportional to the values they represent.
Bar List - A component that combines a list with horizontal bars to visualize comparative values across categories.
Category Bar - A component for displaying categorized data with visual indicators of distribution or proportion.
Combo Chart - A hybrid chart that combines multiple chart types (like bar and line) to compare different data series with different scales.
Donut Chart - A circular chart with a hole in the center that shows the proportional composition of a dataset.
Line Chart - A chart that displays information as a series of data points connected by straight line segments.
Progress Bar - A visual indicator showing the completion progress of an operation or task.
Progress Circle - A circular progress indicator that visualizes completion percentage in a compact format.
Spark Chart - A small, simple, word-sized chart that shows the general trend of a measurement without axes or coordinates.
Tracker - A component that visualizes progress through a series of steps or stages in a process.