Private · Vue 3 · v0.0.193

The design system that builds the product itself.

Not just buttons and tokens. The Aitronos UI Kit is the same engine that renders every surface of Aitronos Chat — email, calendar, tickets, files — shipped to you as one private npm package.

Get access Browse Storybook↗
240+
components
1,189
icons
1,270+
tokens
75+
chat skins
Published to @aitronos/vue 290+ Storybook stories 800+ commits · 9 contributors Updated June 2026 Light & dark · fully tokenized
What nobody else has

Every Aitronos Chat surface
is a skin — and skins live here.

Inside Aitronos Chat, the assistant doesn't return plain text. It renders interactive surfaces — a composable email, a live calendar, an editable ticket. Each is a skin: a component plus its configuration contract. Every one is authored, versioned and shipped inside this UI Kit. Build on it and you inherit the exact same surfaces.

+ 69 more — see families below
Aitronos Chat View in Storybook ↗
Draft an email to Olivia about the Q3 review and put it on my calendar.
olivia@untitled.com
Q3 design review — agenda & timing

Send Save draft AI assist
June 2026 Week 24
MTWTFSS 1234567 891011121314 15161718192021
10:00 — Q3 design review · Olivia
In progressENG-482
Add dark-mode tokens to DatePicker
AK priority: high due: Jun 20
DOCQ3-review-notes.md12 KB
IMGmockups-v4.fig3.1 MB
CSVroadmap.csv48 KB
PDFcontract.pdf820 KB
Lisbon Jul 4 – 7 · 3 nights
Day 1
⌂
Hotel da BaixaCheck-in · 15:00
✦
Time Out MarketLunch · 13:00
◉
Belém TowerSightseeing · 16:30
Itinerary skin + hotels · restaurants · routes · map
01

One source of truth

Product and partners build from the identical components. No fork, no drift, no re-implementation.

02

Config travels with the UI

Each skin carries its own configuration contract — wire it once, it behaves the same everywhere.

03

Contribute once, ship everywhere

Improve a skin and it lands across the whole Aitronos ecosystem on the next release.

Not just cards — full bookable & product grids

Ask for hotels, things to buy, or places to go and the assistant returns a rendered, interactive grid — image, rating, price, and a live Book / Buy action. These are real skins in the kit, not screenshots.

Travel Hotel gridVizHotelList
♥€189/night
Hotel da Baixa
★ 4.8

Lisbon · Old Town

Wi-FiPool+3
♥€142/night
Memmo Alfama
★ 4.6

Lisbon · Alfama

RooftopBar+2
♥€205/night
Santa Clara 1728
★ 4.9

Lisbon · Graça

BreakfastSpa+4
Commerce Product gridVizShoppingList
−20%
Aeron Chair

Office · Seating

$1,395
Sony WH-1000XM5

Audio · Headphones

$399
New
Kindle Scribe

Tech · E-reader

$339
Hydro Flask 32oz

Outdoor · Bottle

$44
Travel Destination gridVizDestinationList · VizRestaurantList · VizPlaceList
Sintra

★ 4.9 · 40 min from Lisbon

Day trip
Time Out Market

★ 4.7 · Food hall · Cais do Sodré

Reserve
Belém Tower

★ 4.8 · UNESCO site

Tickets
Every family, every domain — Travel & Tourism Productivity Media & Commerce Conversation & Skills all 75+ in Storybook ↗
The foundation

240+ components. Themed, accessible, animated.

Everything the skins are built from — and everything you get out of the box.

Buttons
Primary Secondary Delete
Badges
Active Pending New
Input · toggle
Notifications
Avatars · tokens
AKRJGL+9
Tables Dropdowns Modals & dialogs Side panels Date & time pickers Menus & popovers Tabs Tooltips Pagination Checkboxes & toggles Cards & headers Empty states Skeletons & loaders File upload Data visualization +225 more ↗
Get in

Two ways to work with the kit

Most partners only need Tier 1. Access is granted individually — just reach out.

01

npm Consumer

Use the kit in your product.

  • Install @aitronos/vue & @aitronos/tokens
  • Private scope — needs a read-only token we issue you
  • Full Storybook catalog
  • Pin & upgrade on your schedule
npm install @aitronos/vue # with your @aitronos token

The package is private (restricted npm scope) — installs only with the access token from your request, never publicly.

Request Tier 1
02

Source Contributor

Shape the kit — and the product.

  • Everything in Tier 1, plus…
  • Write access to Aitronos-Development/ui-kit
  • Open PRs against the kit & its skins
  • Every PR reviewed by the Aitronos team
  • Merge auto-publishes for everyone
Request Tier 2
How access works · quick start

Private by default — access by token

The kit lives on a restricted npm scope. Nobody can install it without a token you issue. Three steps to access, then you're writing components in minutes.

1

You request access

Tell us your tier and what you're building. We confirm and create a read-only access token scoped to @aitronos/* — just for you.

Partner → Aitronos
2

We send you the token

A single token string, delivered securely. It only grants read access to the published packages — never write, never the source.

Aitronos → Partner
3

You install & build

Drop the token in your project's .npmrc, install, and you're running the exact same components that power Aitronos Chat.

Up and running
.npmrc in your project root — the token goes in an env var, never committed 
@aitronos:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
terminal then install like any package 
npm install @aitronos/vue @aitronos/tokens
main.ts load the styles + tokens once, app-wide 
import '@aitronos/vue/style.css'
import '@aitronos/vue/tokens.css'
AnyComponent.vue import a component and use it — that's it 
<script setup>
import { Button, Badge } from '@aitronos/vue'
</script>

<template>
  <Button hierarchy="primary">Ship it</Button>
  <Badge color="success">Live</Badge>
</template>

That's the whole flow: get a token → install → import → use. Full guides & every component live in the kit's Storybook → Getting Started ↗. Lost your token or need a new one? Contact us — we can revoke and re-issue any time.

Let's talk

Get access — or get help

Tell us which tier you need and what you're building. Pick the closest option and we'll open a prefilled email — just hit send.

Request Tier 1 (npm) Request Tier 2 (contribute) I'm a member — I need help

or email info@aitronos.com