Skip to main content

UI Components Location

Directory Structure​

src/components/
├── ui/                    # Base UI components (shadcn/ui)
│   ├── button.tsx
│   ├── input.tsx
│   ├── card.tsx
│   ├── form.tsx
│   └── ...
│
├── forms/                 # Form-specific components
│   ├── formComponents/    # Reusable form fields
│   │   ├── InputComponentForm.tsx
│   │   ├── SingleSelectForm.tsx
│   │   └── ...
│   └── ...
│
├── common/               # Shared/common components
│   ├── app-sidebar.tsx
│   ├── navbar.tsx
│   └── ...
│
├── tables/               # Table components
│   ├── common/          # Shared table utilities
│   └── ...
│
└── [feature]/            # Feature-specific components
    └── ...

Component Categories​

  1. Base UI Components (src/components/ui/)

    • Primitive components (Button, Input, Card)
    • Built on Radix UI
    • Reusable across the app

  2. Form Components (src/components/forms/)

    • Form-specific components
    • Integrated with React Hook Form
    • Validation-aware

  3. Feature Components (src/components/[feature]/)

    • Domain-specific components
    • Business logic included
    • Not reusable outside feature

  4. Common Components (src/components/common/)

    • Shared across features
    • Layout components
    • Navigation components