Skip to content

Component Documentation

The Freeze Design frontend uses a library of reusable React components.

Storybook

Browse and interact with components in our Storybook (Storybook 10, framework @storybook/nextjs-vite; addons: links, a11y, docs):

Open Storybook →

Storybook provides: - Visual component catalog - Interactive prop controls - Accessibility testing (@storybook/addon-a11y) - Component states and variants

Run it locally

cd frontend && npm run storybook   # http://localhost:6006

TypeScript API

For TypeScript type definitions and utilities:

Open TypeDoc →

Component Categories

Layout Components

  • Header - Main site header with navigation (components/header/)
  • Footer - Site footer with links
  • TopBar - Teal accent bar
  • Logo - Brand logo

Product Components

  • ProductCard - Product listing card (components/products/; uses next/image with fill + responsive sizes)
  • ColorSwatches - Color selection
  • SizeSelector - Size selection
  • QuantitySelector - Quantity input
  • PriceDisplay - Price formatting

Designer Components (components/ProductDesigner/)

  • Designer - Main canvas component
  • ToolNav - Design tool navigation
  • TextTab - Text editing tools
  • ImageTab - Image upload/editing
  • ShapesTab - Shape tools
  • ViewSwitcher - Front/back view switching

Admin Components (components/admin/)

  • AdminNav - Admin sidebar: fixed w-64 sidebar on desktop (hidden lg:block), floating menu button with overlay drawer on mobile/tablet
  • AdminDataTable, AdminFormField, AdminToast, AdminConfirmDialog - Admin UI primitives

Providers (components/providers/)

  • PostHogProvider - Analytics provider; mounted only on non-admin routes (admin sessions are excluded from analytics)
  • QueryProvider, SentryProvider, MotionProvider

Form Components

  • Toast - Notification messages

Sections