Dev Design Library

glasscn components

Apple-inspired glassmorphic UI components built on top of ShadCN and Base UI

Components
62
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
80
Source
https://github.com/kostyniuk/glasscn-components
Website
https://glasscn-components.vercel.app
Install
npx shadcn add @glasscn/{name}

All glasscn components

  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Button
  • Button Group
  • Calendar
  • Card
  • Checkbox
  • Code Block Command
  • Combobox
  • Command
  • Component Preview: A preview shell for component demos with switchable default and glass variants.
  • Dialog
  • Dropdown Menu
  • Glass Alert: Glass Alert with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Alert Dialog: Glass Alert Dialog with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Badge: Glass Badge with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Button: Glass Button with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Button Group: Glass Button Group with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Calendar: Glass Calendar with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Card: Glass Card with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Checkbox: Glass Checkbox with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Code Block Command: Glass Code Block Command with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Combobox: Glass Combobox with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Command: Glass Command with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Contact Pill: Liquid-glass contact chip with an avatar (image or initials fallback) and name, for messaging apps
  • Glass Dropdown Menu: Glass Dropdown Menu with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Icon: A circular glass chip that wraps any icon, iOS-control-center style. Preset sizes scale the circle and icon together so grids of icons…
  • Glass Input: Glass Input with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Item: Glass Item with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Popover: Glass Popover with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Progress: Glass Progress with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Radio Group: Glass Radio Group with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Scrim Card: Siri-style liquid-refract card with a black scrim that eases from one edge into clear glass
  • Glass Select: Glass Select with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Separator: Glass Separator with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Sidebar: Glass Sidebar with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Skeleton: Glass Skeleton with five variants: clear, frosted, subtle, liquid, and liquid-refract
  • Glass Toggle Group: A segmented control with a sliding glass puck indicator supporting icons, text, or any React content.
  • Highlight Phrase: A smooth glass hover popover for text, video, and rich content, with click and keyboard access.
  • Highlight Text: Inline text highlight with preset color variants and custom background class support.
  • Input
  • Input Group
  • Item
  • Liquid Badge: A liquid-glass badge wrapper that keeps the base badge fill and applies the effect to the border.
  • Liquid Glass: Low-level refractive glass wrapper used by liquid-refract components.
  • Liquid Switch: A liquid-glass switch wrapper built on top of the default switch component.
  • Liquid Text: Animated text filled with a liquid shader mask.
  • Liquid Watch: Compact watch-style stacked time display built from liquid text inspired by Apple Watch.
  • Popover
  • Preference: A weighted preference bar with icon badges, hover tinting, and tooltip descriptions.
  • Progress
  • Radio Group
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Switch
  • Textarea
  • Tooltip

Browse by category