Getting Started

Kickstart your project with Holistics Design System.

Getting started

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 are using Tailwind, you can safely disable Tailwind Preflight in your app because the imported CSS has already included it!

Removing the preflight helps minimize the final bundled CSS, avoid unexpected behaviors of styles cascading while still providing full features of Tailwind Preflight.

3. Use the components

<script setup lang="ts">
import { ref } from 'vue'
import { HSelect, type SelectOption } 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 SelectOption[]

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."