UI Styleguide

A premium component library powered by Tailwind v4, Spring animations, and an advanced elevation system.

Buttons & Actions

Matrix View
Size / Variantdefaultsecondaryoutlineghostdestructivelink
xs
sm
default
lg
xl
2xl

Integrated Icon Prop

Loading States (Smart Transition)

Form Controls

Specialized & Mixed Types

#000000

Style Variants & States

Spring-animated scale and check animation.

Elastic transition on toggle.

Invalidated border and focus-ring colors.

This field is required

Data Display

Optimized Table

IDComponentStatusDateValue
1Premium ButtonCompleted2024-01-14$420.00
2Spring MotionIn Progress2024-01-13$120.50
3Glass PanelReview2024-01-12$95.00

Badges

DefaultSecondaryOutlineDestructive
Premium Card
Using the new --shadow-premium token.

Elevated shadows provide better visual hierarchy than standard borders alone.

CNJD
Collaborators

Feedback & Interaction

Messaging

Semantic Notifications (Sonner)

Skeleton Loaders

Contextual Feedback

Tooltips

Variants

Positions

Navigation & Tabs

Tabs (Spring Transitions)

Account settings and profile information. The trigger uses the interactive-subtle utility for a light bounce.

Breadcrumbs

Depth & Glassmorphism

Glass Panel (Light)

Utilizes backdrop-filter: blur and color-mix for a translucent, modern feel.

Glass Panel (Dark)

Optimized for high-contrast environments or dark mode surfaces, maintaining readability through adjusted transparency.

Overlays & Menus

Dropdown Menu

Side Sheet

Bottom Drawer

Dialog Modal

State Audit (Overlays)