Explore our comprehensive collection of shadcn/ui components, redesigned for Figma with developer precision.
An Accordion component for Figma, enabling users to toggle the visibility of content sections. It helps organize large amounts of information by collapsing sections to save space.
An AlertDialog component for Figma, a modal dialog that interrupts the user with important content and expects a response. This UI element is used for critical actions that require a response, such as a delete confirmation.
An Alert component for Figma, distinguishing important messages or feedback. It captures user attention to communicate success, warning, error, or informational states.
An Aspect Ratio component for Figma, maintaining consistent dimensions for images, videos, or other elements. It ensures responsive designs look polished across different screen sizes.
An Avatar component for Figma, used to represent user identities or entities with images, text initials, or icons. Essential for social interfaces, profiles, and listings.
A Badge component for Figma, used to highlight status, tags, or small counts. Badges provide visual cues for categories, notifications, or important attributes without cluttering the interface.
A Breadcrumb component for Figma, indicating the current page's location within a navigational hierarchy. It helps users understand site structure and navigate back to parent categories.
A Button component for Figma, enabling users to trigger actions or events, such as submitting a form, opening a dialog, or canceling an action. It supports multiple variants, sizes, and states for versatile UI design.
A Calendar component for Figma, facilitating date selection and scheduling. It supports single date picks, ranges, and various viewing modes for effective time management.
A Card component for Figma, serving as a flexible container to group related content and actions. Cards are essential for organizing information into digestible chunks, perfect for dashboards, profiles, and listings.
A Carousel component for Figma, allowing users to cycle through a series of content like images or cards. It maximizes content density in a limited space.
A Chart component for Figma, visualizing data through various graph types like line, bar, or pie charts. It helps users interpret complex information quickly and accurately.
A Checkbox component for Figma, enabling multiple selections from a list of options. It includes states for checked, unchecked, and indeterminate, crucial for forms, settings, and filters.
A Collapsible component for Figma, allowing interactive expansion and collapse of content sections. It helps manage detailed information without cluttering the initial view.
A Combobox component for Figma, combining a text input with a listbox, allowing users to filter and select options. It facilitates choice from large datasets.
A Command component for Figma, providing a fast, composable command menu for searching and performing actions. It acts as a powerful interface for power users.
A Context Menu component for Figma, displaying a menu of actions upon right-click or long-press. It offers contextual options relevant to the specific element interacted with.
A Data Table component for Figma, organizing large sets of data into rows and columns. It supports sorting, filtering, and pagination for efficient data analysis.
A Date Picker component for Figma, allowing users to select a date or range via a calendar interface. It ensures consistent date formatting and valid input.
A Dialog component for Figma, creating modal windows that capture user focus for critical tasks or information. It overlays the main content, preventing interaction with the background.
A Drawer component for Figma, a panel that slides out from the edge of the screen. It creates a dedicated space for navigation, details, or forms without leaving the current view.
A Dropdown Menu component for Figma, providing a list of actions or options triggered by a button. It efficiently conserves screen space while offering quick access to functionality.
A Form component for Figma, providing structure and validation for user inputs. It groups related controls for data collection and submission.
A Hover Card component for Figma, displaying a preview or summary of content when hovering over an element. It provides context without requiring a click.
An Input OTP component for Figma, designed specifically for entering one-time passwords or verification codes. It simplifies the input of segmented alphanumeric codes.
An Input component for Figma, allowing users to enter text data. This fundamental form element supports various types like text, password, email, and number, with states for focus, error, and disabled.
A Label component for Figma, providing accessible descriptions for form controls. Labels are crucial for usability and accessibility across all interface types.
A Menubar component for Figma, providing a horizontal menu bar commonly found in desktop applications. It organizes commands and options into hierarchical menus.
A Navigation Menu component for Figma, enabling responsive and accessible site navigation. It supports dropdowns, mega-menus, and links for effective user guidance.
A Pagination component for Figma, allowing navigation through large sets of data split across multiple pages. It provides controls for moving to the next, previous, first, or last page.
A Popover component for Figma, displaying rich content in a non-modal dialog triggered by a click. It's useful for showing additional details or controls without changing context.
A Progress component for Figma, visualizing the completion status of a task or operation. It provides immediate feedback to users, reducing uncertainty during wait times.
A Radio Group component for Figma, allowing users to select exactly one option from a set. It makes mutually exclusive choices clear and easy to interact with.
A Resizable component for Figma, enabling adjustable layouts where users can change the size of panels or sections. It empowers users to customize their workspace.
A Scroll Area component for Figma, creating a custom scrollable container. It ensures consistent cross-browser styling and behavior for scrolling content.
A Select component for Figma, allowing users to choose one option from a list. It acts as a compact alternative to radio buttons for longer lists of options.
A Separator component for Figma, used to visually or semantically separate content. It helps structure layouts and group related elements.
A Sheet component for Figma, extending the standard Dialog to slide in from the screen edges. It's often used for supplementary content or complex forms.
A Sidebar component for Figma, typically serving as the primary navigation area in dashboards. It holds links, user profile shortcuts, and app branding.
A Skeleton component for Figma, providing loading placeholders that mimic the shape of content. It reduces perceived load time by maintaining layout stability.
A Slider component for Figma, allowing users to select a value or range from a fixed set of options. It provides intuitive control for numeric inputs like volume or price.
A Sonner component for Figma, an opinionated toast component for React. It handles stacking, styling, and animations for transient notifications.
A Switch component for Figma, allowing immediate activation or deactivation of a setting. It mimics a physical toggle switch for clear on/off states.
A Table component for Figma, for responsive and semantic display of tabular data. It ensures data is easy to scan, compare, and analyze.
A Tabs component for Figma, organizing content into separate views where only one view is visible at a time. It saves space while keeping related content accessible.
A Textarea component for Figma, allowing for multi-line text input. It supports scalable height and validation states for capturing longer user feedback.
A Toast component for Figma, showing non-blocking notifications. It informs users of a process that an app has performed or will perform.
A Toggle Group component for Figma, a set of two-state buttons that can be toggled on or off. It supports single or multiple selections.
A Toggle component for Figma, a two-state button that can be either on or off. It mimics a physical latching push button.
A Tooltip component for Figma, displaying informative text when users hover over, focus on, or tap an element. It identifies an element or describes its function.
