---
name: "@opaline"
slug: "opaline"
description: "Liquid glass components for React — real backdrop refraction, Apple-inspired, minimal and premium. Docks, sheets, command palette, knobs and more."
category: "Forms"
tags: ["audio", "auth", "blocks", "buttons", "cards", "dashboard", "forms", "glassmorphism", "hooks", "navigation", "overlays", "retro", "theming"]
framework: "react"
license: "MIT"
author: "deepraj21"
website: "https://opaline.buildlab.in"
github: "https://github.com/deepraj21/opaline"
registry: "https://opaline.buildlab.in/r/registry.json"
pro: false
pro_url: null
github_stars: 3
component_count: 52
generated_at: "2026-10-10T06:32:55.998Z"
---

# @opaline

Liquid glass components for React — real backdrop refraction, Apple-inspired, minimal and premium. Docks, sheets, command palette, knobs and more.

## Links

- Website: https://opaline.buildlab.in
- GitHub: https://github.com/deepraj21/opaline
- Registry JSON: https://opaline.buildlab.in/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/opaline
- This file: https://sh4dcn.vercel.app/md/opaline.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://opaline.buildlab.in/r/registry.json
pnpm dlx shadcn@latest add https://opaline.buildlab.in/r/registry.json
bunx shadcn@latest add https://opaline.buildlab.in/r/registry.json
# clone the source repo
git clone https://github.com/deepraj21/opaline.git
# fetch the raw registry index
curl -s https://opaline.buildlab.in/r/registry.json
```

## Components (52)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | Minimal, premium design tokens — Apple system typography, neutral palette and glass materials for light and dark. | `npx shadcn@latest add https://opaline.buildlab.in/r/theme.json` |
| liquid-glass | registry:ui | The primitive behind every glass component. Refracts the backdrop through an SVG displacement map, with a frosted fallback. | `npx shadcn@latest add https://opaline.buildlab.in/r/liquid-glass.json` |
| use-active-indicator | registry:hook | Hook that tracks the active item's box to animate a selection bubble. | `npx shadcn@latest add https://opaline.buildlab.in/r/use-active-indicator.json` |
| glass-dock | registry:ui | macOS-style dock with smooth magnification and hover labels. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-dock.json` |
| glass-text | registry:ui | Headlines cast in liquid glass — every glyph is a bevelled lens with rim light and a travelling sheen. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-text.json` |
| glass-control-center | registry:ui | macOS-style Control Center kit — glass modules, toggles, light-filled sliders and buttons. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-control-center.json` |
| glass-segmented | registry:ui | Icon segmented picker whose glass bubble stretches like liquid as it travels. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-segmented.json` |
| glass-date-picker | registry:ui | Glass calendar with a gliding day bubble, and a capsule date picker. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-date-picker.json` |
| glass-stepper | registry:ui | Capsule stepper with rolling digits, hold-to-accelerate and a shake at the limits. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-stepper.json` |
| glass-context-menu | registry:ui | Right-click menu that springs from the cursor, with a row of round quick actions. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-context-menu.json` |
| glass-widget | registry:ui | iOS home-screen widget frame on liquid glass — small, medium and large. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-widget.json` |
| glass-widget-weather | registry:ui | Weather widget with animated condition art and an hourly forecast. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-widget-weather.json` |
| glass-widget-calendar | registry:ui | Calendar widget showing today, what's next and a month at a glance. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-widget-calendar.json` |
| glass-widget-battery | registry:ui | Batteries widget with device rings that fill, turn red when low and show charging. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-widget-battery.json` |
| glass-button | registry:ui | Pill button made of liquid glass with a pointer-tracked highlight. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-button.json` |
| glass-lens | registry:ui | Draggable magnifying lens that bends whatever is beneath it. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-lens.json` |
| glass-sidebar | registry:ui | Floating source list with a sliding glass selection and icon-only mode. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-sidebar.json` |
| glass-command | registry:ui | ⌘K command palette on a frosted glass sheet, powered by cmdk. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-command.json` |
| glass-player | registry:ui | Now-playing widget with scrubber, transport controls and volume. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-player.json` |
| glass-card | registry:ui | Frosted card surface with header, content and footer slots. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-card.json` |
| glass-knob | registry:ui | Rotary dial with a glass cap — drag around it or use the arrow keys. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-knob.json` |
| glass-clock | registry:ui | Analog clock on a liquid glass face with a sweeping second hand. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-clock.json` |
| glass-stack | registry:ui | A deck of glass cards — swipe the top one away to reveal the next. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-stack.json` |
| glass-switch | registry:ui | iOS switch whose thumb turns into a glass lens while pressed. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-switch.json` |
| glass-slider | registry:ui | Slider whose thumb becomes a refracting lens while dragging. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-slider.json` |
| glass-tabs | registry:ui | Segmented control with a glass bubble that glides between tabs. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-tabs.json` |
| glass-tab-bar | registry:ui | Floating iOS 26 tab bar with a sliding liquid selection. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-tab-bar.json` |
| glass-sheet | registry:ui | Floating side sheet, or a drag-to-dismiss bottom drawer with side="bottom". | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-sheet.json` |
| glass-toast | registry:ui | Imperative toasts on glass that stack into a deck, fan out on hover and swipe away. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-toast.json` |
| glass-popover | registry:ui | Rich popover content on a frosted glass surface. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-popover.json` |
| glass-select | registry:ui | Capsule select with a frosted glass option list. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-select.json` |
| glass-menu | registry:ui | Dropdown menu rendered on liquid glass. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-menu.json` |
| glass-dialog | registry:ui | Modal on a frosted glass sheet with springy transform-only motion. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-dialog.json` |
| glass-notification | registry:ui | iOS notification banner plus a stack that fans out on hover. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-notification.json` |
| glass-input | registry:ui | Capsule text field with icon and adornment slots — made for search. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-input.json` |
| glass-toolbar | registry:ui | Floating capsule toolbar that groups icon actions. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-toolbar.json` |
| glass-tooltip | registry:ui | Capsule tooltip that springs out of its trigger. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-tooltip.json` |
| glass-badge | registry:ui | Small glass chip with an optional glowing status dot. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-badge.json` |
| glass-otp | registry:ui | One-time code cells on glass with a gliding lens, paste and SMS autofill, and success / error states. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-otp.json` |
| glass-alert | registry:ui | A callout on frosted glass, tinted by intent: info, success, warning or destructive. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-alert.json` |
| glass-textarea | registry:ui | A multi-line field on glass that grows with its content, with a counter and a footer slot. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-textarea.json` |
| glass-message | registry:ui | Chat bubbles on glass: tinted for you, clear for them, with avatars, meta and a typing indicator. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-message.json` |
| glass-snippet | registry:ui | A command on a glass capsule with copy, and tabs for npm, pnpm, yarn and bun. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-snippet.json` |
| glass-code-block | registry:ui | Syntax-highlighted code in a glass window, with tabs, line numbers, highlighted lines and copy. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-code-block.json` |
| glass-terminal | registry:ui | A macOS terminal on glass whose commands type themselves out, line by line, when scrolled into view. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-terminal.json` |
| glass-accordion | registry:ui | Collapsible sections on one glass panel, or as separate glass cards that grow open. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-accordion.json` |
| glass-bento-grid | registry:ui | Feature tiles on glass in a bento layout, with a pointer light and a call to action that slides in. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-bento-grid.json` |
| glass-tweet-card | registry:ui | A post from X on glass, loaded live with react-tweet by id, with a fallback when it can't be fetched. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-tweet-card.json` |
| glass-credit-card | registry:ui | A glass payment card that tilts to the pointer, flips to its back and detects the brand. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-credit-card.json` |
| glass-qrcode | registry:ui | A scannable QR code printed on a glass tile, with soft finders, a glass logo lens and an optional magnifier. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-qrcode.json` |
| glass-scroll-stack | registry:ui | Glass cards that pin and pile up as you scroll, shrinking as new cards land on them. | `npx shadcn@latest add https://opaline.buildlab.in/r/glass-scroll-stack.json` |
| all | registry:item | The Opaline theme and every component in one install. | `npx shadcn@latest add https://opaline.buildlab.in/r/all.json` |

## For AI agents

```text
You are adding components from @opaline to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/opaline.md) for the component list.
2. Fetch the machine-readable index: https://opaline.buildlab.in/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: opaline).
```