Live Docs

Navigation

Foundations /

stable

Radius & Shadow

9 radius scales + 6 elevation shadows. Semua pakai token. Shadow tidak naik di dark mode — alternatif: border + bg-surface.

Border Radius

Konsisten di seluruh komponen.

--radius-none

0px · Sharp edges, table cells

--radius-xs

0.125rem · Mini badge, kbd

--radius-sm

0.25rem · Tag, kecil label

--radius-md

0.375rem · Button, input default

--radius-lg

0.5rem · Card, panel

--radius-xl

0.75rem · Large card, dialog

--radius-2xl

1rem · Hero card, feature card

--radius-3xl

1.5rem · Splash, marketing block

--radius-full

9999px · Pill, avatar, FAB

Shadow / Elevation

6 level dari subtle ke maksimal.

--shadow-xs

Subtle separation, hover lift

--shadow-sm

Card default, input focus

--shadow-md

Dropdown, popover

--shadow-lg

Modal, dialog

--shadow-xl

Top-level overlay, hero

--shadow-glow

Highlight, focus ring on brand

Dark Mode Note

Shadow tidak terlihat di dark mode karena tidak ada light source.

Praktik di dark mode

Gunakan kombinasi border: 1px solid rgb(var(--border-subtle)) + background: rgb(var(--bg-surface)) untuk menciptakan elevation tanpa relying pada shadow.