# Amplify Canvas Design System

> Canvas is the unified design system for Amplify products (Brand, Creator, Atmosphere). It ships React components, design tokens, and templates as `@amplify-ai/ui`, `@amplify-ai/tokens-*`, and `@amplify-ai/templates`.

Each component below has a per-component rule sheet listing variants, props, defaults, and allowed values. Use these to compose UI without inventing components or hardcoding values.

## Components

- [ActionFooter](llms/ActionFooter.md): 7 props
- [AddonTeaser](llms/AddonTeaser.md): 2 props
- [AnimatedNumber](llms/AnimatedNumber.md) 🚧: 6 props
- [AnnouncementBar](llms/AnnouncementBar.md) ⚠️: 3 variants, 6 props
- [Avatar](llms/Avatar.md): 3 sizes, 5 props
- [Badge](llms/Badge.md): 6 variants, 2 sizes, 5 props
- [BarChart](llms/BarChart.md) ⚠️: 9 props
- [BentoGrid](llms/BentoGrid.md) 🚧: 5 props
- [Breadcrumb](llms/Breadcrumb.md): 2 props
- [Button](llms/Button.md): 5 variants, 4 sizes, 6 props
- [Card](llms/Card.md): 5 variants, 3 props
- [ChatInput](llms/ChatInput.md) 🚧: 15 props
- [Checkbox](llms/Checkbox.md): 6 props
- [Chip](llms/Chip.md): 4 variants, 2 sizes, 5 props
- [CollapsibleCard](llms/CollapsibleCard.md): 6 props
- [CollapsibleNavGroup](llms/CollapsibleNavGroup.md): 8 props
- [CollapsibleSection](llms/CollapsibleSection.md): 4 props
- [CommandPalette](llms/CommandPalette.md) ⚠️: 8 props
- [ComparisonTable](llms/ComparisonTable.md) ⚠️: 3 props
- [ContentTypeCard](llms/ContentTypeCard.md): 9 props
- [ContextMenu](llms/ContextMenu.md) ⚠️: 5 props
- [CTABand](llms/CTABand.md) ⚠️: 3 variants, 6 props
- [DataTable](llms/DataTable.md): 8 props
- [DateRangePicker](llms/DateRangePicker.md) 🚧: 13 props
- [Dialog](llms/Dialog.md): 7 props
- [Drawer](llms/Drawer.md) ⚠️: 3 sizes, 12 props
- [EmptyState](llms/EmptyState.md): 6 variants, 6 props
- [ErrorState](llms/ErrorState.md) ⚠️: 4 variants, 8 props
- [FeatureGrid](llms/FeatureGrid.md) ⚠️: 3 props
- [FilePicker](llms/FilePicker.md) 🚧: 3 variants, 17 props
- [FlexiSelector](llms/FlexiSelector.md): 5 props
- [Funnel](llms/Funnel.md) ⚠️: 7 props
- [GoalCard](llms/GoalCard.md): 7 props
- [Heatmap](llms/Heatmap.md) ⚠️: 2 variants, 10 props
- [Hero](llms/Hero.md) ⚠️: 3 variants, 8 props
- [HoverCard](llms/HoverCard.md) ⚠️: 8 props
- [IconButton](llms/IconButton.md): 3 variants, 4 sizes, 4 props
- [Input](llms/Input.md): 3 props
- [InsightBanner](llms/InsightBanner.md): 2 props
- [KPI](llms/KPI.md) ⚠️: 3 sizes, 13 props
- [LineChart](llms/LineChart.md) ⚠️: 10 props
- [LoadingState](llms/LoadingState.md) ⚠️: 6 variants, 3 sizes, 5 props
- [LogoCloud](llms/LogoCloud.md) ⚠️: 4 props
- [MarkdownEditor](llms/MarkdownEditor.md) 🚧: 14 props
- [MasonryGrid](llms/MasonryGrid.md) 🚧: 4 props
- [MessageBubble](llms/MessageBubble.md) 🚧: 3 variants, 10 props
- [MetricCard](llms/MetricCard.md): 8 props
- [PackageCard](llms/PackageCard.md): 5 props
- [Pagination](llms/Pagination.md): 4 props
- [Parallax](llms/Parallax.md) 🚧: 4 props
- [PieChart](llms/PieChart.md) ⚠️: 2 variants, 8 props
- [PricePill](llms/PricePill.md): 3 props
- [PricingTable](llms/PricingTable.md) ⚠️: 2 props
- [ProductUrlInput](llms/ProductUrlInput.md): 4 props
- [ProgressBar](llms/ProgressBar.md): 3 variants, 3 props
- [ProgressRing](llms/ProgressRing.md) ⚠️: 5 variants, 4 sizes, 8 props
- [Quote](llms/Quote.md) ⚠️: 3 sizes, 5 props
- [RecoReason](llms/RecoReason.md): 2 props
- [Reveal](llms/Reveal.md) 🚧: 9 props
- [ScrapeAnimation](llms/ScrapeAnimation.md): 1 props
- [ScriptPreviewCard](llms/ScriptPreviewCard.md): 3 props
- [ScrollProgress](llms/ScrollProgress.md) 🚧: 2 variants, 9 props
- [SearchInput](llms/SearchInput.md): 6 props
- [Section](llms/Section.md) ⚠️: 4 variants, 7 props
- [Select](llms/Select.md): 4 props
- [Separator](llms/Separator.md): 2 props
- [Sheet](llms/Sheet.md) ⚠️: 10 props
- [Skeleton](llms/Skeleton.md): 3 variants, 3 props
- [Slider](llms/Slider.md): 3 props
- [Sparkline](llms/Sparkline.md) ⚠️: 3 variants, 8 props
- [SplitPane](llms/SplitPane.md) 🚧: 12 props
- [Stagger](llms/Stagger.md) 🚧: 8 props
- [StatLarge](llms/StatLarge.md) ⚠️: 7 props
- [StatusTag](llms/StatusTag.md): 2 sizes, 5 props
- [Stepper](llms/Stepper.md): 3 variants, 3 props
- [StepPill](llms/StepPill.md): 2 props
- [Switch](llms/Switch.md): 6 props
- [Tabs](llms/Tabs.md): 5 props
- [Testimonial](llms/Testimonial.md) ⚠️: 3 variants, 6 props
- [Textarea](llms/Textarea.md): 2 props
- [Timeline](llms/Timeline.md): 2 props
- [Toast](llms/Toast.md): 4 variants, 4 props
- [Tooltip](llms/Tooltip.md): 4 props
- [TrustBar](llms/TrustBar.md): 1 props
- [TypingIndicator](llms/TypingIndicator.md) 🚧: 3 sizes, 5 props
- [WalletCard](llms/WalletCard.md): 5 props
- [Wizard](llms/Wizard.md) 🚧: 2 variants, 10 props

## Tokens

- `@amplify-ai/tokens-foundation`: primitives (color, spacing, typography, shadow, radius, motion)
- `@amplify-ai/tokens-brand`: Brand product theme
- `@amplify-ai/tokens-atmosphere`: Atmosphere product theme
- `@amplify-ai/tokens-creator`: Creator product theme

## Programmatic access

- MCP server: `@amplify-ai/mcp-server` exposes the same data via stdio + HTTP transports.
- JSON contracts: `dist/contracts/<Component>.json` — TS-API-extracted, single source of truth.
- JSON mirror: `dist/llms.json` for tools that prefer flattened structured data.
