Navigation

Tabbed navigation built with kd-tabs and kd-tab-panel. Panels register themselves automatically via Vue's provide/inject.

Basic Tabs

Overview Panel

This is the overview tab panel. Switch between tabs to see the content change. The active tab name is: overview

Multiple Tabs

General content area.

Accordion

Collapsible panels. By default one panel open at a time; add :multiple="true" to allow several.

A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.
Install the package via npm or yarn and import the components you need. No global registration required — tree-shaking keeps your bundle lean.
Yes. All colors, radii, and spacing are exposed as CSS custom properties. Override them at the :root level or scope them to a container.

Accordion (Multiple)

A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.
Install the package via npm or yarn and import the components you need. No global registration required — tree-shaking keeps your bundle lean.
Yes. All colors, radii, and spacing are exposed as CSS custom properties. Override them at the :root level or scope them to a container.