Composition Pattern Starter (Fernando Rojo Talk Based)

Learn and build with the LEGO blocks philosophy for React components

Live Demo →

---

✨ Features

• 🎯 True composition pattern - Based on Fernando Rojo's talk
• 🧩 Granular LEGO blocks - 13 Settings components, 8 Composer components
• 📚 Interactive learning - Live examples + before/after comparisons
• ⚡ React 19 + Compiler - Auto-optimization, no manual memoization
• 🎨 Modern stack - Next.js 15, TypeScript, Tailwind, shadcn/ui
• ✅ Production-ready - Tested, accessible, performant

---

🚀 Quick Start

# Clone
git clone https://github.com/francostan/composition-pattern-starter.git
cd composition-pattern-starter

# Install
npm install

# Run
npm run dev

Open http://localhost:3000

---

📖 Learn the Pattern

1. Theory → Read docs/Pattern.md
2. Practice → Try /examples
3. Compare → See /comparison
4. Build → Use as LEGO blocks!

---

🧩 What's Inside

Composer (8 blocks)

Message composer with attachments, character count, keyboard shortcuts

• Provider, Frame, Header, Input, Footer, AttachButton, Attachments, SendButton

Settings (13 blocks)

Flexible form/dialog system

• Provider, Dialog, Trigger, Content, Header, Body, Section, TextField, Toggle, Footer, ResetButton, SaveButton, useSettings

Pages

• / - Homepage with overview
• /examples - 3 configurations showing flexibility
• /comparison - Before/after + LEGO philosophy tabs

---

🛠️ Tech Stack

• Framework: Next.js 15 (App Router, Turbopack)
• React: 19.1.0 with React Compiler
• Language: TypeScript (strict mode)
• Styling: Tailwind CSS v4 + shadcn/ui
• Linting: Biome (replaces ESLint + Prettier)
• State: Context API + nuqs

---

📂 Structure

├── app/
│   ├── page.tsx              # Homepage
│   ├── examples/page.tsx     # Live examples
│   ├── comparison/page.tsx   # Comparisons
│   └── layout.tsx            # Root layout
├── components/
│   ├── composer/             # 8 files (1 per block)
│   ├── settings-dialog/      # 13 files (1 per block)
│   └── ui/                   # shadcn/ui components
├── docs/
│   ├── Pattern.md            # Composition guide
│   └── Rules.md              # UX guidelines
└── lib/
    └── utils.ts              # Helpers

---

🎨 Pattern in 3 Steps

// 1. Organize context: state/actions/meta
const value = {
  state: { /* data */ },
  actions: { /* functions */ },
  meta: { /* refs, config */ }
}

// 2. Export with dot notation
export const Component = {
  Provider,
  SubComponent,
}

// 3. Compose freely
<Component.Provider>
  <Component.SubComponent />
</Component.Provider>

See docs/Pattern.md for complete guide.

---

🧪 Examples

Full Settings Dialog

<Settings.Provider initialState={{ username: "john" }}>
  <Settings.Dialog>
    <Settings.Trigger><Button>Open</Button></Settings.Trigger>
    <Settings.Content>
      <Settings.Header title="Settings" />
      <Settings.Body>
        <Settings.TextField name="username" label="Username" />
        <Settings.Toggle name="darkMode" label="Dark mode" />
      </Settings.Body>
      <Settings.Footer>
        <Settings.ResetButton />
        <Settings.SaveButton />
      </Settings.Footer>
    </Settings.Content>
  </Settings.Dialog>
</Settings.Provider>

Inline Preferences (No Dialog!)

<Settings.Provider initialState={{ alerts: true }}>
  <Settings.Body>
    <Settings.Toggle name="alerts" label="Email alerts" />
    <Settings.Toggle name="push" label="Push notifications" />
  </Settings.Body>
  <Settings.SaveButton />
</Settings.Provider>

See /examples for more configurations.

---

🤝 Contributing

Contributions welcome! Here's how:

Quick Start

1. Fork the repo
2. Create branch: git checkout -b feature/my-feature
3. Make changes
4. Lint: npm run lint
5. Build: npm run build
6. Commit: git commit -m "Add my feature"
7. Push and create PR

Guidelines

• ✅ Follow existing patterns (state/actions/meta)
• ✅ Use TypeScript
• ✅ Keep components small and focused
• ✅ Add examples for new patterns
• ✅ Run lint before committing
• ✅ One feature per PR

Code Style

• Export with dot notation
• Organize as state/actions/meta
• No prop drilling
• Use React Compiler (no manual memoization)

Need Help?

Open an issue or reach out to @francostan

---

📝 Scripts

npm run dev      # Development server
npm run build    # Production build
npm run start    # Production server
npm run lint     # Run Biome linter
npm run format   # Format code with Biome

---

🚀 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Production
vercel --prod

Or connect your GitHub repo to Vercel for automatic deployments.

Environment Variables

None required for basic setup!

---

📄 License

MIT © francostan

See LICENSE for details.

---

🙏 Credits

• Pattern: Fernando Rojo's composition talk
• UI: shadcn/ui
• Inspiration: React community

---

🎯 Project Goals

This template serves three purposes:

1. 📚 Educational - Learn composition patterns through examples
2. 🛠️ Practical - Copy production-ready components
3. 🤝 Community - Open for contributions

---

💬 Community

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Author: @francostan

---

Made with ❤️ by francostan