Jobins Design System Core

A professional Vue 3 component library built with modern design principles.

Features

• 🎨 Modern Design: Clean, professional components following current design trends
• 🔧 Flexible: Highly customizable with variant-based styling
• 🚀 Performance: Lightweight and optimized for production

Installation

npm install jobins-frontend-components
# or
yarn add jobins-frontend-components
# or
pnpm add jobins-frontend-components

Usage (JButton)

<template>
  <JButton variant="default">Click me</JButton>
  <!-- Variants: default, tertiary, flat, agent, client, danger, outline, dangerOutline, link -->
</template>

<script setup>
import { JButton } from 'jobins-frontend-components'
</script>

Components

JButton

A flexible button component with multiple variants and sizes.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link' | 'default' | Button visual variant | | size | 'default' \| 'sm' \| 'lg' \| 'icon' | 'default' | Button size | | asChild | boolean | false | Render as child element | | as | string \| object | 'button' | Element tag or component to render as | | disabled | boolean | false | Whether the button is disabled | | class | string | undefined | Additional CSS classes |

Utilities

cn helper for merging Tailwind classes is exported if needed.

Requirements

• Vue 3.x
• Tailwind CSS (for styling)

License

MIT License