# Glassy UI

> Liquid Glass components for React. 34 accessible components that bend what sits behind them, installed with the shadcn CLI as source you own. Free, MIT licensed, with a portfolio starter.

Glassy UI ships as a shadcn-compatible registry: no package to update, every file lands in your repo. It needs Tailwind CSS 4 and a project initialised with shadcn. Add this mapping to `components.json`, then install any component with `pnpm dlx shadcn@4.14.1 add @glassyui/<name>`:

```json
{
  "registries": {
    "@glassyui": "https://glassyui.com/r/{name}.json"
  }
}
```

## Docs

- [Getting started](https://glassyui.com/docs): Set up the registry and add a component
- [All components](https://glassyui.com/components): Every component with a live demo
- [Templates](https://glassyui.com/templates): A free portfolio starter
- [Add Liquid Glass to a React app with shadcn](https://glassyui.com/guides/shadcn): Install a glass component, reproduce a complete demo, and customize the source in your own React app.
- [Build a liquid-glass portfolio in React](https://glassyui.com/guides/portfolio): Install the free portfolio starter, add your own projects, and make its navigation and contact links yours.
- [Build a laptop mockup in React](https://glassyui.com/guides/laptop-mockup): Use Glass Laptop for a React mockup modeled on a MacBook Pro laptop. Add a screenshot or live screen, animate the lid, and choose black or silver.
- [Use glass effects without losing readability](https://glassyui.com/guides/glass-accessibility): Choose the right glass effect, understand the browser requirements, and preserve motion and transparency preferences.

## Core

- [Glass Provider](https://glassyui.com/components/glass-provider): Sets the theme and the accessibility preferences every glass component follows.

## Surfaces

- [Glass Surface](https://glassyui.com/components/glass-surface): The glass material on its own: frost, rim light and refraction for your own components.
- [Glass Panel](https://glassyui.com/components/glass-panel): Glass cards, panels and pills for anything that floats above your content.
- [Glass Avatar](https://glassyui.com/components/glass-avatar): A round photo that falls back to coloured initials, with a presence dot and stacked groups.
- [Glass Kbd](https://glassyui.com/components/glass-kbd): A keycap with a lit top edge, for shortcuts in menus, hints and docs.

## Controls

- [Glass Button](https://glassyui.com/components/glass-button): A slab of glass resting just above the page that sets down when pressed and lights up where you press.
- [Glass Input](https://glassyui.com/components/glass-input): A recessed glass text field with a label and an optional hint.
- [Glass Checkbox](https://glassyui.com/components/glass-checkbox): A glass checkbox whose mark draws itself in and out, with an indeterminate state.
- [Glass Radio Group](https://glassyui.com/components/glass-radio-group): Options where exactly one is chosen, with a dot that pops in and shrinks away.
- [Glass Textarea](https://glassyui.com/components/glass-textarea): A recessed glass field for longer text that can grow as you type.
- [Glass Select](https://glassyui.com/components/glass-select): A recessed trigger that opens a slab of glass to choose from.
- [Glass Switch](https://glassyui.com/components/glass-switch): An on/off switch whose knob turns to glass and stretches as it slides.
- [Glass Slider](https://glassyui.com/components/glass-slider): A slider whose glass thumb stretches with your drag, for one value or a range.
- [Glass Segmented Control](https://glassyui.com/components/glass-segmented-control): A single-choice control whose glass bubble stretches between options and can be dragged.

## Overlays

- [Glass Dialog](https://glassyui.com/components/glass-dialog): A modal on raised glass that holds focus until it closes.
- [Glass Popover](https://glassyui.com/components/glass-popover): Floating glass content anchored to the control that opens it.
- [Glass Sheet](https://glassyui.com/components/glass-sheet): A glass panel that slides in from an edge. Bottom sheets drag down to dismiss.
- [Glass Menu](https://glassyui.com/components/glass-menu): A dropdown menu on glass with shortcuts, checkbox and radio items, and submenus.
- [Glass Command](https://glassyui.com/components/glass-command): A searchable command list that filters as you type, alone or in a launcher dialog.

## Navigation

- [Glass Tabs](https://glassyui.com/components/glass-tabs): Tabs whose glass bubble stretches like a drop on its way to the selected tab.
- [Glass Accordion](https://glassyui.com/components/glass-accordion): Sections that expand and collapse on glass, one at a time or several.
- [Glass Dock](https://glassyui.com/components/glass-dock): A row of app icons on a glass shelf that name themselves on hover.
- [Glass Breadcrumb](https://glassyui.com/components/glass-breadcrumb): The trail to the current page, with links that lift on hover and folded steps in a menu.
- [Glass Pagination](https://glassyui.com/components/glass-pagination): Numbered pages with previous and next, folding long runs into an ellipsis.

## Feedback

- [Glass Tooltip](https://glassyui.com/components/glass-tooltip): A small glass label that appears on hover and keyboard focus.
- [Glass Toast](https://glassyui.com/components/glass-toast): A glass notification for brief updates, announced to screen readers.
- [Glass Badge](https://glassyui.com/components/glass-badge): A small tinted glass label for status, counts and categories.
- [Glass Progress](https://glassyui.com/components/glass-progress): A glass track with a fill that slides to its value, or sweeps when the length is unknown.
- [Glass Spinner](https://glassyui.com/components/glass-spinner): A ring with a fading tail, for waiting on something short.
- [Glass Skeleton](https://glassyui.com/components/glass-skeleton): A quiet glass placeholder with a slow sheen, shaped like what will replace it.
- [Glass Alert](https://glassyui.com/components/glass-alert): A short message set in tinted glass, with four tones and an optional dismiss.

## Effects

- [Glass Lens](https://glassyui.com/components/glass-lens): A draggable magnifier whose glass rim bends the content beneath it.
- [Glass Scene](https://glassyui.com/components/glass-scene): Draws the glass inside it as real bevelled glass that bends its backdrop and melts together.
- [Glass Laptop](https://glassyui.com/components/glass-laptop): A CSS 3D laptop mockup whose lid opens onto your screenshot or React screen.

## Optional

- [Full documentation as one file](https://glassyui.com/llms-full.txt): Every component with install, usage and API
- [Registry index](https://glassyui.com/r/registry.json): The machine-readable list of everything installable
- [Source on GitHub](https://github.com/basedbuilder/glassyui.com): The repository
- [Changelog](https://github.com/basedbuilder/glassyui.com/blob/main/CHANGELOG.md): What changed, release by release