GGlass
Library

Component Gallery

Official shadcn primitives, original layout blocks inspired by shadcn UI Kit and Elementor-style page builders, plus the premium glass layer for standout surfaces.

UI Primitives
33
+30

92% benchmark coverage

Layout Blocks
12
+12

86% benchmark coverage

Glass Components
9
+4

88% benchmark coverage

Coverage Target
Broad
Now

80% benchmark coverage

Glass

Liquid Glass Playground

The same refraction system now drives panels, cards, and buttons. Use the official slider primitive to tune the glass surface live.

Click To Squeeze

Liquid Glass

Shared displacement-based refraction, chromatic aberration, and press-depth response.

Surface Controls

These controls use the standard shadcn slider primitive to tune the same glass engine used by the hero surfaces.

320
220
28
8
2
6
Foundations

Core shadcn Primitives

Alerts, badges, breadcrumbs, cards, avatars, tabs, and content structure pulled in as real reusable primitives rather than ad hoc page code.

NewshadcnElementor-style blocksGlass layer
Card Primitive
Base container for settings panes, tables, pricing, and feature summaries.
Tabs Primitive
Shared switcher for dashboard modules, filters, or knowledge panels.
Avatar and Team Utilities
Small details matter: grouped avatars, presence-friendly stacks, and semantic card structure.
NPJHSM
+4
Color, spacing, variants, and the content-building layer.
Forms

Inputs, Selection, and Toggles

Covers the common page-builder and app form controls: input, textarea, select, checkbox, radio group, switch, slider, and segmented toggle groups.

Form Controls
Standard primitives for settings panels, lead capture, filters, and wizard flows.
Enable motion
72%
Segments and Filters
Useful for tabs, filters, content modes, toolbar controls, and Elementor-style section options.

Search input

For quick filtering, command entry, and page-builder sidebars.

Segment controls

For modes, device breakpoints, and layout presets.

Checkbox / switch / radio

For feature toggles, publishing states, and consent flows.

Data

Tables, Scroll Regions, Accordions, and Loading States

The structural side of the system: long-form content, analytics views, FAQ toggles, progress bars, and content placeholders.

Data Views
Practical for dashboards, CMS screens, and commerce catalogs.
ComponentTypeStatus
Pricing CardLayoutReady
Command PalettePrimitiveReady
Glass PanelEffectReady

Scroll areas are useful for inspector panels, release logs, asset lists, or long content blocks inside bounded cards.

This lets the gallery show overflow behavior without forcing the whole page to become the scrolling context for every panel.

It is also a close match for page-builder sidebars and settings drawers where long forms need bounded height.

The same primitive can be reused for notification trays, quick previews, and compact documentation panes.

Disclosure and States
Accordions, progress, and skeletons cover support content, staged loading, and progressive reveal.

Implementation progress84%
Blocks

Layout Blocks Inspired by shadcn UI Kit and Elementor

These are original local JSX components built with cn, variants, and shadcn primitives to cover the higher-level sections and widgets people expect from page-builder ecosystems.

Icon Box
Feature / Icon Cards
Covers the same job as icon boxes, image boxes, service cards, and marketing feature lists.
Counter
Stats and KPI Cards
For counters, metrics, progress, and headline numbers across dashboards and landing pages.
CTA
Call To Action Banners
For signup pushes, campaign banners, upgrade rails, and hero follow-up sections.
Aperture
Northstar
Prism
Interval
Helio
Vector
Mode
Signal
Starter
Landing pages, content blocks, and design system foundations.
$24/ month
  • 33 UI primitives ready to compose
  • Marketing sections and CTA blocks
  • Glass buttons, panels, cards, and forms

Good fit for content sites and brochureware.

Growth
Popular
For product marketing teams shipping pages every week.
$79/ month
  • Pricing, testimonial, FAQ, and portfolio sections
  • Command menus, tabs, filters, and data views
  • Shared variant system using cn + cva

Covers most of the Elementor-style business stack.

Studio
Opinionated production kit for agencies and app teams.
$149/ month
  • Higher-fidelity layout sections
  • Composable shadcn primitives and glass accents
  • Ready for custom dashboards and branded landing pages

Designed for teams extending the library.

“The component layer finally feels coherent. We can ship utilitarian screens and premium marketing surfaces from the same system.”
AC

Avery Cole

Design Director at Northstar Labs

“This gives us the shadcn ergonomics we wanted, with the richer section patterns our WordPress clients expect.”
MR

