Creator

shadcn/ui

Creator uses shadcn/ui with the New York style and neutral base color. Components are installed to components/ui/.

Adding new components

npx shadcn@latest add dialog

This downloads the component source code into components/ui/dialog.tsx. You own the code and can modify it.

Installed components

The project includes a wide range of pre-installed shadcn/ui components including:

Layout: Card, Separator, Scroll Area
Forms: Button, Input, Label, Select, Switch, Radio Group
Feedback: Dialog, Dropdown Menu, Tooltip, Accordion
Navigation: Navigation Menu, Collapsible
Data: Avatar, Badge

Shared application components

Located in components/shared/:

Component	File	Description
`Logo`	`Logo.tsx`	App logo with name, links to `/`
`LogoSVG`	`LogoSVG.tsx`	SVG logo icon
`Footer`	`footer.tsx`	Site footer with link columns from `FooterMenu` config
`ThemeToggle`	`themeToggle.tsx`	Light/dark mode toggle button
`Analytics`	`analytics.tsx`	Conditional analytics script loader
`CookieConsent`	`cookie-consent.tsx`	Cookie consent banner (3 variants: default, small, mini)
`DashboardHeader`	`DashboardHeader.tsx`	Page header with title and description
`DashboardCard`	`DashboardCard.tsx`	Linked card with icon for dashboard grids
`StatCard`	`stat-card.tsx`	Admin stat card with area chart and growth badge
`TableUser`	`table-user.tsx`	User avatar + name + email row for tables
`StatusBadge`	`StatusBadge.tsx`	Subscription status badge (active, trialing, past_due, etc.)
`VerifiedBadge`	`VerifiedBadge.tsx`	Email verified/unverified badge

Styling

Tailwind CSS v4 with CSS-first configuration (no tailwind.config.ts)
OKLCH colors defined as CSS custom properties in app/globals.css
Dark mode via next-themes with class strategy
cn() utility from lib/utils.ts for merging Tailwind classes (uses clsx + tailwind-merge)

Charts

Admin dashboard charts use Recharts (recharts@2.15.4) wrapped in shadcn/ui's ChartContainer component. The StatCard component renders an AreaChart with gradient fill.

Animations

motion (motion@12.34.3) — Framer Motion for component animations
gsap (gsap@3.13.0) — GreenSock for complex timeline animations
tw-animate-css — Tailwind CSS animation utilities

UI Components