Quanta Kit Vue

A comprehensive Vue 3 component library built with TypeScript and modern development practices.

Installation

npm install quanta-kit-design-system-vue

Usage

Basic Usage

<template>
  <div>
    <Button variant="primary" @click="handleClick"> Click me! </Button>
  </div>
</template>

<script setup lang="ts">
import { Button } from "quanta-kit-design-system-vue";

const handleClick = () => {
  console.log("Button clicked!");
};
</script>

Component Import

// Import specific components
import { Button } from "quanta-kit-design-system-vue";

// Import component types
import type { ButtonProps, ButtonVariant } from "quanta-kit-design-system-vue";

Components

Button

A versatile button component with multiple variants and sizes.

Props

• variant?: 'primary' | 'secondary' | 'outline' | 'ghost' - Button style variant (default: 'primary')
• size?: 'small' | 'medium' | 'large' - Button size (default: 'medium')
• disabled?: boolean - Whether the button is disabled (default: false)
• type?: 'button' | 'submit' | 'reset' - Button type attribute (default: 'button')
• class?: string - Additional CSS classes

Events

• @click - Emitted when the button is clicked (only when not disabled)

Examples

<template>
  <!-- Different variants -->
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>

  <!-- Different sizes -->
  <Button size="small">Small</Button>
  <Button size="medium">Medium</Button>
  <Button size="large">Large</Button>

  <!-- Disabled state -->
  <Button disabled>Disabled</Button>

  <!-- With event handler -->
  <Button @click="handleClick">Click me</Button>
</template>

Development

Building

npm run build

Linting

npm run lint

Type Checking

npm run check-types

Storybook

npm run storybook

License

MIT