UI Primitives

Component Library

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

8Primitives

5Sections

3Hooks

25+Total

Explore components Back to home

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

01: Primitives

Button

VARIANTS

SIZES

DINER 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

RedTealChromeInk

DINER CONTEXT

Daily specialFresh brewedCounter seatTakeoutNew itemStaff pickClassic

03: Primitives

Text

BODY

Regular paragraph copy. Descriptions, readable blocks.

DM Sans14pxline-height 1.6weight 400

Counter-seat copy at its finest. Use this for descriptions, feature explanations, and any block of readable text. Pairs well with the Righteous display headings.

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

CAPTION

Dates, meta info, footnotes, helper hints.

Published March 16, 2026 / 3 min read / Diner Themes

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

LABEL

Section sub-labels, categories, uppercase identifiers.

default

Features

red

New Section

CODE

File paths, token names, inline code references.

src/app/globals.css

@/components/ui/Button

variant="primary"

04: Primitives

Card

🎨Design

Full Design System

Tokens, primitives, and utilities in a single Tailwind v4 config. Colors, spacing, and type all locked in.

🧩Components

UI Primitives

Button, Badge, Card, Text, Input, Modal. All styled with the BOOTH palette and ready to compose.

🔐Auth

Auth Pages

USAGE

<Card card={{
  icon: '🎨',
  tag: 'Design',
  tagVariant: 'red',
  title: 'Full Design System',
  description: 'Tokens, primitives, and utilities...',
}} />

05: Theme System