Dev Design Library

Opaline components

Interfaces that bend the light

Components
49
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
3
Source
https://github.com/deepraj21/opaline
Website
https://opaline.buildlab.in
Install
npx shadcn@latest add @opaline/theme @opaline/{name}

All Opaline components

  • Glass Accordion: Collapsible sections on one glass panel, or as separate glass cards that grow open.
  • Glass Alert: A callout on frosted glass, tinted by intent: info, success, warning or destructive.
  • Glass Badge: Small glass chip with an optional glowing status dot.
  • Glass Bento Grid: Feature tiles on glass in a bento layout, with a pointer light and a call to action that slides in.
  • Glass Button: Pill button made of liquid glass with a pointer-tracked highlight.
  • Glass Card: Frosted card surface with header, content and footer slots.
  • Glass Clock: Analog clock on a liquid glass face with a sweeping second hand.
  • Glass Code Block: Syntax-highlighted code in a glass window, with tabs, line numbers, highlighted lines and copy.
  • Glass Command: ⌘K command palette on a frosted glass sheet, powered by cmdk.
  • Glass Context Menu: Right-click menu that springs from the cursor, with a row of round quick actions.
  • Glass Control Center: macOS-style Control Center kit — glass modules, toggles, light-filled sliders and buttons.
  • Glass Credit Card: A glass payment card that tilts to the pointer, flips to its back and detects the brand.
  • Glass Date Picker: Glass calendar with a gliding day bubble, and a capsule date picker.
  • Glass Dialog: Modal on a frosted glass sheet with springy transform-only motion.
  • Glass Dock: macOS-style dock with smooth magnification and hover labels.
  • Glass Input: Capsule text field with icon and adornment slots — made for search.
  • Glass Knob: Rotary dial with a glass cap — drag around it or use the arrow keys.
  • Glass Lens: Draggable magnifying lens that bends whatever is beneath it.
  • Glass Menu: Dropdown menu rendered on liquid glass.
  • Glass Message: Chat bubbles on glass: tinted for you, clear for them, with avatars, meta and a typing indicator.
  • Glass Notification: iOS notification banner plus a stack that fans out on hover.
  • OTP Input: One-time code cells on glass with a gliding lens, paste and SMS autofill, and success / error states.
  • Glass Player: Now-playing widget with scrubber, transport controls and volume.
  • Glass Popover: Rich popover content on a frosted glass surface.
  • Glass QR Code: A scannable QR code printed on a glass tile, with soft finders, a glass logo lens and an optional magnifier.
  • Glass Scroll Stack: Glass cards that pin and pile up as you scroll, shrinking as new cards land on them.
  • Glass Segmented: Icon segmented picker whose glass bubble stretches like liquid as it travels.
  • Glass Select: Capsule select with a frosted glass option list.
  • Glass Sheet: Floating side sheet, or a drag-to-dismiss bottom drawer with side="bottom".
  • Glass Sidebar: Floating source list with a sliding glass selection and icon-only mode.
  • Glass Slider: Slider whose thumb becomes a refracting lens while dragging.
  • Glass Snippet: A command on a glass capsule with copy, and tabs for npm, pnpm, yarn and bun.
  • Glass Stack: A deck of glass cards — swipe the top one away to reveal the next.
  • Glass Stepper: Capsule stepper with rolling digits, hold-to-accelerate and a shake at the limits.
  • Glass Switch: iOS switch whose thumb turns into a glass lens while pressed.
  • Glass Tab Bar: Floating iOS 26 tab bar with a sliding liquid selection.
  • Glass Tabs: Segmented control with a glass bubble that glides between tabs.
  • Glass Terminal: A macOS terminal on glass whose commands type themselves out, line by line, when scrolled into view.
  • Glass Text: Headlines cast in liquid glass — every glyph is a bevelled lens with rim light and a travelling sheen.
  • Glass Textarea: A multi-line field on glass that grows with its content, with a counter and a footer slot.
  • Glass Toast: Imperative toasts on glass that stack into a deck, fan out on hover and swipe away.
  • Glass Toolbar: Floating capsule toolbar that groups icon actions.
  • Glass Tooltip: Capsule tooltip that springs out of its trigger.
  • Glass Tweet Card: A post from X on glass, loaded live with react-tweet by id, with a fallback when it can't be fetched.
  • Glass Widget: iOS home-screen widget frame on liquid glass — small, medium and large.
  • Battery Widget: Batteries widget with device rings that fill, turn red when low and show charging.
  • Calendar Widget: Calendar widget showing today, what's next and a month at a glance.
  • Weather Widget: Weather widget with animated condition art and an hourly forecast.
  • Liquid Glass: The primitive behind every glass component. Refracts the backdrop through an SVG displacement map, with a frosted fallback.

Browse by category