@mart-booking/ui

mart-ui

Vue 3 component library built on Reka UI (headless behaviour + a11y) with a CSS-variable design-token system. Styling is authored in scoped SCSS; no Tailwind, no Vuetify.

Install

bun add @mart-booking/ui
# or: npm i @mart-booking/ui

// one-time, e.g. in main.ts
import '@mart-booking/ui/style.css'

<script setup lang="ts">
import { MButton, MInput } from '@mart-booking/ui'
</script>

<template>
  <MInput label="Телефон" placeholder="+7 (000) 000-00-00" />
  <MButton variant="primary">Забронировать</MButton>
</template>

Theming

Set data-theme on any container (usually <html>): light (default), dark, landing. Components read only semantic tokens (--mb-*), so switching themes needs no component changes.

Advanced consumers can override tokens at the SCSS level:

@use '@mart-booking/ui/scss' as *;

Development

bun run storybook       # docs + playground at :6006
bun run build           # dist/ (ESM + .d.ts + style.css)
bun run build-storybook # static docs site
bun run lint:publish    # publint + are-the-types-wrong

Structure

src/
  components/<Name>/     Component.vue · Component.stories.ts · index.ts
  styles/tokens/         _primitive · _semantic · _typography  (3-tier tokens)
  foundations/           Colors / Typography docs
  Introduction.mdx       docs landing page

Published to npm as @mart-booking/ui. Releases via Changesets.