component-design

Component Design

Build accessible, reusable UI components with Tailwind CSS, Shadcn/UI, and TypeScript.

When to Use

• User needs to create a reusable UI component (button, card, modal, table)
• User wants to implement a design system with consistent variants
• User needs data tables with pagination and sorting
• User wants loading skeletons, error states, or empty states
• User needs accessible components with ARIA labels and keyboard navigation

Available Operations

1. Create variant-based components (Button, Badge, Input)
2. Build compound components (Card with Header/Content/Footer)
3. Implement data tables with TanStack Table
4. Create async content wrappers (loading/error/empty states)
5. Add Shadcn/UI components to the project

Multi-Step Workflow

Step 1: Set Up Shadcn/UI (If Not Already Installed)

npx shadcn@latest init
npx shadcn@latest add button card table badge input dialog
npm install @tanstack/react-table clsx tailwind-merge

Create a utility for merging Tailwind classes:

// src/lib/utils.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Step 2: Create a Variant-Based Button Component

// src/components/ui/Button.tsx
import { cn } from '@/lib/utils';

const variants = {
  primary: 'bg-blue-600 text-white hover:bg-blue-700',
  secondary: 'bg-gray-100 text-gray-700 hover:bg-gray-200',
  danger: 'bg-red-600 text-white hover:bg-red-700',
  ghost: 'bg-transparent hover:bg-gray-100',
} as const;

const sizes = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg',
} as const;

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: keyof typeof variants;
  size?: keyof typeof sizes;
  loading?: boolean;
}

export function Button({
  variant = 'primary',
  size = 'md',
  loading = false,
  children,
  disabled,
  className,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        'rounded font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
        variants[variant],
        sizes[size],
        (disabled || loading) && 'opacity-50 cursor-not-allowed',
        className
      )}
      disabled={disabled || loading}
      aria-busy={loading}
      {...props}
    >
      {loading ? <span className="animate-spin inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full" /> : children}
    </button>
  );
}