Components

Every component in the system, live. Select one to switch its variants, force its hover, press and focus states, and copy its import.

Button

On track

Badge

Streak at risk

Check in before midnight to keep your 14-day streak.

Beam

Sync finished. Every device holds the same check-ins.

Notice

Goal name

Input

Sort goals

Select

Target days

Slider

Daily reminder

Toggle

ToggleGroup

SegmentedControl

CheckboxGroup

#1e90ff

ColorInput

SearchField

ProgressBar

TabBar

DisclosureToggle

ConfirmButton

DrawerAction

Nothing here yet

Add your first goal and start chipping away.

EmptyState

Weekly summary

How the week is shaping up.

Five of seven goals are on streak. Two need a check-in before midnight.

Card

CalendarHeatmap

GitHub-style activity heatmap in squares or check-in dots.

State

Import

import { CalendarHeatmap } from '@whiskeyjack-net/design-system'

Copy into your repo

npx shadcn add https://whiskeyjack.net/r/calendar-heatmap.json

ButtonRow

ActionPill

Morning pages
Stretching
Reading

ReorderList

9:41

MobileBottomNav

9:41

BottomNav

9:41

BottomDrawer

Hooks, utilities and layout

These have no visual surface of their own. Each opens its description and import in the panel.

Components

Nothing here yet

Weekly summary

CalendarHeatmap

State

Import

Copy into your repo

Hooks, utilities and layout

Navigation & shell

Forms & inputs

Overlays & feedback

Data display

Hooks & utilities