Components

Browse our collection of 55 beautiful, glassy UI components.

Button variants

Semantic variants on Button: behavior styles, each riding its default surface.

Button materials

The five materials via the material prop, plus the gradient axis layering the theme-aware brand gradient over the material.

Gradient intensity, over each glass type

The theme-aware --gradient (follows the foreground hue, the tint hue unless a fresco decouples it) overlaid on each surface at three strengths. Medium is the winner: it's the glass-gradient accent class, which the gradient prop layers over any material. Note how Bold hides the surface (all types converge) while Subtle keeps each glass texture.

SubtleMediumBoldglassfrostedcrystalchakraopaque

Gradient axes + direction

The brand gradient re-aimed along each ramp axis: the real hue / chroma / lightness / tonal ramps from lib/oklch-utils, forward and reversed. All follow the current tint hue; flip the tint up top to watch them shift.

forwardreversehue

chroma

lightness

tonal

Glow

The Button's effect="glow" (and the glow prop on cards, badges, avatars…) casts a colored shadow from --glass-glow, whose hue follows the active tint, so it recolors per theme. Off on the left, on across four tints. Hover any to watch it intensify.

none

sapphire

sistine

aventurine

rose

Hover effects

Every glass component takes an effect (or hover) prop backed by the shared hoverEffects variants. Hover each to see it.

glow

shimmer

ripple

lift

scale

A vertically stacked set of interactive headings that each reveal a section of content.

Displays a callout for user attention with optional glass material.

A modal dialog that interrupts the user with important content and expects a response.

Auto Foreground

Sets --foreground / --muted-foreground from an OKLCH ramp so text contrast tracks light/dark automatically. Configure declaratively via props (palette, start, ramp) or a persisted config; re-applies on theme change.

An image element with a fallback for representing the user.

Displays a badge or a component that looks like a badge, with the glass material system.

Displays the path to the current resource using a hierarchy of links.

Displays a button or a component that looks like a button, with the glass material system.

A group of buttons, with the glass material system.

A date field component that allows users to enter and edit date.

Canvas Background

Full-screen animated canvas background that recolors with the live glass tint — gradient, lava, or circle styles driven by the OKLCH ramps.

Displays a card with optional glass material.

An items-driven carousel, with the glass material system — pass slides as children (no compound CarouselContent/Item/Next/Previous/API parts).

Chart components built with Recharts with optional glass material.

A control that allows the user to toggle between checked and not checked with optional glass material.

An interactive component which expands/collapses a panel.

Fast, composable, unstyled command menu for React.

A context menu component, with the glass material system.

An image cropper component with optional glass material.

Date Picker Input

A date picker input component, with the glass material system.

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

A drawer component for mobile with optional glass material.

Displays a menu to the user — such as a set of actions or functions — triggered by a button with optional glass material.

An empty state component, with the glass material system.

Gradient Background

A ramp-driven gradient wallpaper that recolors with the live glass tint, and lays a fresco preset (sistine/muse/aurora/gloaming) multi-hue palette across the gradient. Pure CSS, crisp at any DPI.

Fills text with a gradient via background-clip. Defaults to the theme's --gradient-text (follows the live glass tint) and falls back to a fixed brand gradient standalone.

For sighted users to preview content available behind a link.

Displays a form input field with optional glass material.

A group of inputs, with the glass material system.

Accessible one-time password component with copy paste functionality.

Renders an accessible label associated with controls.

A menu bar component, with the glass material system.

A theme switcher component with optional glass material. Requires a next-themes ThemeProvider (uses useTheme) — wrap your app or swap in your own theme store.

Navigation Menu

A collection of links for navigating websites.

Pagination with page navigation with optional glass material.

Displays rich content in a portal, triggered by a button with optional glass material.

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 glass material.

APCA contrast guard: renders text in an accent color while it stays readable on the current glass surface, and swaps to a readable foreground otherwise. Reactive to the live glass tint and light/dark.

Resizable panel groups and handles with a glassy grip, built on react-resizable-panels.

Augments native scroll functionality for custom, cross-browser styling.

Displays a list of options for the user to pick from—triggered by a button with optional glass material.

Visually or semantically separates content with optional glass material.

Extends the Dialog component to display content that complements the main content of the screen.

A sidebar component with optional glass material.

Use to show a placeholder while content is loading with optional glass material.

An input where the user selects a value from within a given range.

An opinionated toast component for React.

A loading spinner component, with the glass material system.

A control that allows the user to toggle between checked and not checked with optional glass material.

A responsive table, with the glass material system and optional striped (alternating-brightness) or bordered rows.

A set of layered sections of content—known as tab panels—that are displayed one at a time with optional glass material.

Displays a form textarea with optional glass material.

A two-state button that can be either on or off.

A set of two-state buttons that can be toggled on or off.

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it with optional glass material.