@opaline
Liquid glass components for React — real backdrop refraction, Apple-inspired, minimal and premium. Docks, sheets, command palette, knobs and more.
Install this registry
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 curl -s https://opaline.buildlab.in/r/registry.json Components
52 totalMinimal, 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 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 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 macOS-style dock with smooth magnification and hover labels.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-dock.json 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 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 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 calendar with a gliding day bubble, and a capsule date picker.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-date-picker.json 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 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 iOS home-screen widget frame on liquid glass — small, medium and large.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-widget.json Weather widget with animated condition art and an hourly forecast.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-widget-weather.json 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 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 Pill button made of liquid glass with a pointer-tracked highlight.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-button.json Draggable magnifying lens that bends whatever is beneath it.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-lens.json Floating source list with a sliding glass selection and icon-only mode.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-sidebar.json ⌘K command palette on a frosted glass sheet, powered by cmdk.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-command.json Now-playing widget with scrubber, transport controls and volume.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-player.json Frosted card surface with header, content and footer slots.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-card.json 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 Analog clock on a liquid glass face with a sweeping second hand.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-clock.json 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 iOS switch whose thumb turns into a glass lens while pressed.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-switch.json Slider whose thumb becomes a refracting lens while dragging.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-slider.json Segmented control with a glass bubble that glides between tabs.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-tabs.json Floating iOS 26 tab bar with a sliding liquid selection.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-tab-bar.json 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 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 Rich popover content on a frosted glass surface.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-popover.json Capsule select with a frosted glass option list.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-select.json Dropdown menu rendered on liquid glass.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-menu.json Modal on a frosted glass sheet with springy transform-only motion.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-dialog.json iOS notification banner plus a stack that fans out on hover.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-notification.json Capsule text field with icon and adornment slots — made for search.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-input.json Floating capsule toolbar that groups icon actions.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-toolbar.json Capsule tooltip that springs out of its trigger.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-tooltip.json Small glass chip with an optional glowing status dot.
npx shadcn@latest add https://opaline.buildlab.in/r/glass-badge.json 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 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 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 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 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 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 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 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 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 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 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 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 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 The Opaline theme and every component in one install.
npx shadcn@latest add https://opaline.buildlab.in/r/all.json