UI Primitives

Component Library

Every component ships fully typed and prop-driven. Customize colors via @theme tokens in globals.css. No component edits needed.

8Primitives

5Sections

3Hooks

25+Total

Explore components Back to home

01Button 02Badge 03Text 04Card 05Tokens 06System Pages

01: Primitives

Button

VARIANTS

SIZES

DECK COMBOS

AS LINKS

View all components Back to home

Pass an href prop and Button renders as next/link automatically.

02: Primitives

Badge

COLOR VARIANTS

OrangeYellowInkDim

DECK CONTEXT

New dropLimitedIn stockSold outFeaturedTrending

03: Primitives

Text

BODY

Regular paragraph copy. Descriptions, readable blocks.

IBM Plex Mono13pxline-height 1.7weight 400

Rough-cut component copy at its finest. Use this for descriptions, feature explanations, and any block of readable text. Scales gracefully and pairs beautifully with Permanent Marker display headings.

<Text variant="body">Your content here.</Text>

CAPTION

Dates, meta info, footnotes, helper hints.

IBM Plex Mono12pxweight 400dim color

Published March 16, 2026 . 3 min read . Skate Culture

<Text variant="caption">Published March 16, 2026</Text>

LABEL

Section sub-labels, categories, uppercase identifiers.

IBM Plex Mono10pxuppercaseletter-spacing

default

Features

orange

New Section

<Text variant="label">Features</Text>

CODE

File paths, token names, inline code references.

IBM Plex Mono12pxorangeinline

src/app/globals.css

@/components/ui/Button

variant="primary"

<Text variant="code">src/app/globals.css</Text>

04: Primitives

Card

01⬛Design

Full Design System

Color tokens, type scale, spacing, and rough-edge components wired to Tailwind v4 CSS custom properties.

02▦Components

25+ Components

Buttons, badges, cards, inputs, stat tiles, nav, modals. All in the DECK aesthetic with zero extra setup.

03🔐Auth

Auth Pages

USAGE

<Card card={{
  icon: '⬛',
  tag: 'Design',
  tagVariant: 'orange',
  title: 'Full Design System',
  description: 'Color tokens...',
  num: '01',
}} />

05: Theme System