• Headless Architecture: All the functionality without the styling constraints.
• Highly Performant: Built with performance in mind.
• Accessibility-First: Designed with ARIA standards from the ground up.
• Modular Design: Tree-shaking. Import only what you need.
• TypeScript Powered: Full type safety and great developer experience.

npm install @vacui-kit/primitives

Import the modules for the primitives you want to use:

import { CollapsiblePrimitivesModule } from "@vacui-kit/primitives/collapsible";

For more granular control, you can import specific directives:

import { 
  CollapsibleRootDirective, 
  CollapsibleContentDirective, 
  CollapsibleTriggerDirective 
} from "@vacui-kit/primitives/collapsible";

Here's a simple example using the Collapsible component:

<div vacCollapsibleRoot [(open)]="open">
  <div>
    <h3>Header content</h3>
    <button vacCollapsibleTrigger class="toggle-button">
      <icon [name]="open ? 'Up' : 'Down'"></icon>
    </button>
  </div>
  <div vacCollapsibleContent class="content">
    This is the content that will be shown or hidden based on the collapsible state.
  </div>
</div>

For comprehensive documentation and examples, visit our documentation site https://vacui-ui.com.

We welcome contributions! Please read our contributing guidelines to get started.

# Install dependencies
pnpm install

# Start the development server
pnpm nx serve docs

# Running unit tests
pnpm nx test primitives

# Running storybook
pnpm nx storybook primitive

Vacui UI is MIT licensed.

• Inspired by other headless UI libraries like Radix UI, Headless UI and more.