Design system

A Vue 3 component library scaffolded with Vite, TypeScript, SCSS, Storybook, and Vitest.

Installation

npm install @by-muris/ui

App Setup

import { createApp } from 'vue'
import MurisDesignLib, { defaultTheme } from '@by-muris/ui'
import '@by-muris/ui/style.css'

import App from './App.vue'

const app = createApp(App)

app.use(MurisDesignLib, { theme: defaultTheme })
app.mount('#app')

The plugin injects theme tokens into :root[data-theme]. Components and composables are named exports and can be imported from the root package or dedicated subpaths.

<script setup lang="ts">
import { MdButton } from '@by-muris/ui/components'
import { useToast } from '@by-muris/ui/composables'

const toast = useToast({
  duration: 4000,
})
</script>

Theme authoring helpers are exported from @by-muris/ui/theme.

import { defaultTheme, extendTheme, type Theme } from '@by-muris/ui/theme'

const theme: Theme = extendTheme(defaultTheme, {
  name: 'acme',
  tokens: {
    primitives: {
      color: {
        blue: {
          500: '#3457d5',
        },
      },
    },
  },
})

Development

npm run storybook
npm run test
npm run build

After cloning or initializing git, run npm run prepare once to install Husky hooks.