@arkite-ui/core · v0.23.0

The admin-panel layer your products share.

Production-ready React components for multi-tenant SaaS back-offices — data-dense, utilitarian, calm. One versioned package; every product upgrades together.

70components
1,200+tests
AAWCAG · CI-enforced
en · 繁中built-in locales

Built for back-offices, not brochures

General-purpose kits stop at buttons and dialogs. Arkite ships the layer above — the composites every admin panel rebuilds badly.

Admin composites

AdminLayout with permission-aware nav, TenantSwitcher, DataTable, FilterBar, BulkActionBar — wired to work together.

Accessible React components

WCAG AA contrast enforced by CI, keyboard navigation tested in real Chromium, screen-reader-friendly forms with proper label association. Accessibility is a test suite here, not a promise.

Localized to the bone

Placeholders, empty states, calendar names, every aria-label — one LocaleProvider localizes the whole tree. English and Traditional Chinese built in.

Zero-runtime CSS, automatic dark mode

Tailwind CSS v4 + design tokens — no CSS-in-JS runtime, no style recalculation cost. Dark mode follows prefers-color-scheme out of the box; retheme everything from one --radius.

Data table with server-side pagination

Server-side pagination, sorting, and column filters with one hook — useServerTable owns the state, you fetch, the table renders. Frozen columns, row selection, and expandable rows included.

AI-ready by design

llms.txt ships in the package — setup, design rules, and the full typed API, machine-readable. Your coding agent imports the right component on the first try.

Upgrades that don't break you

The public API is snapshot-tested — every prop change is deliberate. Breaking changes ship with a codemod: one command migrates your repo.

Mobile back-office, built in

Desktop sidebar, mobile bottom tabs: hideSidebar="mobile" + bottomNav slot with safe-area padding handled. One layout, both form factors.

One command to start

Not a zero-dependency drop-in: components need React, Tailwind CSS v4, and a few peer packages. init sets all of it up — installs the peers and writes the theme CSS. Prefer manual control? The Getting Started guide lists every step.

# scaffolds peer deps + Tailwind v4 theme CSS
npx @arkite-ui/core init

import { Button, LocaleProvider, zhTW } from '@arkite-ui/core'
import '@arkite-ui/core/styles.css'

<LocaleProvider locale={zhTW}>
  <Button variant="primary">開始使用</Button>
</LocaleProvider>

Four presets, or bring a hex

Swap the entire palette at runtime. Custom brands get AA-passing foregrounds automatically.

DefaultStripe-inspired purple
NeutralZinc monochrome
OceanBlue tones
ForestGreen tones

Everything an admin panel needs

70 components. The ones other libraries make you wish for — multi-select, frozen columns, command palette — are already here.

Tables & dataData table with sorting, column filters, row selection, expandable rows · server-side pagination hook · frozen / sticky columns · virtualized list for 10,000+ rows · infinite scroll · pagination · description list · timeline · calendar · tree view
Inputs & formsSearchable multi-select combobox · tag input · date picker & date range picker · number input · OTP / one-time-code input · color picker · file upload with drag-and-drop · headless file trigger · password input · switch, checkbox, radio group · form layout with validation messages
Overlays & feedbackModal dialog with form support · side drawer · confirm & delete dialogs · dropdown menu with nested submenus · popover · tooltip · toast notifications with error helper · alert · progress · skeleton loaders · empty & error states
Navigation & layoutAdmin layout with collapsible sidebar & mobile bottom navigation · command palette (⌘K) · tenant switcher for multi-tenant SaaS · breadcrumbs · tabs · steps wizard · segmented control · filter bar · bulk action bar · sticky page header

Browse all 70 in Storybook →

Ship your back-office this week

Start from the template — admin shell, server-driven table, forms, and mobile nav already wired.