adc-ui-kit

adc-ui-kit

English · ภาษาไทย

Vue 3 UI components styled with Tailwind CSS v4: 33 components and 2 composables. Setup is one CSS import, and you can override the design tokens.

Docs and live examples: https://ui-kit.purepure2553.workers.dev

Requirements

• Vue 3.5+
• Tailwind CSS v4 with @tailwindcss/vite
• vue-router is optional. Without it, everything works except the to prop of UiButton.

Installation

npm i adc-ui-kit
npm i -D tailwindcss @tailwindcss/vite   # if you don't have them yet

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [vue(), tailwindcss()],
})

Setup

1. CSS — one line. Use it in place of @import 'tailwindcss'. Don't include both.

/* src/style.css */
@import 'adc-ui-kit/tailwind.css';

This file already includes Tailwind, the design tokens, base styles, and the @source rule that lets Tailwind find the kit's classes.

2. Font. The kit uses Noto Sans Thai but doesn't ship the font file. Load the font yourself, or override --font-sans (see Theming).

<!-- index.html -->
<link
    href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap"
    rel="stylesheet"
/>

3. App.vue. Add the toast and loader outlets once.

<script setup lang="ts">
import { UiLoaderOverlay, UiToast } from 'adc-ui-kit'
</script>

<template>
    <RouterView />
    <UiToast />
    <UiLoaderOverlay />
</template>

Usage

<script setup lang="ts">
import { UiButton, UiInput, UiModal, UiSelect, useToast, type SelectOption } from 'adc-ui-kit'
import { Plus } from 'lucide-vue-next'
import { ref } from 'vue'

const name = ref('')
const branch = ref<string | null>(null)
const open = ref(false)
const toast = useToast()

const BRANCHES: SelectOption[] = [
    { value: 'hq', label: 'Head office' },
    { value: 'east', label: 'East branch' },
]

function save() {
    open.value = false
    toast.success('Saved')
}
</script>

<template>
    <UiButton :icon="Plus" @click="open = true">New customer</UiButton>

    <UiModal v-model="open" title="New customer">
        <div class="flex flex-col gap-4">
            <UiInput v-model="name" label="Name" required />
            <UiSelect v-model="branch" label="Branch" :options="BRANCHES" searchable />
        </div>
        <template #footer>
            <UiButton variant="ghost" @click="open = false">Cancel</UiButton>
            <UiButton @click="save">Save</UiButton>
        </template>
    </UiModal>
</template>

Icons come from lucide-vue-next, which is installed along with the kit. Pass the icon component itself, e.g. :icon="Plus".

Theming

Add an @theme block after the import and list only the tokens you want to change. Kit components (including the date picker calendar) and your own classes follow the new values.

@import 'adc-ui-kit/tailwind.css';

@theme {
    --color-primary: #7c3aed;
    --color-primary-hover: #6d28d9;
    --color-primary-soft: #ede9fe;
    --radius-control: 12px;
}

Every token is also a CSS variable, so you can use var(--color-primary) in your own CSS.

Components

v-model is the value you bind to the component. Every form control also accepts label, required, hint, error and disabled.

tone is one of primary, ok, warn, danger or neutral.

Table example

<script setup lang="ts">
import { UiBadge, UiTable, type TableColumn } from 'adc-ui-kit'

const COLUMNS: TableColumn[] = [
    { key: 'code', label: 'Code', mono: true, width: '120px' },
    { key: 'name', label: 'Name' },
    { key: 'status', label: 'Status', align: 'center' },
]
const rows = [{ code: 'C-001', name: 'Somchai', status: 'active' }]
</script>

<template>
    <UiTable :columns="COLUMNS" :rows="rows" :row-key="(row) => row.code">
        <template #cell-status="{ row }">
            <UiBadge tone="ok">{{ row.status }}</UiBadge>
        </template>
    </UiTable>
</template>

Set sortable: true on a column to get @sort events. The table doesn't reorder rows itself, so sort the data at its source (for example, your API).

Composables

import { useLoader, useToast } from 'adc-ui-kit'

const toast = useToast()
toast.success('Saved')
toast.error('Save failed', { title: 'Error', duration: 0 }) // duration 0 = stays until closed
toast.warning('...')
toast.info('...')

const { withLoader, isLoading } = useLoader()
await withLoader(() => api.save(payload)) // shows the full-screen loader until the task finishes

Both composables need their outlet (<UiToast /> or <UiLoaderOverlay />) in App.vue.

Types

import type { Align, ButtonVariant, SelectOption, Size, SortDirection, TabItem, TableColumn, Tone, Toast } from 'adc-ui-kit'

Notes

• Light mode only.

ภาษาไทย

UI component สำหรับ Vue 3 ที่ใช้ Tailwind CSS v4 มี component 33 ตัวและ composable 2 ตัว ตั้งค่า CSS บรรทัดเดียว และเปลี่ยน design token ได้

เอกสารและตัวอย่างสด: https://ui-kit.purepure2553.workers.dev/?lang=th

สิ่งที่ต้องมี

• Vue 3.5 ขึ้นไป
• Tailwind CSS v4 และ @tailwindcss/vite
• vue-router ไม่บังคับ ไม่มีก็ใช้ได้ทุกตัว ยกเว้น prop to ของ UiButton ที่จะไม่ทำงาน

ติดตั้ง

