@livestorm/ui-vue-internal

Self-contained build of the Livestorm design system (Vue 3) for internal prototyping — use the Livestorm brand in throwaway repos, demos, Figma plugins/Code Connect, and AI tools, without pulling in the whole entropy monorepo.

It bundles, in a single installable package:

• 40+ Vue 3 components (UiButton, UiDialog, UiTextField, UiTable, UiDropdown, …)
• Design tokens — colors, spacing, typography, shadows + light/dark modes and 3 customer brand themes
• 393 icons (i-ls-*)
• A precompiled stylesheet — no Tailwind setup needed in the host project

Synced from livestorm/entropy packages/ui-vue. This is an internal package for prototypes — not the production design system. See Keeping it up to date.

Install

npm install @livestorm/ui-vue-internal vue

vue (^3.5) is a peer dependency. vue-router (^5) is optional — only needed if you use the to prop on UiButton.

Usage

// main.js
import { createApp } from 'vue'
import LivestormUI from '@livestorm/ui-vue-internal'
import '@livestorm/ui-vue-internal/style.css' // the precompiled styles
import App from './App.vue'

createApp(App)
  .use(LivestormUI) // registers all components as <Ls*> + v-tooltip + router-link
  .mount('#app')

You can either use the globally-registered <Ls*> components, or import them by name:

<script setup>
import { UiButton, UiBadge } from '@livestorm/ui-vue-internal'
</script>

<template>
  <!-- named import -->
  <UiButton variant="cta">Save</UiButton>
  <!-- or the global Ls* name (after app.use) -->
  <LsBadge>New</LsBadge>
</template>

Theming (required wrapper)

Wrap your app (or any subtree) in an element carrying the theme attributes. data-colors-semantic is required for semantic colors (surfaces, text, actions) to resolve:

<div data-colors-primitive="Livestorm" data-colors-semantic="light">
  <!-- your UI -->
</div>

• data-colors-semantic: light | dark
• data-colors-primitive: Livestorm (default) | customer1 | customer2 | customer3

Icons

393 icons ship as CSS classes — use any of them as i-ls-<name>:

<span class="i-ls-calendar w-5 h-5" />

Browse components (Storybook)

npm run storybook

Opens Storybook on localhost:6006 with all components, the light/dark + brand theme toolbar, and accessibility checks. (Chromatic is intentionally not included — it stays tied to entropy.)

Keeping it up to date

The source of truth is the private entropy monorepo. This package is a synced snapshot, refreshed on demand:

# 1. have a local clone of entropy next to this repo (or set ENTROPY_PATH)
git -C entropy pull           # get the latest design system

# 2. re-snapshot + rebuild + publish
npm run sync                  # copies components/tokens/icons from entropy, regenerates everything
npm run build
npm publish                   # under the @livestorm org

npm run sync is idempotent — it wipes and re-materializes src/, vendor/, the barrel, and the i18n bootstrap from entropy. Point it at a non-default entropy location with ENTROPY_PATH=/path/to/entropy npm run sync.

What's inside / how it's built

• scripts/sync.mjs — pulls ui-vue/src, vendors ui-tokens + builds ui-icons from entropy, rewrites the cross-package wiring, regenerates index.ts and index.d.ts.
• style.css — the single emit point: @import "tailwindcss" + tokens + icons, compiled by Vite into one dist/style.css.
• vite.config.ts — library build (ES), bundles floating-vue, externalizes runtime deps.
• scripts/append-base-tokens.mjs — re-attaches the base color palette that Tailwind v4 would otherwise tree-shake.

Notes & limitations

• Internal/prototyping use only — there may be edge components with rough edges.
• ui-vue-legacy (Base*) components are not included.
• Tooltips use floating-vue (bundled) and are wired automatically by app.use(LivestormUI).