GliaKit

Design system

Components

Shadows

xs · xl · 2xl (new), on the Tailwind scale.

shadow-xs
shadow-xl
shadow-2xl

Buttons

Primary actions — variant × size × state, plus icon and loading buttons.

Button groups

Attached button clusters — split buttons, segmented controls, and stacked avatar groups.

9+

Text inputs

Single-line and multi-line fields with label, helper text, error, and disabled states.

Helper text

This field is required

Helper text

Helper text

This field is required

Helper text

Select

Dropdown trigger with closed and open states; options support hover and selected.

Please select an option

Selection controls

Checkbox and switch — off, on, and disabled.

Badges

Status labels in semantic colors.

NeutralAccentSuccessWarningErrorOutline

Avatars

Initials avatar in three sizes.

Tabs

Segmented navigation with active and inactive states.

Overview panel content.

Accordion

Collapsible content panels — closed and open.

Accordions group related content into collapsible panels. This one is expanded to reveal its body content.

Lists

List rows in a surface container — plain, with leading icons, or grouped with subtitles.

Progress

Linear progress with label and percentage.

Storage
72%
Bandwidth
38%

Stepper

Segmented progress stepper — complete, current, and upcoming steps.

  1. 1. Location
  2. 2. Building
  3. 3. Area
  4. 4. Locks

Divider

Hairline separator.

Above the divider

Below the divider

Modal / Dialog

Scrim overlay with a centered dialog surface, close button, and actions.

Toast

Transient notifications with status icon, message, and dismiss.

This is a info toast message.
This is a success toast message.
This is a warning toast message.
This is a error toast message.

Skeleton

Loading placeholders — line and block.

Stat card

Key metric with value, label, and trend.

Revenue

$48,271

↑ 12.5% vs last month

Churn

3.2%

↓ 0.6% vs last month

Users

2,340

→ 0.0% vs last month

Table

Data rows with path navigation above and page controls below.

CustomerPlanMRR
Aurora LabsPro$199
NorthwindFree$0

Radio

Single-select option from a group.

Chart

Bar data visualisation.

Jan
Feb
Mar
Apr
May
Jun

Alert

Inline status messages — info to error.

Heads up

Payment received

Usage nearing limit

Something went wrong

Menu

Dropdown of actions and options.

Tooltip

Contextual hint on hover or focus.

Card

Grouped content — default, elevated, outline, media.

Card title

Supporting description text

Card body content goes here. Use this space for the main content of the card.

Card title

Supporting description text

Card body content goes here. Use this space for the main content of the card.

Card title

Supporting description text

Card body content goes here. Use this space for the main content of the card.

Card title

Supporting description text

Card body content goes here. Use this space for the main content of the card.

Chips

Selectable, dismissible tags — filled or outline.

SelectedDesignEngineeringMarketing

Circular progress & Loader

Radial progress and spinners.

72%
90%
45%
20%

Slider

Range input with track, fill, and thumb.

Datepicker

Calendar popover for picking a date.

Empty states

Zero-data state with message and action — page and table.

No projects yet

Get started by creating your first project.

No results found

Try adjusting your filters or search.

Command palette

⌘K search over grouped actions with keyboard navigation.

Sheet

Slide-in side panel for detail views, edit forms, and filters.

Combobox

Searchable select — type to filter, arrows + enter to pick.