GGlass
About

A broader design system, not just a glass effect demo

The goal is to combine disciplined shadcn-style primitives, reusable layout sections, and a premium glass surface layer in one codebase that can cover both application UI and high-touch marketing pages.

Primitives
33
+30

92% benchmark coverage

Layout Blocks
12
+12

86% benchmark coverage

Glass Layer
9
+4

88% benchmark coverage

Theme Tokens
Catppuccin
Dual mode

100% benchmark coverage

Architecture

Three stacked layers

The system is easier to extend when the responsibilities stay separate: primitives for mechanics, layout blocks for composition, and premium glass components for standout surfaces.

Layer 1
Primitive UI
Buttons, badges, cards, breadcrumbs, tabs, tables, inputs, overlays, toggles, scroll regions, and command patterns.
Layer 2
Layout Blocks
Feature grids, logo clouds, pricing sections, testimonials, team cards, FAQ rails, CTA banners, and portfolio blocks.
Layer 3
Glass Surfaces
Refraction panels, squeeze interactions, animated borders, and premium accents for heroes, cards, and buttons.
Reference

What the system is trying to cover

The target is not one vendor’s exact implementation. It is the common surface area teams actually need across app UI, marketing UI, and page-builder style content assembly.

Coverage map
A practical translation of public component families into reusable React building blocks.
FormsNavigationTestimonialsPricingPortfolioFAQCommandGlass
App UI coverage90%
Marketing section coverage84%
Premium interaction coverage88%
Composition model
Keep it extensible: primitives stay small, blocks stay legible, and the premium layer stays optional.
Use when the goal is raw interaction and structure: forms, tabs, data tables, menus, popovers, tooltips, dialogs, pagination.
Examples

Higher-order blocks now in the library

These cover much of the public section/widget surface area people expect from shadcn UI kits and page-builder ecosystems.

Signal
Northstar
Mode
Prism
Relay
Aperture
Canvas
Orbit
“We can now build a startup landing page and an internal dashboard without changing mental models.”
ML

Maya Lee

Product Designer at Relay

“The block layer closes the gap between raw primitives and what a content team actually needs to ship.”
VH

Victor Hale

Design Engineer at Orbit

“The glass layer is strong, but the important part is that it sits on top of a much more complete foundation now.”
TN

Tara Ng

Creative Director at Canvas

MB
Mina Brooks
System Strategist

Drives coverage decisions so the library stays useful for real product and marketing teams.

OS
Owen Scott
UI Engineer

Focuses on the primitive layer, semantics, and keeping APIs clean as the surface area expands.

PD
Priya Das
Layout Architect

Builds reusable section patterns that avoid the generic page-builder look.

ER
Eli Ross
Interaction Designer

Owns motion, hover states, and the tactile quality of the glass components.

FAQ

How to think about the system

This is the working model for extending the codebase without collapsing back into one-off page code.

FAQ / Accordion
Shared pattern for support docs, pricing pages, help centers, and Elementor-style toggle content.

Call To Action

Compose pages like a UI kit, ship them like a codebase.

That is the direction here: broad component coverage, page-level building blocks, and enough visual identity to avoid looking like another generic Tailwind demo.

System LayeringReusable JSX