Customization
Customize the shadcn admin dashboard template by updating theme config, design tokens, navigation, branding, routes, and demo content.
Theme config
The main theme defaults are controlled from src/configs/themeConfig.ts. Update this file when you want to change the default template name, home route, theme preset, font, radius, scale, layout, or sidebar behavior.
Theme config options
| Option | Values | Purpose |
|---|---|---|
| templateName | String | Controls the product name shown in template surfaces. |
| homePageUrl | Route path | Defines the default page users should land on after entering the app. |
| settingsCookieName | String | Sets the cookie key used to persist customizer settings. |
| mode | system, light, dark | Sets the default color mode before the user changes it. |
| themePreset | default, caffeine, claude, corporate, ghibli-studio, marvel, material-design, modern-minimal, nature, perplexity, slack, pastel-dreams | Controls the default theme preset used by the admin UI. |
| font | geist, inter, roboto, nunito-sans, lora, geist-mono, space-grotesk, josefin-sans, poppins, open-sans, montserrat, raleway, ubuntu, noto-sans, archivo variants | Controls the default font family used across the template. |
| radius | none, sm, md, lg | Controls the default component border radius. |
| scale | sm, md, lg | Controls the default UI density and sizing scale. |
| layout | compact, full | Controls whether page content uses a constrained or full-width layout. |
| sidebarVariant | default, inset, floating | Controls the visual style of the dashboard sidebar. |
| sidebarCollapsible | offcanvas, icon, none | Controls how the sidebar collapses on supported layouts. |
| sidebarOpen | true, false | Sets whether the sidebar is open by default. |
Changing the default theme
- Get CSS variables for your theme from /utils/themePresets.ts and update
src/app/globals.cssto change the default theme preset. - Change
font,radius, andscalewhen you want a different default visual style. - Change
layout,sidebarVariant,sidebarCollapsible, andsidebarOpenwhen you want to adjust the default dashboard shell.
Common customization areas
| Area | Where to update | What changes |
|---|---|---|
| Theme | src/configs/themeConfig.ts and src/app/globals.css | Default theme settings, theme presets, radius, scale, chart colors, sidebar tokens, light mode, and dark mode. |
| Navigation | src/configs/navConfig.tsx | Sidebar groups, links, icons, external links, and nested menu items. |
| Branding | Logo, favicon, metadata, auth pages | App name, visual identity, social preview text, and auth page brand surfaces. |
| Pages | src/app and src/views | Routes, page layouts, sections, and feature-specific UI. |
| Command palette | src/assets/data/search.ts | Quick navigation results and searchable admin actions. |
Recommended order
- Update brand logo, favicon, and metadata.
- Update
themeConfigdefaults for template name, home route, theme preset, font, layout, and sidebar. - Remove dashboard pages, apps, and demos your product does not need.
- Update sidebar navigation and command palette entries.
- Replace mock data with your own data layer after the UI structure is stable.
Adding a new page
- Create a new view folder inside
src/views/new-page. - Create a matching route inside
src/app/(pages)/new-page/page.tsx. - Import the view in the
/new-pageroute. - Add the menu item to
src/configs/navConfig.tsx. - Optionally add in
src/assets/data/search.tsfor the command palette.