Introduction

Plainform includes a comprehensive component library organized by purpose, from basic UI elements to complex feature components. All components follow consistent patterns and are built with TypeScript, Tailwind CSS, and Radix UI primitives.

Component Categories

UI Components

Basic building blocks in components/ui/:

• Form elements (Button, Input, Label)
• Layout (Card, Separator, Sheet)
• Overlays (Dialog, Popover, DropdownMenu)
• Navigation (Tabs, ScrollArea)
• Feedback (Skeleton, Avatar, ProgressBar)

Feature Components

Business logic components in components/:

• Hero - Landing page hero section
• Pricing - Pricing cards and sections
• Testimonials - Customer testimonials
• FAQ - Frequently asked questions
• Newsletter - Email subscription form
• Footer - Site footer with links
• Navigation - Main navigation bar

Utility Components

Helper components for common tasks:

• ImageWithFallback - Image with error handling
• ModeToggle - Dark/light theme switcher
• Logo - Site logo component
• SvgFinder - SVG icon loader

Provider Components

Context providers in components/providers/:

• ThemeProvider - Dark mode management
• FumadocsProvider - Documentation UI

Component Patterns

Interface Naming

All interfaces use I prefix:

export interface IExampleProps {
  title: string;
  isActive?: boolean;
}

export function Example({ title, isActive }: IExampleProps) {
  return <div>{title}</div>;
}

Styling with cn()

Merge Tailwind classes using the cn() utility:

import { cn } from '@/lib/utils';

export function Example({ className }: { className?: string }) {
  return (
    <div className={cn('base-classes', className)}>
      Content
    </div>
  );
}

Client vs Server Components

Use 'use client' only when needed:

'use client';

import { useState } from 'react';

export function ClientComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Server components (default):

export function ServerComponent() {
  return <div>Server rendered</div>;
}

Localization

All copy is stored in locales/en.json:

import locale from '@/locales/en.json';

export function Hero() {
  const heroLocale = locale?.homePage?.heroSection;
  
  return (
    <div>
      <h1>{heroLocale?.title}</h1>
      <p>{heroLocale?.description}</p>
    </div>
  );
}

Component Structure

components/
├── ui/                 # Basic UI primitives
├── features/           # Feature-specific components
├── blog/               # Blog components
├── documentation/      # Docs components
├── pricing/            # Pricing components
├── user/               # User/auth components
├── providers/          # Context providers
├── svgs/               # SVG components
├── hooks/              # Custom hooks
└── styles/             # Global CSS

Next Steps

Explore specific component categories:

• User Interface Components - Basic UI elements
• Patterns - Common component patterns
• Utility Components - Helper components