shadcn/ui Guide

The shadcn/ui template provides a beautifully designed, accessible component system built on Radix UI primitives and styled with Tailwind CSS. It's the most feature-rich template with 24 CustomField types, 22 UI primitives, and 4 common components.

Components are organized in a structured directory under src/components/:

src/components/
├── common/
│   ├── button/
│   │   └── action-button.component.tsx
│   ├── dialog/
│   │   └── dialog-wrapper.component.tsx
│   ├── DynamicTable/
│   │   └── dynamic-table.component.tsx
│   ├── fields/
│   │   ├── assets/
│   │   │   ├── components/    # 24 individual fields
│   │   │   └── interface/     # Shared type definitions
│   │   └── cusInputField.component.tsx  # Barrel export
│   └── pagination/
│       └── pagination.component.tsx
└── ui/                         # 22 base primitives

Every field supports dual-mode: with or without react-hook-form. With the form prop, it integrates via FormField for validation/errors. Without it, it renders standalone with value / setValue.

<CustomField.Text
  form={form}
  name="fullName"
  labelName="Full Name"
  placeholder="Enter your name"
  required
/>

<CustomField.Text
  labelName="Full Name"
  value={name}
  setValue={setName}
/>

24 field components available via CustomField.*:

Four reusable building blocks shared across all templates:

The shadcn template uses Tailwind CSS for styling with class-variance-authority for variant management. Dark mode is handled by next-themes with class-based toggling.

Utility functions in src/lib/utils.util.ts provide:

• cn() — Merge Tailwind classes with clsx + tailwind-merge
• LabelAndPlaceholderTextFormat() — Auto-format labels to title case with preposition exceptions
• Date formatters: formatDate(), toMonthYear(), time12h(), time24h(), fullDateTime(), duration(), customFormatDate(), localDateTime()
• Security: maskString(), maskEmail(), passwordRules, isPasswordStrong()
• Toast notifications: ToastMessageShow(), toastSuccessMessage(), toastErrorMessage() — auto-injected via ToastProvider

When shadcn is selected, the generated project auto-configures:

• ToastProvider — react-hot-toast with themed <Toaster /> (always included)
• TooltipProvider — Radix tooltip functionality
• ThemeProvider — next-themes for dark mode (if enabled)

// src/providers/index.tsx (auto-generated)
'use client';
import { ThemeProvider } from '@/providers/theme.provider';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider>
      {children}
    </ThemeProvider>
  );
}