Primitives

Allows you to display content in collapsible panels, making it easy for users to explore details on demand while conserving screen space.

Displays a prominent message box for important notices, warnings, or success messages to keep users informed without interrupting their work.

Displays a modal window that asks users to confirm important actions before proceeding, helping prevent accidental deletions or irreversible mistakes.

Maintains a consistent width-to-height ratio for images, videos, and embeds, preventing layout shifts when pages load or resize.

Displays matching suggestions as users type into an input field, helping them find items quickly and reducing typing errors.

Displays user profile pictures, avatars, or fallback initials, giving users an easy way to identify people throughout the app.

Displays small colored label tags for status flags, counts, or categories, helping users quickly scan and spot key information.

Displays a horizontal trail of links showing the user’s current location within the page hierarchy, making navigation back to parent pages simple.

Allows users to trigger actions, submit forms, or navigate with a single click, providing clear visual feedback and hover effects.

Displays an interactive month grid that lets users browse dates, select individual days, or choose date ranges for scheduling.

Groups related information, images, and action buttons into a bordered container, creating clear visual sections on the page.

Allows users to turn a single option on or off, or select multiple items from a list with clear checkmarks and partial states.

Groups multiple related checkboxes together under a single control, making it easy for users to select one or several choices.

Hides extra content behind a simple toggle button, allowing users to expand and read details only when they need them.

Combines a text search input with a dropdown menu, allowing users to filter and select options from large lists easily.

Provides a searchable command menu that lets users navigate pages, find resources, and trigger shortcuts directly from their keyboard.

Opens a custom action menu right at the cursor position when users right-click or long-press an element on the screen.

Combines a date input box with a popup calendar, letting users pick dates or ranges without navigating away from the form.

Opens a focused popup window over the main page, allowing users to complete a dedicated task or view details without losing page context.

Slides an interactive panel in from the edge of the screen, giving users quick access to secondary tools, forms, or menus with swipe gestures.

Displays helpful placeholder messages, illustrations, and action buttons when there is no data to show, guiding users on what to do next.

Wraps input fields with clear text labels, helpful hints, and error messages to make filling out forms straightforward and accessible.

Groups related form controls together under a descriptive header, making long or complex forms easier to read and understand.

Manages form inputs, checks for validation errors, and handles form submission to ensure a smooth data entry experience.

Provides a mock browser or device container to showcase components and design previews in context.

Combines adjacent interactive elements into a seamless visual segment for a cleaner, unified toolbar layout.

Allows users to type single-line text, emails, passwords, or numbers, with clear focus outlines and validation feedback.

Attaches icons, prefix text, buttons, or dropdowns directly to an input field, creating compact, all-in-one form controls.

Displays keyboard shortcut keys in styled badges, showing users which keys to press to perform actions faster.

Provides an accessible text caption for form controls that focuses the corresponding input when clicked.

Allows users to navigate to other pages or external websites with clear hover underlines and accessible link styling.

Displays a floating dropdown menu of actions or options when users click a trigger button, keeping pages clean and organized.

Provides a horizontal desktop-style menu bar with nested dropdowns and submenus for organizing complex application commands.

Displays a visual gauge bar showing a quantity within a known range, such as battery level, disk capacity, or password strength.

Organizes primary website navigation into top-level links with rich dropdown preview cards for exploring main sections.

Allows users to enter numeric values or adjust them step-by-step using increment and decrement buttons or keyboard arrow keys.

Provides individual segmented character boxes for typing verification codes and one-time passwords, with automatic focus progression.

Splits long lists or tables across multiple pages, letting users browse content page by page using numbered buttons.

Opens a floating content box anchored to a button or icon, showing interactive settings, tools, or details right next to the trigger.

Displays an informative preview card when users hover over a link, giving them a summary of the linked page before clicking.

Displays an interactive card preview of a website with its thumbnail, title, and domain name when shared or hovered.

Displays an animated progress bar indicating how much of a task or file upload has completed so users know how long to wait.

Presents a list of options where users can select only one choice at a time, making mutually exclusive decisions clear.

A visual pattern for presenting related choices, navigation destinations, filters, or content views.

Replaces standard browser scrollbars with custom, theme-styled scrollbars that appear smoothly when scrolling.

Allows users to pick one or more options from a collapsible dropdown menu, keeping forms compact and easy to navigate.

Draws clean horizontal or vertical dividing lines between content blocks or tools to create clear visual separation.

Opens a slide-out panel from the edge of the screen, giving users space to edit settings or fill out forms without leaving the page.

Provides a collapsible side navigation bar that organizes app pages into sections, supporting both desktop and mobile layouts.

Displays animated placeholder shapes while content is loading, giving users immediate visual feedback and making apps feel faster.

Allows users to choose a numeric value or range smoothly by sliding a handle along a horizontal track with immediate visual feedback.

Displays an animated spinning ring while an action or page is loading, reassuring users that their request is being processed.

Allows users to toggle a single setting instantly between on and off, behaving just like a physical light switch.

Organizes structured records into clear rows and columns with column headers, hover highlights, and responsive layouts.

Splits content into switchable tabs on a single screen, allowing users to view different sections of related information without reloading the page.

Allows users to type multi-line text, comments, or long descriptions with support for auto-expanding height as they write.

Displays temporary popup notifications at the corner of the screen to confirm user actions, show progress, or report background updates.

Provides a two-state button that users can press to turn a specific feature, view, or styling option on and off.

Groups multiple toggleable buttons together so users can select single or multiple options, ideal for text styling toolbars.

Arranges formatting tools, action buttons, and dropdown controls into a compact, accessible toolbar for quick editing.

Displays a small floating text bubble when users hover over or focus on an element, explaining what that button or icon does.