gitwtfhub

wtf is glasscn-components?

kostyniuk/glasscn-components — explained in plain English

Analysis updated 2026-05-18

38TypeScriptAudience · developerComplexity · 2/5Setup · easy

TL;DR

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

Why would anyone build with this?

REASON 1

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

REASON 2

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

REASON 3

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

What's in the stack?

TypeScriptReactNext.jsshadcn/uiCSS

How it stacks up

kostyniuk/glasscn-componentsdjdeveloperr/nativescript-expojavlonbek1233/-bento-grid
Stars383838
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderateeasy
Complexity2/54/51/5
Audiencedeveloperdevelopervibe coder

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

How do you spin it up?

Difficulty · easy Time to first run · 5min

Wtf does this do

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.

Yoink these 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

wtf 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.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.