Monica Reed

Creative Lead at Mode Studio

“The glass layer works as a differentiator instead of a gimmick because the rest of the UI is still disciplined and reusable.”
RP

Rohan Patel

Product Engineer at Signal Works

NP
Nina Park
Creative Technologist

Builds the higher-order layout blocks and keeps the visual language intentional.

JH
Julian Hart
Design Systems Lead

Owns primitives, variants, accessibility contracts, and interaction consistency.

SM
Sana Malik
Frontend Architect

Translates page-builder expectations into composable JSX and predictable APIs.

LG
Leo Grant
Motion Designer

Focuses on animation timing, glass behavior, and premium interaction details.

Portfolio
Agency Site Builder
Hero, pricing, testimonial, and FAQ patterns assembled into a full landing stack.
Layout blocks + forms
Dashboard
Creative Ops Console
Uses tabs, command search, tables, toggles, and filters to manage content operations.
Primitives + data views
Commerce
Product Story Pages
Combines glass accents with testimonial cards, stats, and CTA banners for launches.
Sections + premium surfaces
FAQ / Accordion
Shared pattern for support docs, pricing pages, help centers, and Elementor-style toggle content.

Call To Action

Assemble sections like a page builder, but keep them as real components.

That means props, variants, composition, and source-controlled JSX instead of a config-only editing surface.

Commerce

Payment Methods & Checkout

Payment cards, checkout flows, and transaction confirmations. All variations use glass accents for premium surfaces.

Payment Method
Default

•••• •••• •••• 4242

Expires 12/26

Add Payment Method
Enter your card details securely

Apple Pay

Connected

Google Pay

Not connected

Order Summary
Subtotal$149.00
ShippingFree
Tax$11.92
Total$160.92

Payment Successful

Your order #12345 has been confirmed

Commerce

Product Cards

Multiple product card variations for e-commerce: basic, featured, with discounts, ratings, countdown timers, and quick actions.

Minimal Desk Lamp
Modern LED desk lamp with adjustable brightness
$49.99
-30%
Wireless Charger Pro
Fast wireless charging pad for all devices
$34.99$49.99
(128)
Ergonomic Mouse
$79.99
Featured
Premium Headphones
Active noise cancellation with 40hr battery
$299.99
Flash Sale
02:45:30
Smart Watch Ultra
$199.99$349.99
Out of Stock
Limited Edition Speaker
$129.99
Portable SSD 1TB
$89.99New

USB-C Hub

7-in-1 adapter

$59.99
Auth

Authentication Forms

Login, signup, password reset, 2FA, social login, and magic link flows. Clean form patterns for onboarding and security.

Welcome Back
Sign in to your account

Don't have an account?

Create Account
Get started for free

By signing up, you agree to our Terms and Privacy Policy

Reset Password
We'll send you a reset link
Two-Factor Auth
Enter the 6-digit code from your app
Quick Sign In
Continue with your social account
or
Magic Link
Sign in without a password

We'll email you a link to sign in instantly

Analytics

Charts & Analytics

Dashboard metrics, KPI cards, and chart placeholders for analytics interfaces. Uses Catppuccin chart colors.

Total Revenue
$45,231.89

+20.1% from last month

Active Users
+2,350

+180.1% from last month

Sales
+12,234

+19% from last month

Conversion
4.5%

-2.3% from last month

Revenue Over Time
Monthly revenue for the past year
JanMarJunSepDec
Traffic Sources
Where your visitors come from
Direct (50%)
Organic (30%)
Social (15%)
Other (5%)
Goal Progress
Track your quarterly objectives
Revenue Target$45K / $60K
New Customers892 / 1000
Active Subscriptions3,420 / 5000
Support Tickets Resolved156 / 160
Productivity

Task & Card Management

Kanban cards, task items, priority indicators, status badges, and drag handles for project management interfaces.

Today's Tasks
4 tasks

Review design mockups

Due in 2 hours

High

Update API documentation

Due today

Medium

Deploy staging build

Completed

Done

Code review PR #234

Due tomorrow

Low
In Progress
Feature

Implement dark mode toggle

JDMK
3
Bug

Fix mobile nav overflow

AL
1
Active
Website Redesign
Complete overhaul of the marketing site
Progress65%
JDMKAL
+2
Mar 30
Sprint 24 Overview
Feb 26 - Mar 11

12

Total

5

Done

4

Active

3

Todo

Completed42%
In Progress33%
Backlog25%
Users

User Menus & Profiles

