Start a project

Artelier UI Kit · Vue

How the studio builds.

Every Artelier screen is made from one kit of components, written twice: in Vue for the web and in Rust for native apps. It is shown here with its code, component by component, so the work can be judged by how it is made, not only by how it looks.

Note
A look inside, not a library. The kit is the studio's own: there is no package to install and no licence to use it under. The source is here to be read.

One system, three parts

VueThe web kit, as a Nuxt layer. Every Artelier site and dashboard is built on it, this one included.RustThe same kit in Dioxus, for desktop and native apps. Same classes, same stylesheets, same look.MCP serverHow new work starts: a model handed the real components and the rules, building screens from them.

The rules every component follows

  • The chrome is grey so the data can be coloured.
  • Depth is the only decoration.
  • One accent per screen, never on a destructive action.
  • Numbers are monospaced, and status is never colour alone.

The Vue components

SurfacesCard, well, frame tabActionsButton, menu, segmentedInputsField, choice, range, tagData displayStat, meter, charts, gridDisclosureAccordion, drawer, treeNavigationTabs, crumbs, pagerFeedbackEmpty, skeleton, modalPatternsKPI row, table screenElementsDialogs, pickers, menus, chatPage sectionsNav, hero, footerDocsDoc shell, callout, window

The same categories exist in Artelier UI Kit for Rust.

How a project takes it

A Nuxt app extends the kit as a layer; nothing is copied by hand.

ts
// nuxt.config.ts — a studio project takes the kit as a Nuxt layer.
// Tokens, fonts, stylesheets, components and composables arrive with it.
export default defineNuxtConfig({
  extends: ['./ads'],
})