> ## Documentation Index > Fetch the complete documentation index at: https://docs.tryrekkal.com/llms.txt > Use this file to discover all available pages before exploring further. # Ui # 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`](../components.json) — the shadcn config: style, base color (`neutral`), path aliases, and the `lucide` icon library. * [`lib/utils.ts`](../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: ```bash theme={null} pnpm dlx shadcn@latest add ``` 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 `` (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: ```bash theme={null} pnpm dlx shadcn@latest add @magicui/ ``` 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 `` 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` `` 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](./agent-skills.md)) and covers Magic UI via the `@magicui` registry. The `web-design-guidelines` skill is also bundled for UI review.