My Slice Library — Component Architecture

A practical, scalable setup for a reusable TypeScript + Tailwind v4 + daisyUI + Framer Motion component library, with Storybook and clean import paths. This README explains the folder layout and what each part is for, plus a few usage tips.

Folder Structure

• primitives/
  • accessibility + behavior; no styling → portable across themes.
• ui/
  • styling + variants (Tailwind/daisyUI) → where “btn-primary / outline / sizes” live.
• patterns/
  • composed widgets (Card + Button + Icon).
• slices/
  • page sections (grid, headers, Framer Motion).
• providers/
  • makes your lib router-agnostic (consumer plugs in NextLink once).

Component layering pipeline

1. Primitives define the smallest accessible, behavior-focused building blocks (buttons, typographic elements, motion-ready wrappers).
2. UI components wrap primitives with Tailwind/daisyUI tokens, exposing the design system variants clients see in Storybook controls.
3. Patterns compose multiple UI components into reusable widgets that demonstrate interaction flows (pricing cards, testimonial blocks, etc.).
4. Slices assemble patterns into full-page sections that can be dropped into marketing sites, dashboards, or campaign landing pages.

This bottom-up path keeps the contract between layers explicit: primitives stay portable, UI components stay brand-aware, patterns stay story-driven, and slices stay page-ready. When you add a new piece, start by codifying the primitive behavior, then layer on styling, composition, and page context as you move toward slices.