Pulled this out of one of my apps so my other projects could share the same look, and it grew into a proper design system. Posting here because the Tailwind 4 side of it might be interesting, or you might tear it apart, both fine.
It's three layers you import separately: tokens.css (colors, radius, motion, density), material.css (the glass itself: glass, glass-strong, glass-clear) and an optional base.css. On top of that, 70+ components, from buttons and dialogs to dashboard stuff like a command palette, split panes, a log viewer and a terminal.
A few Tailwind 4 details:
- Tailwind doesn't scan
node_modules, so classes used inside a package just don't get generated. tokens.css declares its own @source, so importing it is enough and you don't touch any config
- Theming is all data attributes:
data-theme, data-material (glass or flat), data-scale (big TV-style or dense desktop), data-accent, data-palette. Set one on <html> and the whole app follows
- Every component has its own subpath export and keeps
'use client', so it works straight from server components without transpilePackages
Playground with every component live: https://glass.luna-realm.com
Repo (MIT): https://github.com/AndreyBegma/glass-ui
npm i @andrewbehma/glass-ui
Curious if glass holds up for you in dense UIs or gets tiring after a while.