@directorkit/ui

The component kit and the design tokens: auto-registered <D*> components built on reka-ui for behaviour and UnoCSS for styling, plus @nuxtjs/color-mode and nuxt-lucide-icons riding along with the layer.

Install

npm install @directorkit/ui

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ["@directorkit/ui"],
});

// uno.config.ts — REQUIRED, see below
export { default } from "@directorkit/ui/uno.config";

@directorkit/ui is a Nuxt layer, not a built library: it ships raw .vue source and the consuming app's Vite compiles it. nuxt and vue are peer dependencies.

Why the uno.config.ts re-export is mandatory

The palette is the UnoCSS theme, and a Nuxt layer cannot ship a Uno config transitively — @unocss/nuxt only discovers a config at the app root. Every consumer therefore re-exports ours from its own uno.config.ts. Skip this step and the components render unstyled. (The modules themselves — Uno, color-mode, lucide — do come with the layer; you declare none of them.)

Components

Auto-registered with the D prefix, flat (pathPrefix: false):

<DBadge> <DButton> <DButtonGroup> <DCard> <DChip> <DDateField> <DDatePicker> <DEmpty> <DFormField> <DInput> <DInputNumber> <DKbd> <DPinInput> <DSelect> <DSkeleton> <DSwitch> <DTimeField> <DToggle> <DToggleGroup> <DToggleGroupItem>

<template>
  <DCard>
    <DFormField label="Name">
      <DInput v-model="name" placeholder="Ada Lovelace" />
    </DFormField>
    <DButton variant="primary" @click="save">Save</DButton>
  </DCard>
</template>

Each component is four files — .vue, .types.ts, .variants.ts and .spec.ts — so the variant matrix (built with class-variance-authority) is readable and overridable on its own. Icons come from nuxt-lucide-icons with the Icon prefix (<IconCheck />).

To bind these inputs to a form model instead of a plain v-model, add @directorkit/form-ui.

Documentation

Design-token and component-authoring decisions are recorded in the repo's ADRs — 0005 (one component, four files), 0006 (reka-ui and context), 0007 (the palette).

License

MIT © Tomáš Petržela