Frontend Components

Structure React components by organizing primitives and complex components under packages/ui, using functional component definitions with TypeScript Props interfaces, and composing primitives into complex components like ArticleCard. This approach ensures consistency and reusability across your Next.js App Router application.

Use class-variance-authority (CVA) to define robust styling variants for your React components, then merge classes with the cn() utility. This pattern eliminates duplicated styling logic and ensures type-safe variant management across your design system.

Server Components are the default in Next.js 19 App Router; use them for components that don't require interactivity. Add the 'use client' directive only to components needing client-side features like state or event handlers, optimizing performance while leveraging React's latest capabilities.

Yes. Centralize reusable components in packages/ui and import them as @imkdw-dev/ui across apps/blog and other applications. This shared design system reduces duplication and maintains UI consistency enterprise-wide.

Create Props interfaces for each component, naming them [ComponentName]Props, and extend them with CVA variant types. Export these interfaces so consumers can type-check their component usage, catching prop errors at build time rather than runtime.

CVA excels at CSS class variant management but requires your styling to live in CSS files or Tailwind classes. If your design system uses runtime CSS-in-JS, you'll need to adapt the pattern or combine CVA with your CSS-in-JS library for full consistency.