Profile dropdowns, settings menus, user cards, and avatars with status indicators for account-related interfaces.

JD

Jane Doe

Product Designer

234

Posts

1.2K

Followers

156

Following

Account Menu
Typical user dropdown content
JD

Jane Doe

jane@example.com

Avatar Status
Online, away, busy, offline indicators
ON

Online

Available to chat

AW

Away

Back in 15 minutes

BY

Busy

Do not disturb

OF

Offline

Last seen 2h ago

Notification Settings

Email

Receive email notifications

Push

Browser notifications

SMS

Text message alerts

Team Members
MemberRoleStatusActions
JD

Jane Doe

jane@example.com

AdminActive
MK

Mike King

mike@example.com

EditorActive
AL

Alice Lee

alice@example.com

ViewerPending
Onboarding

Welcome & Onboarding

Welcome cards, hero banners, feature announcements, and empty states for first-run experiences.

Welcome to Glass UI

You're all set up and ready to start building beautiful interfaces. Let's explore what you can create.

New Feature
Dark Mode Just Got Better
Introducing system-aware theme switching with smooth transitions between light and dark modes.
Getting Started
Complete these steps to set up your account
Create your account
Verify your email
3
Set up your workspace
4
Invite team members

No Projects Yet

Get started by creating your first project. It only takes a minute.

Quick Actions
Commerce

Commerce Flows

Product pages, shipping options, refund flows, and order tracking for e-commerce experiences.

Shipping Method
Choose your preferred delivery option
Order #12345
Estimated delivery: Mar 25
In Transit

Order Confirmed

Mar 20, 10:30 AM

Shipped

Mar 21, 2:15 PM

In Transit

Currently in Atlanta, GA

Delivered

Pending

Request Return
We'll process your refund within 5 days

Wireless Charger Pro

Qty: 1 · $34.99

Cart Items

Premium Headphones

Color: Black

1

$299.99

USB-C Hub

7-in-1

2

$119.98

Total$419.97
Apply Discount

SAVE20 applied!

20% off your order

Communication

Chat & Messaging

Message bubbles, chat threads, notification cards, and conversation interfaces.

JD
Jane Doe
Online
JD

Hey! How's the new design system coming along?

10:30 AM

ME

Going great! Just finished the glass components. Check it out:

10:32 AM

ME

10:32 AM

JD

This looks amazing! 🔥 Love the liquid glass effect

10:35 AM

JD
Notifications
3 new

New message from Jane

Hey! How's the new design...

2 min ago

Task completed

Design review is done

15 min ago

New team member

Mike joined the project

1 hour ago

Recent Conversations
JD

Jane Doe

10:35 AM

This looks amazing! 🔥

2
MK

Mike King

9:15 AM

Can you review my PR?

AL

Alice Lee

Yesterday

Thanks for the help!

States

Empty States & Errors

404 pages, error states, empty list states, and loading patterns for graceful failure and empty data handling.

404

Page Not Found

The page you're looking for doesn't exist or has been moved.

Something Went Wrong

We encountered an error while processing your request. Please try again.

Inbox Zero!

You're all caught up. New messages will appear here.

No Results Found

We couldn't find anything matching "glass components"

Connection Lost

Please check your internet connection and try again.

Patterns

Element Coverage

A practical mapping of common public categories from shadcn, shadcn UI Kit, and Elementor-style ecosystems into reusable JSX.

Mapped Families
Not just one-off pages. These are component families you can keep composing.

Official primitives

Accordion, alert, avatar, badge, breadcrumb, card, command, input, popover, table, tabs, tooltip, and more.

Layout sections

Feature grids, pricing tables, team blocks, testimonials, logo clouds, portfolios, and CTA banners.

Page-builder equivalents

Counters, icon lists, accordions, toggles, contact forms, review cards, and content rails.

Premium layer

Glass panels, refraction cards, animated borders, and squeeze interactions for hero surfaces.

Use Cases
The goal is to cover actual production needs, not just check off component names.
Marketing
Landing pages
Hero variants, logo clouds, testimonials, pricing, FAQ, CTA, and contact flows.
App
Product surfaces
Tables, tabs, filters, command search, dialogs, sidebars, and bounded panels.
Editorial
Content systems
Alert rails, quote/testimonial cards, accordions, breadcrumbs, and pagination.
Commerce
Offer presentation
Pricing tables, bundles, comparisons, FAQs, and trust-building review content.

Command Palette

Search for a command to run...