Platon UI Kit

A Vue 3 UI component library built with Tailwind CSS, featuring modern, accessible, and customizable components.

Installation

npm install @behzodjon/platon-ui-kit

Usage

Setup

Import the CSS file in your main application file:

import '@behzodjon/platon-ui-kit/style.css'

Importing Components

import { Button, Input, Badge, Table } from '@behzodjon/platon-ui-kit'

Example

<template>
  <div>
    <Button variant="primary" size="medium">
      Click me
    </Button>

    <Input
      v-model="text"
      label="Enter text"
      placeholder="Type here..."
    />

    <Badge variant="success">
      5
    </Badge>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Button, Input, Badge } from '@behzodjon/platon-ui-kit'

const text = ref('')
</script>

Components

Button

• Multiple variants: primary, secondary, info, success, warning, error
• Sizes: small-x, small, medium, large, large-x
• Outlined style support
• Icon-only mode
• Badge support via ButtonWithBadge

Input

• Label support
• Clearable option
• Icon slots (left and right)

Badge

• Multiple variants matching button styles
• Sizes: sm, md, lg

MultiselectButton

• Multi-option selection
• Customizable variants

Table

Complete table component set:

• Table, TableHeader, TableBody, TableFooter
• TableRow, TableHead, TableCell
• TableCaption, TableEmpty

Tooltip

• TooltipProvider, Tooltip, TooltipTrigger, TooltipContent

Icons

Pre-built icons: IconCheck, IconClose, IconSearch, IconDocs, IconUser

Requirements

• Vue 3.5+
• Tailwind CSS (peer dependency - you need to configure it in your project)

Development

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Build Library

npm run build:lib

Storybook

npm run storybook

Lint with ESLint

npm run lint

License

MIT