Jasmine UI

An accessible Vue 3 component library built on Reka UI headless primitives. Styled with Tailwind CSS. Customizable through design tokens. Type-safe from end to end.

Documentation | GitHub

Installation

bun add @jasmine-ui/vue

npm install @jasmine-ui/vue

Setup

Import the stylesheet in your app entry:

import '@jasmine-ui/vue/style.css';

Then use components:

<script setup>
import { Button, Input, Table } from '@jasmine-ui/vue';
</script>

<template>
  <Button color="primary">Click me</Button>
</template>

Components

29 production-ready components across 5 categories:

| Category | Components | |----------|-----------| | General | Button, Spinner, Divider, Text | | Data Entry | Input, Textarea, Checkbox, Radio Group, Switch, Select, Combobox | | Data Display | Accordion, Avatar, Badge, Chip, List, Code Block, Kbd, Tabs, Pagination, Table | | Feedback | Alert, Toast | | Overlay | Dropdown, Modal, Drawer, Popover, Tooltip |

Features

• Accessible — Built on Reka UI with full ARIA support and keyboard navigation
• Dark mode — First-class dark mode via CSS custom properties
• Design tokens — Fully customizable through --j-* CSS variables, no build step required
• TypeScript — Complete type safety with exported types for every component
• Standard Schema — Form validation via Standard Schema v1 (Zod, Valibot, ArkType)
• Tailwind CSS — Styled with Tailwind CSS v4 + Tailwind Variants

Requirements

• Vue 3.5+ or Vue 4.0+
• Tailwind CSS 4

Development

bun install          # Install dependencies
bun run docs:dev     # Documentation site
bun run storybook:dev # Storybook
bun run test:unit    # Unit tests
bun run biome:check  # Lint & format
bun run type:check   # Type check
bun run build        # Build library

License

MIT