Components
Browse our collection of 49 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.
Button Group
NEW
Component
A group of buttons 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.
Carousel
NEW
Component
A carousel component with glassy variants.
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.
Context Menu
NEW
Component
A context menu component with glassy variants.
Cropper
Component
An image cropper component with optional glassy variant.
Date Picker Input
NEW
Component
A date picker input component with glassy variants.
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.
Empty State
NEW
Component
An empty state component with glassy variants.
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 Group
NEW
Component
A group of inputs with glassy variants.
Input OTP
Component
Accessible one-time password component with copy paste functionality.
Label
Component
Renders an accessible label associated with controls.
Menu Bar
NEW
Component
A menu bar component with glassy variants.
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.
Spinner
NEW
Component
A loading spinner component with glassy variants.
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.