Build with the UI Kit

Three ways to start#

Three ways lead to the same result, a component as source in your project. Take the one that suits you and switch whenever you like.

• Copy & Paste

  Open a component, copy its code and place it in src/components/ui. The files it brings along are listed right next to the code.

  Browse components

  src/components/ui/pricing.tsx
  src/lib/kit.ts
  src/styles/kit.css

• CLI

  One command fetches the component with its dependencies from the registry and writes it into your project. Files you changed stay as they are.

  Read the installation

  npm i -g ai-website
  aiw add @ai-website/pricing

• AI assistant

  Describe the page in one sentence. Your assistant, be it Claude, Cursor, Copilot or Codex, finds the matching components, installs them, builds the page and checks it at three widths.

  Connect your assistant

  Build a home page for a café with a split hero, the menu as Pricing price-list and the opening hours.

What you get#

The kit holds 350 components with 1,630 variants and 305 icons of its own. Everything is built in house and follows the same rules.

• Source you own

  Every component lands in your project as a readable file. You change it like your own code.

• Light and dark

  Every color comes from tokens. One class on the html element switches the mode for the whole page.

• English and German

  Texts a component writes itself exist in both languages. Your content comes through props.

• Built for everyone

  Keyboard, screen readers, touch targets from 44 px and calm motion when the system asks for it.

The look in one line#

Mode and accent sit as a class and an attribute on the html element. Dark mode is the default here, blue the accent.

<html class="dark" data-accent="blue">

• Blue
• Violet
• Cyan
• Emerald
• Sunset
• Rose
• Neutral

Everything about tokens, accent and your own brand color

Every topic#

• InstallationA new project with one command, or the kit in the project you already have.
• AI assistantsRun the kit as a local MCP server with the aiw CLI and connect it once to the assistant you already use.
• What is in the kitEvery group and category of the kit on one page, with the live count of components and variants.
• ComponentsEvery component follows the same pattern.
• ThemingA handful of tokens carry the whole look.
• MotionCalm movement that supports the content.
• AccessibilityEvery component is built for keyboards, screen readers and touch from the start.
• FormsWhole forms described as data, an error summary that leads to every field and states for success, failure and saved drafts.
• ChartsCharts drawn in SVG that read your data as plain rows, format numbers in the language of the page and stay readable for keyboards and screen readers.
• Scroll storiesSections that tell while the page scrolls.
• AI interfacesChats, answers with sources, agents and settings for products with AI.
• CLIOne command line from the empty folder to the upload.
• StudioEdit a component with your own content, see it on phone, tablet and desktop, and copy code that already carries your texts.
• Versions and updatesEvery release of the kit carries a version number, and so does every component.
• FAQShort answers to what people ask most when they start with the kit.