Make it your brand
Where to change the dashboard's name, the logo, the brand colour, the fonts, the favicon and the footer credit.
Run the dashboard with yarn dev while you edit: the page reloads each time you save.
| To change | Edit |
|---|---|
| The name, browser tab title and description | The Metadata block in messages/common/en.json and messages/common/ar.json |
| The name on the sign-in and landing pages | Login.title and Hero.title in messages/auth/en.json and messages/auth/ar.json |
| The logo | public/assets/images/icons/logo.svg |
| The brand colour | DEFAULT_THEME_COLOR in src/Demo/ThemeColorSwitcher/themes.ts |
| The fonts | src/app/[locale]/layout.tsx, src/styles/base.css and src/styles/fonts.css |
| The favicon | src/app/favicon.ico |
| The footer credit | src/app/[locale]/dashboard/layout.tsx |
The name
The name is Financial Dashboard out of the box. Change it in both languages, in each of these texts:
Metadata.siteNameandMetadata.titleTemplateinmessages/common/<locale>.json: the name in the browser tab.%sin the template is replaced by each page's own title; keep it.Metadata.descriptionin the same files, and each page'stitleanddescriptionunderMetadata.pages.Login.titleandHero.titleinmessages/auth/<locale>.json: the heading of the sign-in page and of the landing page at/en.
The logo
The logo is public/assets/images/icons/logo.svg. The sidebar shows it at the top, and the payment cards show it in their corner. Replace the file with your own SVG under the same name and both follow.
The logo that ships is light grey, so in light mode the sidebar darkens it to stay visible on the white background. If your logo is dark already, remove brightness-50 from its classes in src/layouts/Sidebar/components/SidebarLogo.tsx:
className="object-contain dark:brightness-100 brightness-50"Colours
The brand colour is orange out of the box, and four colour themes ship: orange, blue, golden and silver. Pick one with one line, DEFAULT_THEME_COLOR in src/Demo/ThemeColorSwitcher/themes.ts:
export const DEFAULT_THEME_COLOR = "orange";Fonts
| Font | Used for | Loaded in |
|---|---|---|
| Inter | English | src/app/[locale]/layout.tsx, from Google Fonts through next/font, applied in src/styles/base.css |
| Noto Sans Arabic | Arabic | src/app/[locale]/layout.tsx, through next/font, applied to right-to-left pages in src/styles/fonts.css |
The fonts are downloaded when the app is built and then served by the app itself. To use another Google font, import it from next/font/google in layout.tsx in place of one of these and give it the same variable name, --font-inter or --font-noto-arabic.
The favicon
Replace src/app/favicon.ico with your own icon under the same name. Next.js serves it at /favicon.ico and links it from every page.
The signed-in user
The name and picture in the header's user menu are the placeholder account's, John Carter, set in src/config/demo-account.ts. Once the sign-in is connected to your API, the menu shows the user your API returns.
The footer credit
Under every dashboard page, the footer shows "By Aniq UI" with a link. The word "By" is Footer.by in the common message files; the name and the link are in src/app/[locale]/dashboard/layout.tsx. Change or remove the <footer> there as you like.