otai-vue-ui

otai-vue-ui

Vue 3 component library with a dark-themed Tailwind CSS design system by Open Ticket AI.

Install

npm install otai-vue-ui

Peer dependencies

You also need these in your project:

npm install vue @headlessui/vue @heroicons/vue

Tailwind CSS Setup

The components use Tailwind CSS utility classes with custom design tokens. Add the preset to your tailwind.config.cjs:

module.exports = {
  presets: [require('otai-vue-ui/tailwind-preset')],
  content: [
    './node_modules/otai-vue-ui/dist/**/*.js',
    // ...your own content paths
  ],
};

This adds the required color tokens, shadows, and spacing values.

Usage

<script setup>
import { Button, Card, Badge, Accordion } from 'otai-vue-ui';
</script>

<template>
  <Card variant="surface" tone="primary" elevation="md">
    <template #header>
      <Badge tone="success">New</Badge>
    </template>
    <p>Card content here</p>
    <template #actions>
      <Button tone="primary" variant="surface">Click me</Button>
    </template>
  </Card>
</template>

Components

Basic

• Button — Surface, outline, subtle variants with tone colors. Renders as <button>, <a>, or <router-link>.
• Badge — Small label/tag with variant and tone support.
• Alert — Informational alerts with icons (info, success, warning, danger).
• Card — Composable card with image, header, title, content, actions, and footer slots.
• Link — Simple styled anchor.
• Modal — Dialog with HeadlessUI, backdrop blur, close button.
• ModalTrigger — Button + Modal combo with managed open/close state.
• Tabs — Tab navigation (underline or pill style) via HeadlessUI.
• CookieBanner — Cookie consent banner with localStorage persistence.

Accordion

• Accordion — Container with single/multiple expand modes and v-model support.
• AccordionItem — Individual collapsible panel with HeadlessUI Disclosure.

Forms

• RadioGroup — Radio group container with v-model support.
• RadioGroupOption — Styled radio option with card-like appearance.

Navigation

• NavBar — Responsive navbar with dropdown menus, mobile slide-out, and CTA button.

Table

• Table — Styled table container with striping, hover effects, and border options.
• Row — Table row with striped/hover styling via provide/inject.
• Cell — Table cell (<td> or <th>) with alignment and density support.

Transitions

• UiTransitionFade — Fade transition wrapper for HeadlessUI.
• UiTransitionSlide — Directional slide transition wrapper.

Design System (JS/TS exports)

• Tokens — Variant, Tone, Size, Radius, Elevation types + array constants.
• Recipes — Tailwind Variants recipes: button, badge, alert, card, surface, input, tabs, text, prose, focusRing.
• Transition presets — fade, fadeScaleSm, fadeScaleMd, slideDown, slideUp, slideLeft, slideRight.

License

MIT