Template documentation

Using NextZero

NextZero brings internationalization, theme presets, and color modes together from the start. Learn how to use the included components and extend them into your own design system.

01 · START

Quick start

After installing dependencies and starting the development server, the home page is a live environment for trying and validating every preference.

npm install
npm run dev

Theme

Choose a preset color system

Language

Switch localized copy

Mode

Follow the system or choose light and dark

02 · COMPONENTS

Use the built-in switchers

All three components are connected to persistent state and their providers, so they can be placed directly in a header, settings page, or sidebar.

OriaThemeSelect

Select an OriaTheme preset. The choice is persisted by OriaTheme and starts the root view-transition animation.

<OriaThemeSelect variant="ghost" className="h-8" />

LanguageSelect

Change the active i18next language. The choice is remembered in browser storage.

<LanguageSelect variant="ghost" className="h-8" />

OriaAppearanceSelect

Offer system, light, and dark modes. System mode follows the operating-system preference.

<OriaAppearanceSelect variant="ghost" className="size-8" />

03 · CUSTOMIZE

Customize the three components

Every switcher accepts familiar button appearance props. The mode switcher also controls menu alignment and tooltip placement.

<OriaThemeSelect
  variant="outline"
  className="w-full justify-start"
/>

<LanguageSelect
  variant="secondary"
  className="h-9"
/>

<OriaAppearanceSelect
  variant="ghost"
  className="size-8"
/>

The components are implemented in components/oria、components/language、components/ui/popover.tsx 与 components/ui/command.tsx。

04 · THEMES

Edit or add theme presets

OriaTheme provides ready-to-use preset themes and controls the theme runtime for this starter.

import { OriaThemeProvider } from "@oriatheme/react";
import { oriaPresetThemes } from "@oriatheme/presets";

<OriaThemeProvider config={{
  presets: oriaPresetThemes,
  defaultThemeId: "oria-default",
}} />

Explore themes with OriaTheme

Browse OriaTheme and use its preset packages in this project. OriaTheme is licensed under Apache-2.0; see THIRD_PARTY_NOTICES.md for the applicable notice and license text.

Open OriaTheme

1. Choose or customize a theme with OriaTheme.
2. Map the theme values to tokens such as primary, background, card, and border.
3. Complete the tokens needed for both light and dark modes, then refresh and verify them in the theme picker.

05 · LOCALES

Edit or add languages

Language configuration, display names, and translation files are maintained separately. Adding a language only needs configuration and one JSON file.

// config/i18n.config.ts
const languages = ["en", "zh", "zh-Hant", "ja", "ko", "de", "ru", "fr", "es"];

export const languageList = [
  { code: "es", label: "Español" },
];

// public/locales/es/common.json
{
  "language-select": {
    "search-lang": "Buscar idioma",
    "no-found": "No se encontró ningún idioma"
  },
  "landing": {
    "hero": { "title": "Tu título localizado" }
  }
}

To add a language, update languages、languageList 与 public/locales/locale/common.json。 Missing keys fall back to English, so begin by copying public/locales/en/common.json。

Treat the template as your foundation: product features can evolve while language, themes, and color-mode switching stay consistent.