Liquid glass, poured into React
Frosted surfaces, calm motion and a set of dials to tune them. CSS first, Motion where physics matter, and every line of it yours to copy.
npx shadcn@latest add https://ui-collections.vercel.app/r/glass/button.jsonSix dials, every surface.
Each slider moves one CSS variable that all glass reads. The change applies across the whole site and stays when you browse the docs. Copy the result into your own stylesheet when it feels right.
Glass
Saved in this browser:root {
--glass-blur: 14px;
--glass-saturate: 180%;
--glass-tint: 0.06;
--glass-rim: 0.5;
--glass-shine: 0.35;
--glass-depth: 0.35;
--aurora-strength: 0.2;
}
<html
data-mode="dark"
data-accent="teal"
data-radius="rounded"
>Move the pointer across this card, then change a dial.
Small pieces, one quiet language.
Each one is a single file you own. Install it with one command and its dependencies come along.
Every surface on this page is a file you can own in one command, tuned by six dials and fast on a three-year-old phone.
Fast because it is quiet.
tide
Prefer something calmer for dashboards? The same components in clean green on cool slate, light and dark.
Hi, I'm Serkan Baykal.
I'm a software developer. These collections hold the interface pieces I reach for again and again, refined until they are fast, accessible and consistent.
Each collection is its own design language over the same components. glass is one of them.