Skip to content

glassComponent library

Serkan Baykal

Software developer

Getting started

Installation

Library

- Overview
- Lumen

Components Blocks Templates Home

© 2026 Serkan Baykal. Open source under MIT.

Glass

Applies site-wide

Mode

DarkLight

Accent

TealGreenSkyVioletAmberRose

Corners

SharpBalancedRounded

Blur14px

Saturation180%

Frost6%

Rim light50%

Specular35%

Depth35%

Backdrop colour20%

theme

: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"
>

Components

Glass primitives: buttons, fields, overlays, menus and navigation. Accessible, keyboard-ready and themeable with the glass dials.

01CSS
Button
Button in four finishes with a soft press, plus a light sweep in themes that have one. Its variants also style links.
02CSS
Field
Input and textarea in five sizes that line up with buttons: a floating label on large fields, a stacked one on compact fields, an accent focus halo and wired-up error text.
03CSS
Segmented Control
Single-choice switch with a thumb that glides between options. Full arrow-key support.
04CSS
Accordion
Editorial accordion with display titles and optional step markers. Height animates with a CSS grid transition.
05Motion
Site Nav
Header that turns solid on scroll, tracks the current section with a sliding pill and opens a spring menu on mobile.
06CSS
Theme Tuner
Sliders and choices that drive a theme's dials, such as glass blur or tide's mode and accent, for the whole page or one section.
07CSS
Dialog
Centred raised panel over a softly dimmed page, with a fixed header and footer and a body that scrolls.
08CSS
Dialog · Tones
The same dialog with an icon header: a tone-tinted tile and a soft wash of the tone in the corner show its intent at a glance.
09CSS
Sheet
Floating drawer that slides in from the right, left or bottom, inset from the edges like an iOS sheet.
10CSS
Popover
Raised bubble that grows out of its trigger for small forms and details.
11CSS
Tooltip
Small label on hover and focus, with a shared delay across the page.
12CSS
Dropdown Menu
Action menu with labels, shortcuts, checkable items and a danger tone.
13CSS
Command Palette
⌘K palette with word search, groups and shortcuts, inside a dialog pinned near the top.
14CSS
Tabs
Tab track with a thumb that glides under the active tab, positioned without re-rendering.
15CSS
Switch
iOS-style toggle whose thumb stretches while pressed.
16CSS
Checkbox
Rounded checkbox with an accent fill and an indeterminate state.
17CSS
Radio Group
Classic radio dots and whole cards as options, with arrow-key navigation.
18CSS
Select
Trigger with a list that opens at the trigger's width and scrolls inside the panel.
19CSS
Select · Search
A select with a search field for long lists: type to filter, arrow keys to move, Enter to pick.
20CSS
Slider
Accent-filled track with round thumbs; pass two values for a range.
21CSS
Input OTP
One cell per code character, with paste, autofill and keyboard support.
22CSS
Notification bell
Bell with an unread count and a popover inbox: tone dots, All/Unread filter, mark one or all as read, empty state. Icon for top bars, or a chip that says “3 new”.
23CSS
Chip
Compact tokens: filter chips (single or multi-select group), removable chips, action chips and a chip input that turns typed entries into chips.
24CSS
Confirm dialog
Asks before a step that is hard to undo: tone icon, focus on Cancel, a loading confirm button and close on success.
25CSS
File upload
Drag-and-drop area with type, size and count checks, per-file progress, retry and remove. A compact row for a single attachment.
26CSS
Selection bar
Floating bulk-action bar for selected table rows. Hovers at the bottom so the table never shifts.
27CSS
Row actions
The per-item “more” menu for rows, cards and detail panels: icon, label, key hint, dividers and destructive items from one action list.
28CSS
Name dialog
Create or rename in a small dialog: the value starts selected, and empty, over-long, illegal-character and duplicate names get calm inline errors.
29CSS
Folder picker dialog
Choose a destination folder by searching full paths. The folders being moved, everything inside them and their current location are left out.
30CSS
Progress
Slim track whose gradient fill eases to each new value, in accent or a status tone.
31CSS
Badge
Small labels in surface, solid, outline, accent and status tones, with an optional dot.
32CSS
Account Menu
The signed-in person's avatar as a menu button: name and email on top, then profile, settings and sign out.
33CSS
Status Text
Text in a status colour that flows inside a sentence, such as Payment failed or 3 days left, with an optional matching icon.
34CSS
Avatar
Photo with an initials fallback, in three sizes, plus an overlapping group with a +N bubble.
35CSS
Alert
Inline message on a surface, tinted by a soft glow in info, success, warning or danger.
36CSS
Toast
Sonner's stacking, swiping and promise toasts, dressed in the theme.
37CSS
Skeleton
Placeholder shapes with a band of light sweeping across while content loads.
38CSS
App Window
Desktop-app frame for product previews: window dots, an address pill or title, optional actions and your content.
39CSS
Copy Button
Copies a value and confirms in place for two seconds, announced to screen readers; says so if the clipboard is blocked.
40CSS
Bar List
Ranked rows with a proportional fill behind each label, for top pages, sources or countries. Values are always printed.
41CSS
Kbd
Key caps for shortcuts, single or grouped.
42CSS
Brand Mark
Small accent tile for a product logo, with a neutral default glyph. Blocks and dashboards use it beside the brand name.
43CSS
Breadcrumb
Trail of links where the last item marks the current page.
44CSS
Page Header
Title row for an app page: a large title, a muted one-line description and actions that wrap under it on small screens.
45CSS
Pagination
Page switcher that keeps the ends and neighbours visible and folds the rest into gaps.
46CSS
Carousel
Scroll-snap carousel with swipe and mouse drag, arrows, dots, bars or a counter, arrow keys, peek and centre modes, a fade transition and optional autoplay that pauses on hover, focus and hidden tabs. Slides share one height.
47CSS
Image Carousel
One full-bleed image at a time with a caption chip, arrows on the edges and a thumbnail strip that follows the active image. Fixed aspect ratio and lazy images, so nothing shifts.
48CSS
Table
Data table with hover rows, status-friendly cells and accessible sortable headers.
49CSS
Spinner
Loading indicator in the current text colour. Built into Button as its loading state.
50CSS
Sidebar Nav
App sidebar with a brand row, profile card, search, labelled groups, count badges and sections that expand into sub-links.