Frontend
Styling & Theming
Styling with Tailwind, shadcn/ui, and the theme system.
Overview
NextBento uses:
- Tailwind CSS — Utility-first styling
- shadcn/ui — Pre-built components
- CSS variables — For theming (light/dark)
- Theme system — Optional theme customizer with presets
Theme Variables
Colors are defined in app/globals.css under :root and .dark. Modify these to change the color scheme.
Theme System
lib/theme-customizer/ provides:
- theme-system.ts — Theme switching logic
- shadcn-ui-theme-presets.ts — shadcn color presets
- tweakcn-theme-presets.ts — tweakcn presets
Set ACTIVE_THEME_ID in config to enable a preset. The theme customizer (if used) lets users pick themes from the settings/appearance page.
Adding Components
Use the shadcn CLI to add new components:
pnpm dlx shadcn@latest add button
Dark Mode
The theme supports dark mode via the dark class on the root element. Toggle it with components/mode-toggle.tsx in your layout or header.
Customization
- Colors — Edit CSS variables in
globals.css - Fonts — Configure in
tailwind.config.tsandlayout.tsx - Components — Use shadcn or tweakcn presets for consistent styling