Aucip Admin documentation

React 19 + Tailwind CSS 4 admin template with working modules, RTL and dark mode.

• Overview & requirements
• Install & build
• Structure
• Theming & tokens
• RTL & Arabic
• Components & pages
• Licence FAQ
• Changelog

Overview & requirements

Aucip Admin 1.0.0 is a React 19 + Tailwind CSS 4 admin template written in strict TypeScript, with working CRM, Tasks, Ecommerce, Invoices, Calendar and Chat modules, three dashboards, an offline mock API and a typed Laravel adapter. Demo data: Larkfield Provisions.

Requirements

| Version
---|---
Node.js | 20.19+ (22 LTS recommended)
pnpm | 10.x
React / Vite / Tailwind / TypeScript | 19.x / 6.4 / 4.3 / 5.9
Laravel (optional backend) | 12.x or 13.x with Sanctum 4, PHP 8.2+
Browsers | last 2 versions of Chrome, Edge, Firefox, Safari

What's in the zip

• Source (src/), tests (tests/, e2e/), guides (docs/)
• dist/: a prebuilt mock-API demo you can upload to any static host
• laravel-stub/: routes, controller, migrations, DemoSeeder
• LICENSE, README.md, CHANGELOG.md

All dependencies are MIT/ISC/Apache/BSD-style (pnpm license-audit checks). The app has no telemetry.

Install & build

pnpm i
pnpm dev        # http://localhost:5173, sign in with any email + 6-character password

First Playwright run: pnpm exec playwright install chromium.

Deploying

dist/ is static. Upload it to any host and configure a fallback to index.html (client-side routing).

Using your own API

Set in .env.local before pnpm build:

VITE_API_DRIVER=laravel
VITE_API_BASE_URL=https://api.example.com

The Laravel driver supports Sanctum cookie or bearer token auth. Install the stub from laravel-stub/ (see its README and docs/laravel-adapter.md).

Structure

src/
  api/            client.ts (ApiClient), types.ts (contract), hooks.ts (TanStack Query)
    adapters/     mock.ts, laravel.ts
  mocks/          MSW handlers, in-memory DB, deterministic seed, fixtures/
  components/
    ui/           shadcn-style primitives
    layout/       app-layout, sidebar, command-palette, customizer
    data-table.tsx, kanban-board.tsx, kpi-card.tsx, page-header.tsx …
  modules/        crm/, kanban/, ecommerce/, invoices/, calendar/, chat/
  pages/          dashboards/, auth/, ui-kit, coming-soon
  providers/      settings (theme/RTL/i18n), auth
  i18n/           messages (en, ar) + useT()
  lib/            nav.ts (sidebar and ⌘K both read it), format.ts, chart.ts
laravel-stub/     routes/api.php, generic controller, migrations, DemoSeeder
tests/  e2e/  docs/

Adding a CRUD module

1. Add the entity to src/api/types.ts and ResourceMap.
2. Add seed rows (src/mocks/seed.ts), searchable columns (src/mocks/db.ts) and the resource in src/mocks/handlers.ts.
3. Laravel: migration, CONFIG in ResourceController.php, $resources in routes/api.php.
4. Create src/modules/<name>/<name>-page.tsx (copy crm/companies-page.tsx for tables, kanban/tasks-page.tsx for boards) with useList / useResourceMutations.
5. Lazy-import in src/router.tsx, add a nav item in src/lib/nav.ts, labels in both locales.
6. Extend tests/crud-suite.ts and e2e/smoke.spec.ts.

Theming & tokens

Every colour, radius, spacing and motion value is a CSS variable in src/index.css, exposed to Tailwind 4 through @theme. Use tokens (bg-background, text-muted-foreground, bg-primary) rather than raw colours so dark mode and accents keep working.

Customizer

Light / dark / system, accent (Verdigris, Harbor, Clay, Graphite), radius, density (comfortable / compact), direction, sidebar (expanded / icon rail) and language. Settings are saved in localStorage. An accent overrides --primary, --ring and --accent only.

Core tokens (light)

Density

The compact: Tailwind variant follows data-density on <html>.

Fonts and icons

Schibsted Grotesk (display), Public Sans (UI), IBM Plex Mono (data), Readex Pro (Arabic), all self-hosted through @fontsource. Icons are Phosphor (MIT), generated into src/components/icons.tsx by scripts/gen-icons.mjs.

