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

Step 1: Import the CSS file in your main application file:

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

Step 2: Wrap your components with the platon-ui class to enable scoped styles:

All Platon UI Kit components must be wrapped in an element with the platon-ui class. This ensures complete style isolation and prevents conflicts with your project's existing styles.

Option A: Wrap your entire app (Recommended)

<!-- index.html -->
<div id="app" class="platon-ui"></div>

Or in your root component:

<!-- App.vue -->
<template>
  <div class="platon-ui">
    <!-- Your entire app here -->
    <RouterView />
  </div>
</template>

Option B: Wrap individual sections

<template>
  <div>
    <!-- Your existing project styles -->
    <h1>My Project</h1>

    <!-- Platon UI Kit components wrapped -->
    <div class="platon-ui">
      <Button variant="primary">Click me</Button>
    </div>
  </div>
</template>

Importing Components

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

Complete Example

<template>
  <div class="platon-ui">
    <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>

Why is the platon-ui class required?

The platon-ui class ensures:

• Style Isolation: Platon UI Kit styles won't affect your existing project styles
• No Conflicts: Your project's CSS (Bootstrap, Tailwind, custom styles) won't override Platon UI Kit components
• Predictable Behavior: Components will always render correctly regardless of your project's CSS setup

All Platon UI Kit utility classes are prefixed with pl: (e.g., pl:rounded-xl, pl:bg-primary) and are scoped to the .platon-ui class for maximum compatibility.

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

Migration from v0.1.x

If you're upgrading from version 0.1.x, you need to wrap your components with the platon-ui class.

Before (v0.1.x):

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

<script setup>
import { Button } from '@behzodjon/platon-ui-kit'
import '@behzodjon/platon-ui-kit/style.css'
</script>

After (v0.2.0+):

<template>
  <div class="platon-ui">
    <Button variant="primary">Click me</Button>
  </div>
</template>

<script setup>
import { Button } from '@behzodjon/platon-ui-kit'
import '@behzodjon/platon-ui-kit/style.css'
</script>

Why this change? Version 0.2.0 introduces complete style isolation to prevent conflicts with your project's existing CSS frameworks (Bootstrap, Tailwind, etc.). This ensures Platon UI Kit components work perfectly alongside any other styling solution without interference.

License

MIT