For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/get-started/introduction.md.
Design System

    Introduction

    Wallarm Design System is the React component library behind Wallarm products. It ships accessible, ready-to-use components, the design tokens they are styled with, and tooling that helps people and AI assistants use both correctly.

    What it is built on

    • React 19 and TypeScript: every component is typed, and refs are passed as plain props.
    • Tailwind CSS v4 for styling; colors, spacing, radius and typography are design tokens exposed as CSS variables.
    • Ark UI for accessible behavior: focus management, keyboard support and ARIA wiring.
    • TanStack Table and TanStack Virtual for data tables and long lists.
    • DnD Kit for drag and drop.

    Where to find it

    Before you start

    The library has required peer dependencies: react and react-dom (^19.0.0), tailwindcss (^4.0.0), tw-animate-css (^1.0.0) and @internationalized/date (^3.12.0). Installation walks through them and the CSS setup.

    Next steps

    • Installation: add the package, its peers and the theme.
    • Theming: light and dark themes, frame style and token overrides.
    • Routing: wire navigation components to your router.
    • Components: the component catalog.
    • MCP server: give your coding assistant the component and token metadata.