Skip to Content
iOS 26 Liquid Glass · v0.1.7

Glass-native components
for the web.

A React + TypeScript design system inspired by iOS 26 liquid glass — built for the modern web.

Buttons
Card

Pebble Pro

New

The complete design system starter for your next project.

Badges
DefaultPrimarySuccessWarningDangerInfo

Components

Explore the system

Every component built with the same glass aesthetic and attention to detail.

Button

Five variants, three sizes, loading state

Input

Labels, icons, helper and error text

Textarea

Auto-resize, configurable resize handle

Select

Custom dropdown with keyboard navigation

Checkbox

Checked, indeterminate, helper text

Card

Elevated, bordered, flat and hoverable variants

Modal

Four sizes, backdrop dismiss, custom footer

Spinner

Five sizes, indigo and white color modes

Tooltip

Four placements, rich content support

Avatar

Sizes, status indicators, group with overflow

Badge

Six variants, two sizes, dot indicator

Toast

Success, error, warning, info — auto-dismiss

Dark mode

Beautiful in the dark.

Every component is designed dark-first — glass surfaces glow on deep backgrounds.

Buttons

Five variants, three sizes, spring animations.

Inputs

Liquid Glass Card

Glass surfaces feel alive — frosted, luminous, and responsive to light.

Preferences

Why Pebble

Craft meets system

Built from first principles with a single question: what if every detail was considered?

✦

iOS-inspired

Liquid glass aesthetic designed for the web — frosted surfaces, iridescent gradients, spring animations.

◐

Dark mode first

Built dark first, always beautiful. Every component looks intentional in both light and dark.

✦

Craft-first

Every detail considered — from bloom effects to spring physics, nothing is left to defaults.