UI & Components

Shadcn UI

We leverage Shadcn UI for our base component library. These components are located in src/components/ui/.

Why Shadcn? Unlike traditional component libraries (like MUI or AntD), Shadcn UI provides raw, accessible React components (built on Radix UI) directly into our source code. This grants us absolute control over the markup and styling via Tailwind CSS.

Tailwind CSS

All styling is managed through Tailwind CSS. We use utility classes extensively.

• Theme Configuration: The tailwind.config.ts file extends the default theme with custom CSS variables (e.g., --primary, --background) to support seamless Light/Dark mode switching.
• Utility Function (cn): We use a cn() utility function combining clsx and tailwind-merge to conditionally join Tailwind class names without specificity conflicts.

import { cn } from "@/lib/utils"

export function CustomButton({ className, ...props }) {
  return (
    <button className={cn("bg-primary text-white rounded-md", className)} {...props} />
  )
}