Full reference: docs/design-tokens.md and docs/theming.md in the package.

RTL & Arabic

• Switch direction and language in the customizer or the ⌘K palette.
• Layout uses logical utilities only (ms-*, pe-*, start-*, border-e, text-start); never ml-* or left-*.
• Directional icons mirror with rtl:-scale-x-100.
• Every module is translated into Arabic (src/i18n/messages.ts, app-messages.ts). Add a locale by adding a message set and a lang value.
• Numbers, dates and currency use the active locale. Arabic can show Latin digits (default) or Arabic-Indic digits (digits setting).
• IDs, emails, phones and amounts are wrapped in <bdi> so they read correctly inside Arabic text.
• Arabic text uses Readex Pro, line-height 1.6, no uppercase or letter-spacing.

Components & pages

Pages

Building blocks

• Data table (components/data-table.tsx): server-side sorting, search, filters, pagination, column visibility, CSV export of all matching rows; columns can be numeric (right-aligned) or hidden below md.
• Kanban board (components/kanban-board.tsx): drag-and-drop with dnd-kit, keyboard moves (Space + arrows, or the "Move to" menu), column totals.
• KPI card, page header, status badge, confirm-delete, row actions.
• States: loading skeletons, empty and error states with retry.
• Forms: react-hook-form + zod, accessible errors.
• UI primitives (components/ui/): accordion, alert, alert dialog, aspect ratio, avatar, badge, breadcrumb, button, card, checkbox, combobox, command, context menu, date picker, dialog, drawer, dropdown menu, field, input, kbd, menubar, navigation menu, pagination, popover, progress, radio group, scroll area, select, separator, sheet, slider, switch, table, tabs, toast, toggle, tooltip.
• Shell: sidebar (expanded, icon rail, mobile drawer), topbar, skip link, ⌘K palette, customizer.

Invoices print from the browser; "Download PDF" uses the print dialog's Save as PDF, and print CSS hides the app chrome.

Licence FAQ

Which licence do I need? Regular licence: use in one end product that end users are not charged for. Extended licence: use in one end product that end users are charged for (for example a paid SaaS or paid membership). Both include free updates while licensed and 6 months of support (renewable). Each additional end product needs another licence.

Can I install it locally and on staging? Yes. Free local installs (localhost/.test) plus up to 3 staging installs on staging subdomains per licence; staging doesn't count against your production domain.

What counts as staging? A host starting with staging., dev., test., uat. or preview., or a tunnel such as ngrok. Tunnel seats expire after 7 days without a verify. Any other public host counts as production. The full host list is in docs/licensing.md.

Is installation included? Installation is a paid add-on, sold separately.

What does the licence check do? It is a developer tool: the npx aucip-admin CLI and a Vite plugin that runs during pnpm dev and pnpm build. The production bundle contains no licence code and makes no licence network calls, so your deployed app never contacts aucip.com.

What happens if my licence can 't be verified? Dev and build keep working and show a warning (in dev, also a small dismissible banner). After 14 days without a successful check, only npx aucip-admin update is blocked until the licence verifies again.

What is sent? Only the licence key, the domain you activate, the product slug and the template version. No customer data, source code, environment variables or analytics.

Can I remove the licence tooling? Yes. Delete aucipLicense() from vite.config.ts, the related package.json entries and tools/aucip-cli/. The app doesn't depend on them; you would then download updates manually.

Changelog

1.0.0 (13 Oct 2026)

First public release.

• Ledgerline design system: Schibsted Grotesk, Public Sans, IBM Plex Mono and Readex Pro, Phosphor icons, Ink sidebar, ledger tables, KPI cards, density modes.
• Analytics, Store and Sales CRM dashboards.
• Modules: CRM (contacts, companies, deals pipeline, activity timeline), Tasks kanban, Ecommerce (products with variants, orders, customers), Invoices (editor, tax, print/PDF), Calendar (month/week/day, drag to move), Chat (inbox, threads, attachments).
• Auth pages: login, register, forgot/reset password, two-step, lock screen.
• Full Arabic translation, RTL, locale-aware number/date/currency formatting.
• Curated Larkfield Provisions demo data, mirrored in the Laravel DemoSeeder.
• Mock API (MSW) and Laravel adapter (Sanctum).
• Prebuilt mock-API demo in dist/; Starter variant generator.
• No horizontal overflow at 375 px; low-value table columns hidden below md.

Aucip Admin · aucip.com