Skip to content

Frequently Asked Questions

The project uses Bun for dependency management and Vite Plus for development, builds, formatting, and linting. The devEngines entry pins Bun 1.3.14.

Terminal window
# Install Vite Plus
curl -fsSL https://vite.plus | bash
# Install project dependencies
bun install

You can use any Node.js version supported by Vite Plus when developing only the main application. The complete repository also includes an Astro 7 documentation site, so Node.js ^22.18.0 or >= 24.11.0 is recommended for all workflows.

Why does the documentation site use TypeScript 6?

Section titled “Why does the documentation site use TypeScript 6?”

The main application uses TypeScript 7.0.2. The documentation site pins TypeScript 6.0.3 because it is the newest release currently compatible with @astrojs/check 0.9.9. The two projects install dependencies independently and maintain separate lockfiles.

Terminal window
cd doc
bun install
bun run dev

Run bun run check for Astro type checks, Oxfmt formatting checks, and Oxlint linting. Run bun run build for a production build.

Use @/ to point to the src/ directory:

import { useSystemStore } from '@/store';

Use Ant Design CSS variables:

// Recommended
<div style={{ color: 'var(--ant-color-primary)' }}>
// Avoid hardcoding
<div className="text-blue-500">

The project uses RemixIcon:

<i className="ri-user-line" />
<i className="ri-dashboard-line" style={{ fontSize: 20 }} />

Browse the full icon set on RemixIcon.

How do I use Ant Design variables in Tailwind CSS?

Section titled “How do I use Ant Design variables in Tailwind CSS?”

Tailwind CSS v4 supports CSS variables directly:

<div className="text-(--ant-color-primary) bg-(--ant-color-bg-container)">
import { getDashboardLocale } from '@/locales';
import { useSystemStore } from '@/store';
const { locale } = useSystemStore();
const t = getDashboardLocale(locale);
  1. Add the type in src/types/locale.ts.
  2. Add translations to each locale file.
  3. Add an option to the language switcher.

Update system.name in the corresponding language file under src/locales/system/.

Update FEATURE_FLAGS in src/config/system.ts:

export const FEATURE_FLAGS = {
tabs: false, // Hide tabs setting
compactMode: false, // Hide compact mode setting
// ...
};

Update SYSTEM_DEFAULTS in src/config/system.ts:

export const SYSTEM_DEFAULTS = {
layout: {
menuLayout: 'horizontal', // Use the top navigation layout
// ...
},
};

Update src/layouts/account-menu-items.tsx to configure account dropdown items.

Update src/layouts/toolbar-buttons.tsx to configure header actions.

Run the full check first, then clear the Vite Plus task cache and reinstall dependencies:

Terminal window
bun run check
vp cache clean
bun install
bun run build

Run the corresponding tasks from the doc directory for the documentation site:

Terminal window
cd doc
bun run check
bun run build

How do I automatically fix code-quality errors?

Section titled “How do I automatically fix code-quality errors?”
Terminal window
bun run check:fix

Use bun run check:fix for the documentation site.