HomeBookmarks
glasscnglasscn
glasscn

glasscn

GLby glasscn
1component2.7Kviews15bookmarks

Installs all 36 components. Without our CLI, run instead.

Auto-indexed

glasscn contents

  • Liquid WatchLiquid Watch

    Liquid Watch

    • That's all 1 components

    About glasscn

    glasscn publishes a shadcn registry at glasscn-components.vercel.app, with 36 components installable through the shadcn CLI.

    Components
    36
    GitHub stars
    86
    Last commit
    Sep 17, 2026
    Repository
    kostyniuk/glasscn-components

    Also in the glasscn registry

    Copy a prompt for your agent, copy the install command, or open the docs that ship it.

    • Button Group

      button-group
      @base-ui/react, class-variance-authority1 file

    • Code Block Command

      code-block-command
      lucide-react, motion5 files

    • Glass Alert

      glass-alert

      Glass Alert with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Alert Dialog

      glass-alert-dialog

      Glass Alert Dialog with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Badge

      glass-badge

      Glass Badge with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Button

      glass-button

      Glass Button with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file1 example

    • Glass Button Group

      glass-button-group

      Glass Button Group with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Calendar

      glass-calendar

      Glass Calendar with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Card

      glass-card

      Glass Card with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Checkbox

      glass-checkbox

      Glass Checkbox with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Code Block Command

      glass-code-block-command

      Glass Code Block Command with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Combobox

      glass-combobox

      Glass Combobox with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Command

      glass-command

      Glass Command with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Contact Pill

      glass-contact-pill

      Liquid-glass contact chip with an avatar (image or initials fallback) and name, for messaging apps

      lucide-react1 file

    • Glass Dropdown Menu

      glass-dropdown-menu

      Glass Dropdown Menu with five variants: clear, frosted, subtle, liquid, and liquid-refract

      @base-ui/react1 file

    • Glass Icon

      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 stay uniform.

      class-variance-authority1 file

    • Glass Input

      glass-input

      Glass Input with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Item

      glass-item

      Glass Item with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Popover

      glass-popover

      Glass Popover with five variants: clear, frosted, subtle, liquid, and liquid-refract

      @base-ui/react1 file

    • Glass Progress

      glass-progress

      Glass Progress with five variants: clear, frosted, subtle, liquid, and liquid-refract

      @base-ui/react1 file

    • Glass Radio Group

      glass-radio-group

      Glass Radio Group with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Scrim Card

      glass-scrim-card

      Siri-style liquid-refract card with a black scrim that eases from one edge into clear glass

      utils1 file

    • Glass Select

      glass-select

      Glass Select with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Separator

      glass-separator

      Glass Separator with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Sidebar

      glass-sidebar

      Glass Sidebar with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Skeleton

      glass-skeleton

      Glass Skeleton with five variants: clear, frosted, subtle, liquid, and liquid-refract

      utils, glass-variants1 file

    • Glass Toggle Group

      glass-toggle-group

      A segmented control with a sliding glass puck indicator supporting icons, text, or any React content.

      motion1 file

    • Input Group

      input-group
      class-variance-authority1 file

    • Item

      @base-ui/react, class-variance-authority1 file

    • Liquid Badge

      liquid-badge

      A liquid-glass badge wrapper that keeps the base badge fill and applies the effect to the border.

      @paper-design/shaders-react, class-variance-authority1 file

    • Liquid Glass

      liquid-glass

      Low-level refractive glass wrapper used by liquid-refract components.

      utils1 file

    • Liquid Switch

      liquid-switch

      A liquid-glass switch wrapper built on top of the default switch component.

      @paper-design/shaders-react, class-variance-authority1 file

    • Preference

      A weighted preference bar with icon badges, hover tinting, and tooltip descriptions.

      utils1 file

    From the glasscn readme

    glasscn

    A glassmorphism component library built on top of shadcn/ui. All components are available via the shadcn registry and can be dropped into any Next.js / React project.

    Links

    Homepage: https://glasscn.vercel.app

    Installation

    Install any component directly by name using the @glasscn/ registry prefix:

    npx shadcn add @glasscn/

    For example:

    npx shadcn add @glasscn/glass-code-block-command

    Dependencies (including other registry items) are resolved and installed automatically.

    Available components

    Glass components

    ComponentInstall
    Glass Alertnpx shadcn add @glasscn/glass-alert
    Glass Alert Dialognpx shadcn add @glasscn/glass-alert-dialog
    Glass Badgenpx shadcn add @glasscn/glass-badge
    Glass Buttonnpx shadcn add @glasscn/glass-button
    Glass Button Groupnpx shadcn add @glasscn/glass-button-group
    Glass Calendarnpx shadcn add @glasscn/glass-calendar
    Glass Cardnpx shadcn add @glasscn/glass-card
    Glass Checkboxnpx shadcn add @glasscn/glass-checkbox
    Glass Code Block Commandnpx shadcn add @glasscn/glass-code-block-command
    Glass Commandnpx shadcn add @glasscn/glass-command
    Glass Comboboxnpx shadcn add @glasscn/glass-combobox
    Glass Inputnpx shadcn add @glasscn/glass-input
    Glass Itemnpx shadcn add @glasscn/glass-item
    Glass Popovernpx shadcn add @glasscn/glass-popover
    Glass Radio Groupnpx shadcn add @glasscn/glass-radio-group
    Glass Selectnpx shadcn add @glasscn/glass-select
    Glass Separatornpx shadcn add @glasscn/glass-separator
    Glass Sidebarnpx shadcn add @glasscn/glass-sidebar
    Glass Skeletonnpx shadcn add @glasscn/glass-skeleton

    Utilities

    ItemInstall
    Glass Variantsnpx shadcn add @glasscn/glass-variants
    Utilsnpx shadcn add @glasscn/utils

    Usage

    After installing a component, import it from your components directory:

    import { GlassButton } from "@/components/ui/glasscn/glass-button"

