Components
Browse our collection of 41 beautiful, glassy UI components
Accordion
Component
A vertically stacked set of interactive headings that each reveal a section of content.
Alert
Component
Displays a callout for user attention with optional glassy variant.
Alert Dialog
Component
A modal dialog that interrupts the user with important content and expects a response.
Avatar
Component
An image element with a fallback for representing the user.
Badge
Component
Displays a badge or a component that looks like a badge with glassy variant.
Breadcrumb
Component
Displays the path to the current resource using a hierarchy of links.
Button
Component
Displays a button or a component that looks like a button with glassy variants.
Calendar
Component
A date field component that allows users to enter and edit date.
Card
Component
Displays a card with optional glassy variant.
Chart
Component
Chart components built with Recharts with optional glassy variant.
Checkbox
Component
A control that allows the user to toggle between checked and not checked with optional glassy variant.
Collapsible
Component
An interactive component which expands/collapses a panel.
Command
Component
Fast, composable, unstyled command menu for React.
Cropper
Component
An image cropper component with optional glassy variant.
Dialog
Component
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Drawer
Component
A drawer component for mobile with optional glassy variant.
Dropdown Menu
Component
Displays a menu to the user — such as a set of actions or functions — triggered by a button with optional glassy variant.
Hover Card
Component
For sighted users to preview content available behind a link.
Input
Component
Displays a form input field with optional glassy variant.
Input OTP
Component
Accessible one-time password component with copy paste functionality.
Label
Component
Renders an accessible label associated with controls.
Mode Toggle
Component
A theme switcher component with optional glassy variant.
Navigation Menu
Component
A collection of links for navigating websites.
Pagination
Component
Pagination with page navigation with optional glassy variant.
Popover
Component
Displays rich content in a portal, triggered by a button with optional glassy variant.
Radio Group
Component
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time with optional glassy variant.
Scroll Area
Component
Augments native scroll functionality for custom, cross-browser styling.
Select
Component
Displays a list of options for the user to pick from—triggered by a button with optional glassy variant.
Separator
Component
Visually or semantically separates content with optional glassy variant.
Sheet
Component
Extends the Dialog component to display content that complements the main content of the screen.
Sidebar
Component
A sidebar component with optional glassy variant.
Skeleton
Component
Use to show a placeholder while content is loading with optional glassy variant.
Slider
Component
An input where the user selects a value from within a given range.
Sonner
Component
An opinionated toast component for React.
Switch
Component
A control that allows the user to toggle between checked and not checked with optional glassy variant.
Table
Component
A responsive table component with optional glassy variant.
Tabs
Component
A set of layered sections of content—known as tab panels—that are displayed one at a time with optional glassy variant.
Textarea
Component
Displays a form textarea with optional glassy variant.
Toggle
Component
A two-state button that can be either on or off.
Toggle Group
Component
A set of two-state buttons that can be toggled on or off.
Tooltip
Component
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it with optional glassy variant.