A tokenized, themeable Next.js (App Router) landing page template built with Tailwind CSS v4. Includes an MDX blog, changelog, and command palette search.
Quickstart · What's included · Theming · Customize content
bun install
bun devOpen http://localhost:3000.
- Theme tokens: semantic Tailwind tokens powered by CSS variables (
bg-canvas,text-fg,border-border, …). - Theme + mode controls: theme picker + dark/light/system toggle (persisted in
localStorage). - Blog: MDX posts, tags, RSS, and full-text search + command palette.
- Personal home: intro, latest posts, and projects.
The whole UI is driven by semantic tokens. Theme selection is controlled at the root <html> element:
data-theme:default|indigo| (optional DaisyUI-style aliases)data-mode:dark|light|system
Defaults come from:
NEXT_PUBLIC_THEMENEXT_PUBLIC_MODE
Example:
NEXT_PUBLIC_THEME=indigo NEXT_PUBLIC_MODE=light bun devIf you pick a theme/mode in the UI, the persisted selection wins on the next load.
- Add a new
html[data-theme='…']block inapp/globals.css. - Assign semantic tokens:
--color-canvas,--color-surface,--color-border--color-fg,--color-muted,--color-subtle--color-accent,--color-accentHover
- Keep components using semantic tokens only — everything updates automatically.
Theme names (DaisyUI aliases)
light,dark,cupcake,bumblebee,emerald,corporate,synthwave,retro,cyberpunk,valentine,halloween,garden,forest,aqua,lofi,pastel,fantasy,wireframe,black,luxury,dracula,cmyk,autumn,business,acid,lemonade,night,coffee,winter,dim,nord,sunset
You can enable or disable specific features using environment variables.
| Variable | Description | Default |
|---|---|---|
NEXT_PUBLIC_FEATURE_BLOG |
Enable blog routes and links | true |
NEXT_PUBLIC_FEATURE_SEARCH |
Enable command palette search | true |
NEXT_PUBLIC_FEATURE_THEME_SWITCHER |
Enable theme/mode controls | true |
NEXT_PUBLIC_FEATURE_LANDING_* |
Enable landing page sections (e.g. NEXT_PUBLIC_FEATURE_LANDING_PRICING) |
true |
Supported landing sections: HERO, LOGO_CLOUD, FEATURES, HOW_IT_WORKS, TESTIMONIALS, PRICING, FAQ, CTA.
Edit src/config/personal.ts to update:
- Navigation
- Features
- Steps
- Testimonials
- Pricing tiers
- FAQs
- Tailwind base palette comes from
tailwindcss/colors(seetailwind.config.ts). - Theme overrides use Tailwind v4 color variables (
--color-*) so alpha utilities likebg-surface/40keep working.