npm i adc-ui-kit
npm i -D tailwindcss @tailwindcss/vite   # ถ้ายังไม่มี

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [vue(), tailwindcss()],
})

ตั้งค่า

1. CSS บรรทัดเดียว ใส่บรรทัดนี้แทน @import 'tailwindcss' ห้ามใส่ทั้งสองบรรทัด

/* src/style.css */
@import 'adc-ui-kit/tailwind.css';

ไฟล์นี้มีครบแล้ว: Tailwind ทั้งชุด, design token, base style และ @source ที่ทำให้ Tailwind หา class ของ kit เจอ

2. ฟอนต์ kit ใช้ Noto Sans Thai แต่ไม่ได้แนบไฟล์ฟอนต์มา ต้องโหลดเอง หรือทับ --font-sans เป็นฟอนต์อื่น (ดู เปลี่ยนธีม)

<!-- index.html -->
<link
    href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap"
    rel="stylesheet"
/>

3. App.vue วางจุดแสดง toast กับ loader ไว้ที่เดียวทั้งแอป

<script setup lang="ts">
import { UiLoaderOverlay, UiToast } from 'adc-ui-kit'
</script>

<template>
    <RouterView />
    <UiToast />
    <UiLoaderOverlay />
</template>

วิธีใช้

<script setup lang="ts">
import { UiButton, UiInput, UiModal, UiSelect, useToast, type SelectOption } from 'adc-ui-kit'
import { Plus } from 'lucide-vue-next'
import { ref } from 'vue'

const name = ref('')
const branch = ref<string | null>(null)
const open = ref(false)
const toast = useToast()

const BRANCHES: SelectOption[] = [
    { value: 'hq', label: 'สำนักงานใหญ่' },
    { value: 'east', label: 'สาขาตะวันออก' },
]

function save() {
    open.value = false
    toast.success('บันทึกแล้ว')
}
</script>

<template>
    <UiButton :icon="Plus" @click="open = true">เพิ่มลูกค้า</UiButton>

    <UiModal v-model="open" title="เพิ่มลูกค้า">
        <div class="flex flex-col gap-4">
            <UiInput v-model="name" label="ชื่อ" required />
            <UiSelect v-model="branch" label="สาขา" :options="BRANCHES" searchable />
        </div>
        <template #footer>
            <UiButton variant="ghost" @click="open = false">ยกเลิก</UiButton>
            <UiButton @click="save">บันทึก</UiButton>
        </template>
    </UiModal>
</template>

ไอคอนใช้ lucide-vue-next ซึ่งติดตั้งมาพร้อม kit แล้ว ส่งเป็นตัว component เลย เช่น :icon="Plus"

เปลี่ยนธีม

เขียน @theme ต่อจากบรรทัด import แล้วใส่เฉพาะ token ที่อยากเปลี่ยน ทั้ง component ของ kit (รวมปฏิทินด้วย) และ class ของโปรเจกต์เองจะเปลี่ยนตาม

@import 'adc-ui-kit/tailwind.css';

@theme {
    --color-primary: #7c3aed;
    --color-primary-hover: #6d28d9;
    --color-primary-soft: #ede9fe;
    --radius-control: 12px;
}

token ทุกตัวเป็น CSS variable ด้วย ใน CSS ของโปรเจกต์เขียน var(--color-primary) ได้เลย

Component

v-model คือค่าที่ผูกกับตัวแปร ส่วนช่องฟอร์มทุกตัวรับ label, required, hint, error และ disabled ได้ด้วย

tone เลือกได้จาก primary, ok, warn, danger และ neutral

ตัวอย่างตาราง

<script setup lang="ts">
import { UiBadge, UiTable, type TableColumn } from 'adc-ui-kit'

const COLUMNS: TableColumn[] = [
    { key: 'code', label: 'รหัส', mono: true, width: '120px' },
    { key: 'name', label: 'ชื่อ' },
    { key: 'status', label: 'สถานะ', align: 'center' },
]
const rows = [{ code: 'C-001', name: 'สมชาย', status: 'ใช้งาน' }]
</script>

<template>
    <UiTable :columns="COLUMNS" :rows="rows" :row-key="(row) => row.code">
        <template #cell-status="{ row }">
            <UiBadge tone="ok">{{ row.status }}</UiBadge>
        </template>
    </UiTable>
</template>

ใส่ sortable: true ในคอลัมน์แล้วตารางจะยิง @sort ให้ แต่ตารางไม่เรียงแถวเอง ต้องไปเรียงที่ต้นทางของข้อมูล เช่น API

Composable

import { useLoader, useToast } from 'adc-ui-kit'

const toast = useToast()
toast.success('บันทึกแล้ว')
toast.error('บันทึกไม่สำเร็จ', { title: 'ผิดพลาด', duration: 0 }) // duration 0 = ค้างจนกดปิด
toast.warning('...')
toast.info('...')

const { withLoader, isLoading } = useLoader()
await withLoader(() => api.save(payload)) // ม่านโหลดขึ้นจนกว่างานจะเสร็จ

ทั้งสองตัวต้องมีจุดแสดง (<UiToast /> หรือ <UiLoaderOverlay />) อยู่ใน App.vue

Type

import type { Align, ButtonVariant, SelectOption, Size, SortDirection, TabItem, TableColumn, Tone, Toast } from 'adc-ui-kit'

ข้อควรรู้

• มีแต่โทนสว่าง ไม่มี dark mode