kostyniuk

kostyniuk / glasscn-components

Public

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

glasscn-components.vercel.app
30
0
100% credibility
Found May 02, 2026 at 29 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

glasscn is a collection of glassmorphism UI components designed for React projects, built on shadcn/ui and installable via a registry.

How It Works

1
🌐 Discover glasscn

You stumble upon the glasscn homepage and get excited by the beautiful glassy buttons, cards, and panels that make websites feel modern and premium.

2
🔍 Explore the collection

Browse the showcase of glass alerts, calendars, sidebars, and more, seeing live previews of each one in action.

3
✨ Pick your glass style

Choose from clear, frosted, subtle, liquid, or liquid-bold variants to get the exact glassy look you envision.

4
📦 Bring it into your project

Follow the simple guide to add your favorite glass piece directly into your website builder.

5
🎨 Drop it on your page

Place the glass component where you want it, like a button or card, and watch it blend perfectly.

6
🔧 Tweak the shine

Switch the glass style on the fly to make it frosted for depth or liquid for a glossy flow.

✅ Your site glows!

Step back and admire how your app now has realistic, eye-catching glass effects that make it stand out beautifully.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 29 to 30 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is glasscn-components?

Glasscn-components delivers Apple-inspired glassmorphic UI components built on top of Shadcn and Base UI in TypeScript. It lets you pull in drop-in replacements for common primitives like buttons, cards, alerts, and sidebars via the shadcn registry—run `npx shadcn add @glasscn/glass-button` and get source-owned glass effects in your Next.js or React app. Each component offers five variants from clear panes to liquid-bold sheens, solving the hassle of crafting custom CSS for frosted, blurred interfaces.

Why is it gaining traction?

It hooks into shadcn's CLI for one-command installs with auto-resolved deps, keeping your codebase lightweight without npm bloat. Pure CSS powers liquid effects like bevels and sheen, while variants mix seamlessly with existing Shadcn setups. Developers dig the live demo site and registry previews, making it dead simple to test glassmorphic vibes without forking or theming from scratch.

Who should use this?

Frontend devs on Shadcn stacks building dashboards, apps, or sites craving iOS-style glass without design-system overhauls. Ideal for prototyping Apple-inspired UIs in Next.js, or refreshing flat components in React tools like admin panels. Skip if you're locked into Tailwind-only or non-Shadcn flows.

Verdict

Grab it for quick glass upgrades if Shadcn's your jam—docs and demos are polished despite 29 stars and 1.0% credibility score signaling early days. Maturity's low with no tests visible, so audit for production; still, a solid bet for experiments.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.