export default function Page() {
  return (
    
      Clear Glass
      Frosted Glass
      Subtle Glass
      Liquid Glass
      Liquid Refract
    
  )
}

    Liquid variants

    • liquid — pure CSS. Heavy saturation + sheen + multi-layer bevel. Zero JS.
    • liquid-refract — SVG displacement filter. Real lens-like refraction with curved glass effect.

    Read the rest on GitHub →

    What glasscn builds on

    The packages and primitives its components pull in, counted across the registry.

    utils60glass-variants23

    Hooks and utilities

    • alert
    • alert-dialog
    • avatar
    • badge
    • button
    • calendar
    • card
    • checkbox
    • combobox
    • command
    • dialog
    • dropdown-menu
    • input
    • popover
    • progress
    • radio-group
    • select
    • separator
    • sheet
    • sidebar
    • skeleton
    • switch
    • textarea
    • tooltip

    Registries like glasscn

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    coss

    coss

    by coss

    74

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    Browse every shadcn registry we track →

    ReUI

    ReUI

    by Sean Hello

    263

    components

    Kokonut UI

    Kokonut UI

    by Kokonut UI

    60

    components

    1. Components
    2. /
    3. glasscn
    4. /
    5. glasscn

    Related libraries

    Hyperiux Vault

    Hyperiux Vault

    by Hyperiux Vault

    55

    components

    Nimbus UI

    Nimbus UI

    by Guglielmo Giannattasio

    3

    components

    UI TripleD

    UI TripleD

    by Moumen Soliman

    107

    components

    FR

    Freedom

    by Dhileep Kumar GM

    215

    components

    Base UI

    Base UI

    by MUI

    28

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    About glasscn

    glasscn is a component library on 21st.dev by glasscn with 1 public React component. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 1 glasscn components

    • Liquid Watch

    Browse all component libraries →