benzuko

Components

Organized by Atomic Design. All are typed; client components are marked.

Atoms

| Component | Props | Notes | | — | — | — | | Button | variant?: 'solid'\|'ghost'\|'outline', size?: 'sm'\|'md'\|'lg', native button props | Focus-visible ring, forwards ref | | Input | native input props | Themed, forwards ref | | StatusBadge | status: TradeStatus | Colored escrow status pill | | Tag | children | Neutral mono tag | | Spinner | className? | Accessible role="status" | | Skeleton | className? | Pulse placeholder | | Logo | className?, showWord? | Inline-SVG monogram + wordmark |

Molecules

| Component | Props | | — | — | | StatCard | label, value: ReactNode, hint? | | FormField | label, error?, children | | OfferRow (client) | offer: Offer, onTrade: (offer) => void | | NavLink (client) | href, icon?, children — active via usePathname |

Organisms

| Component | Notes | | — | — | | Navbar (client) | Fixed, blur, marketing links + CTAs | | Footer | Full sitemap columns | | Hero (client) | Framer Motion entrance + stat strip | | OrderBook (client) | React Query offers, buy/sell tabs, retry, skeleton | | ToastRegion (client) | Animated toast stack from useToastStore |

Templates

| Component | Notes | | — | — | | MarketingLayout | Navbar + main + Footer | | AppShell (client) | Sidebar + topbar, responsive drawer |

Providers & boundaries

| Component | Notes | | — | — | | QueryProvider | Instantiates React Query client once | | ThemeProvider | Syncs Zustand theme to <html> | | ErrorBoundary | Class boundary; logs via lib/logger |