Component Documentation

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

Storybook

Browse and interact with components in our Storybook:

Open Storybook →

Storybook provides: - Visual component catalog - Interactive prop controls - Accessibility testing - Component states and variants

TypeScript API

For TypeScript type definitions and utilities:

Open TypeDoc →

Component Categories

Layout Components

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

Product Components

• ProductCard - Product listing card
• ColorSwatches - Color selection
• SizeSelector - Size selection
• QuantitySelector - Quantity input
• PriceDisplay - Price formatting

Designer Components

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

Form Components

• Toast - Notification messages

Sections

• Component Library - Component guidelines