react-patterns

React Component Patterns

Help users write well-structured React components with clean composition, proper state management, and maintainable patterns. Assumes Next.js + Tailwind CSS environment.

Component Composition

Prefer composition over props overload

Instead of a component with many conditional props, compose smaller focused components together.

Avoid — prop-heavy monolith:

<Card
  title="Revenue"
  subtitle="Monthly"
  icon="chart"
  showBorder
  variant="highlighted"
  headerAction={<Button>Export</Button>}
  footer={<Link>View details</Link>}
/>

Prefer — composable parts:

<Card>
  <Card.Header>
    <Card.Title>Revenue</Card.Title>
    <Card.Subtitle>Monthly</Card.Subtitle>
    <Button>Export</Button>
  </Card.Header>
  <Card.Body>
    <RevenueChart data={data} />
  </Card.Body>
  <Card.Footer>
    <Link href="/revenue">View details</Link>
  </Card.Footer>
</Card>

Compound Components

Use compound components when a group of components share implicit state and always work together (tabs, accordions, selects, menus).

"use client"
import { createContext, useContext, useState, type ReactNode } from 'react'

type TabsContextType = { activeTab: string; setActiveTab: (id: string) => void }
const TabsContext = createContext<TabsContextType | null>(null)

function useTabs() {
  const ctx = useContext(TabsContext)
  if (!ctx) throw new Error('Tab components must be used within <Tabs>')
  return ctx
}

function Tabs({ defaultTab, children }: { defaultTab: string; children: ReactNode }) {
  const [activeTab, setActiveTab] = useState(defaultTab)
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div>{children}</div>
    </TabsContext.Provider>
  )
}

function TabList({ children }: { children: ReactNode }) {
  return <div className="flex gap-1 border-b border-gray-200">{children}</div>
}

function Tab({ id, children }: { id: string; children: ReactNode }) {
  const { activeTab, setActiveTab } = useTabs()
  return (
    <button
      onClick={() => setActiveTab(id)}
      className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
        activeTab === id
          ? 'border-blue-600 text-blue-600'
          : 'border-transparent text-gray-500 hover:text-gray-700'
      }`}
    >
      {children}
    </button>
  )
}

function TabPanel({ id, children }: { id: string; children: ReactNode }) {
  const { activeTab } = useTabs()
  if (activeTab !== id) return null
  return <div className="py-4">{children}</div>
}

Tabs.List = TabList
Tabs.Tab = Tab
Tabs.Panel = TabPanel

export { Tabs }