explaingit

kostyniuk/glasscn-components

Analysis updated 2026-05-18

38TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A library of frosted glass styled UI components built on shadcn/ui for React and Next.js projects.

Mindmap

mindmap
  root((glasscn-components))
    What it does
      Frosted glass UI components
      Built on shadcn/ui
    Tech stack
      TypeScript
      React
      Next.js
      shadcn/ui
    Variants
      Clear
      Frosted
      Liquid refract
    Use cases
      Buttons and cards
      Sidebars
      Apple style aesthetic
    Audience
      React developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add Apple style frosted glass buttons, cards, or sidebars to a React project with one command.

USE CASE 2

Choose between clear, frosted, subtle, or liquid-refract glass variants for a component.

USE CASE 3

Build a polished glassmorphism aesthetic without designing the visual effects from scratch.

What is it built with?

TypeScriptReactNext.jsshadcn/uiCSS

How does it compare?

kostyniuk/glasscn-componentsjavlonbek1233/-bento-gridjavlonbek1233/amaliy-ish-5
Stars383838
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasyeasy
Complexity2/51/51/5
Audiencedevelopervibe codervibe coder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

In plain English

This is a collection of ready-made interface components that have a frosted glass visual style, the semi-transparent, blurred look popularized by Apple. The library is built on top of shadcn/ui, an existing component system for React and Next.js projects, so developers who already use that setup can add these glassy components with a single command. The idea is that instead of building buttons, cards, calendars, sidebars, and other interface pieces from scratch, you can install just the ones you need by name and drop them into your project. Each component comes in multiple visual variants: a clear glass look, a frosted version, a subtle one, a liquid style done with pure CSS, and a liquid-refract version that uses an SVG filter to simulate real lens-like bending of light. Dependencies are handled automatically on install. You would reach for this when building a web app in React or Next.js and want a polished, Apple-inspired aesthetic without designing the visual effects yourself. It is written in TypeScript and integrates with the shadcn registry system.

Copy-paste prompts

Prompt 1
Install a glasscn-components button and card into my Next.js project using the shadcn CLI.
Prompt 2
Explain how the liquid-refract SVG filter variant works in this library.
Prompt 3
Show me how to pick the frosted glass variant for a sidebar component.

Frequently asked questions

What is glasscn-components?

A library of frosted glass styled UI components built on shadcn/ui for React and Next.js projects.

What language is glasscn-components written in?

Mainly TypeScript. The stack also includes TypeScript, React, Next.js.

How hard is glasscn-components to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is glasscn-components for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.