Getting started

Kickstart your project with Holistics Design System.

Install

1. Install the library

npm

npm add @holistics/design-system

pnpm

pnpm add @holistics/design-system

yarn

yarn add @holistics/design-system

2. Import the CSS

Import the styles in your entry point:

main.ts

import { createApp } from 'vue'
import '@holistics/design-system/css'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

Disable Tailwind Preflight

If you're using Tailwind, you can safely disable Tailwind Preflight in your app because the imported CSS already includes it.

Removing the preflight keeps the bundled CSS smaller and avoids unexpected cascade behavior, while still giving you the full Tailwind Preflight feature set.

3. Use the components

<script setup lang="ts">
import { ref } from 'vue'
import { HSelect, type SelectOptionBase } from '@holistics/design-system'

const options = [
  { value: 1, label: 'Option 1' },
  { value: 2, label: 'Option 2' },
  { value: 3, label: 'Option 3', disabled: true },
  { value: 4, label: 'Option 4' },
] as const satisfies SelectOptionBase[]

const value = ref<typeof options[number]['value']>()
</script>

<template>
  <HSelect
    v-model="value"
    :options="options"
    class="w-80"
  />
</template>

Working with LLMs

You can access the LLM-optimized version of our documentation at llms.txt.

This file contains:

• Complete overview of all UI components with detailed API documentation
• Usage examples and implementation patterns
• Accessibility and developing guidelines
• Styling and customization options

Example prompts

"Using the Holistics Design System documentation at https://design.holistics.dev/llms.txt, help me implement a custom Modal component with form validation."

"List all button variants of HButton component in Holistics Design System. Use https://design.holistics.dev/llms.txt as reference."