Skip to content
UI

Introduction

What @zenoxai/ui is, what it contains and how it is organized.

Markdown

@zenoxai/ui is the design system of the Zenox platform. Every Zenox application, starting with the Vydar web app, builds its interface from it, so the platform looks and behaves the same everywhere: the same density, the same colors, the same keyboard behavior.

What is inside

  • Components: the primitives. Buttons, inputs, dialogs, menus, tables. They are the shadcn/ui components in their Base UI flavor (base-nova), adapted to the Zenox tokens. Behavior and accessibility come from Base UI.
  • Patterns: compositions of components that recur across products. Page headers, KPI tiles, status and severity badges, empty and error states, the confirmation dialog.
  • Tokens: the colors, type scale, radius and motion every component is styled with, exposed as Tailwind CSS v4 utilities, in light and dark.
  • Brand: the Zenox and Tellyu marks as components.
  • Guidelines: how to write interface text, where actions and messages go, how to show tables, times and severity, how to handle empty states, and the small layout rules that keep screens consistent.

Principles

  1. Tokens, never raw values. A component never names a hex color, a palette color such as red-500 or a pixel font size. The lint step enforces it.
  2. Dense by default. The platform is an operations console. Running text is 12.5px, controls are 32px tall, and tables are compact.
  3. Behavior from Base UI. Focus management, keyboard support and ARIA come from the primitives. Do not reimplement them.
  4. No domain knowledge. Components know nothing about tenants, permissions, translations or analytics. Text arrives through props, already translated; the app maps its own statuses to the library’s tones.
  5. Layers only point down. lib and hooks are used by components, and components by patterns. Never the other way around.

For AI agents

Every page of this site has a Markdown twin: append .md to the URL. The index for language models is at /llms.txt. Inside a project that installs the package, read node_modules/@zenoxai/ui/ai/USAGE.md first, then ai/components.md for the props of every export.