Skip to main content

​
UI

How rekkal sets up its user interface with shadcn/ui, Magic UI, and Tailwind CSS.

​
Tailwind CSS

Tailwind (v4) is the styling layer. Global styles and the Tailwind entry live in app/globals.css; PostCSS is configured in postcss.config.mjs.

​
shadcn/ui

shadcn/ui provides unstyled component primitives you copy into the repo and own — there is no runtime component-library dependency. It is already initialized:
  • components.json — the shadcn config: style, base color (neutral), path aliases, and the lucide icon library.
  • lib/utils.ts — the cn class-merge helper that generated components import.
  • components/ui/ — where installed primitives land (see the list below).
Add more components with the CLI:
For example, pnpm dlx shadcn@latest add card dialog. Compose your app’s own components from these primitives in components/ (outside ui/). The installed primitives include button, card, input, label, badge, accordion, separator, and sonner (toasts). Note the base-nova style is built on Base UI primitives, not Radix — compose links styled as buttons with buttonVariants() on a <Link> (there is no asChild).

​
Magic UI

Magic UI supplies animated marketing components (hero sections, marquees, and similar) through the same shadcn CLI via the @magicui registry — no separate install is needed:
The landing page uses marquee (platform coverage), blur-fade (scroll/entrance animation), and animated-shiny-text (hero badge). These pull in motion for animation.

​
Dark mode and toasts

Theme switching uses next-themes: the root layout wraps the app in ThemeProvider (components/theme-provider.tsx) and <html> carries suppressHydrationWarning. The header’s ThemeToggle (components/theme-toggle.tsx) flips light/dark, and the visible icon is chosen by CSS from the dark class to avoid a hydration flash. The sonner <Toaster /> is mounted once in the root layout; call toast(...) from any client component.

​
Further reading

The shadcn skill is pre-bundled (see agent-skills.md) and covers Magic UI via the @magicui registry. The web-design-guidelines skill is also bundled for UI review.