Component Catalog

Every primitive, one page.

Live examples for every shadcn/ui component and custom FX in Stack'd. Toggle Code on any card to copy usage.

Buttons & Actions

#buttons
Button — variants
Default, secondary, outline, ghost, destructive.
Button — sizes
sm · default · lg · icon
Ember sweep CTA
Custom class btn-ember with gradient hover-sweep.

Inputs & Forms

#inputs
Input
Text input with label.
Textarea
Multi-line input.
Checkbox
Switch
Controlled toggle.
Slider
Value: adjustable.

42

Radio group
Select

Display & Data

#display
Badge
Status pill.
Live
Beta
v2
Avatar
Fallback initials.
SDJR
Card
Container primitive.
Session
25 min · Deep
Focus block completed.
Progress
Separator

Above

Below

Table
UserXP
ash1,204
riv980
Skeleton (shadcn)
Loading placeholder.

Overlays

#overlays
Dialog
Modal.
Popover
Tooltip

Feedback

#feedback
Alert
Sonner toast
Global toast via sonner.

FX — Text

#fx-text
MatrixText
Character scramble on mount.
PRESENCE
ShinyText
Sweeping specular highlight.
Enter the room
NumberTicker
Animates from 0 to value.
0
TextReveal
Word-by-word fade on scroll.
Non-digital space is a human right.
ScrollVelocity
Scroll-driven horizontal marquee.

FX — Motion & Ambient

#fx-motion
Particles
Interactive drifting particles.
Meteors
Diagonal streaks.
LightRays
Ambient god-rays.
Ripple
Concentric pulse ring.
Marquee
Infinite scroll strip.
Deep workSilencePresenceFocusDepth
OrbitingCircles
Rotating orbit ring.

FX — Skeletons

#fx-skeleton
MapSkeleton
Placeholder for the DottedMap while it lazy-loads.
MeteorSkeleton
Placeholder for the Meteors field.