@capy-vn/ui
v1.0.4
Published
Capy shared component library — shadcn/ui + Tailwind CSS
Downloads
1,453
Readme
@capy-vn/ui
Thư viện component dùng chung cho các project frontend, xây dựng trên shadcn/ui + Radix UI + Tailwind CSS.
Cài đặt
# npm
npm install @capy-vn/ui
# yarn
yarn add @capy-vn/ui
# pnpm
pnpm add @capy-vn/uiSetup
1. Import CSS
Trong app/globals.css hoặc app/layout.tsx:
/* globals.css */
@import "@capy-vn/ui/styles";
@tailwind base;
@tailwind components;
@tailwind utilities;Hoặc trong layout.tsx:
import "@capy-vn/ui/styles";2. Cấu hình Tailwind
Thêm path vào tailwind.config.js để Tailwind scan được class từ library:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./node_modules/@capy-vn/ui/dist/**/*.{js,mjs}", // <-- thêm dòng này
],
theme: {
extend: {},
},
plugins: [],
};3. Thêm Toaster (cho toast notifications)
Trong root layout:
import { Toaster } from "@capy-vn/ui";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Toaster />
</body>
</html>
);
}Sử dụng
import { Button, Input, Card, CardContent } from "@capy-vn/ui";
export function LoginCard() {
return (
<Card>
<CardContent className="space-y-4 p-6">
<Input placeholder="Email" type="email" />
<Button className="w-full">Đăng nhập</Button>
</CardContent>
</Card>
);
}Form với react-hook-form
Các component Form* đã tích hợp sẵn react-hook-form:
import { useForm } from "react-hook-form";
import { Form, FormInput, FormSelect, Button } from "@capy-vn/ui";
export function CreateUserForm() {
const form = useForm({ defaultValues: { name: "", role: "" } });
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(console.log)} className="space-y-4">
<FormInput name="name" label="Tên" placeholder="Nhập tên..." />
<FormSelect
name="role"
label="Vai trò"
options={[
{ value: "admin", label: "Admin" },
{ value: "user", label: "User" },
]}
/>
<Button type="submit">Tạo</Button>
</form>
</Form>
);
}Danh sách Components
UI Primitives
| Component | Import |
|-----------|--------|
| Button | @capy-vn/ui |
| Input | @capy-vn/ui |
| Textarea | @capy-vn/ui |
| Label | @capy-vn/ui |
| Checkbox | @capy-vn/ui |
| Switch | @capy-vn/ui |
| RadioGroup, RadioGroupItem | @capy-vn/ui |
| Select, SelectTrigger, SelectContent, SelectItem | @capy-vn/ui |
| SearchSelect | @capy-vn/ui |
| MultiSelect | @capy-vn/ui |
| NumberInput | @capy-vn/ui |
| Slider | @capy-vn/ui |
| OtpInput | @capy-vn/ui |
| FileUpload | @capy-vn/ui |
| Badge | @capy-vn/ui |
| Avatar, AvatarImage, AvatarFallback | @capy-vn/ui |
| Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription | @capy-vn/ui |
| Alert, AlertTitle, AlertDescription | @capy-vn/ui |
| Separator | @capy-vn/ui |
| Progress | @capy-vn/ui |
| Skeleton | @capy-vn/ui |
| Accordion, AccordionItem, AccordionTrigger, AccordionContent | @capy-vn/ui |
| Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter | @capy-vn/ui |
| AlertDialog, AlertDialogTrigger, AlertDialogContent, ... | @capy-vn/ui |
| Sheet, SheetTrigger, SheetContent | @capy-vn/ui |
| Popover, PopoverTrigger, PopoverContent | @capy-vn/ui |
| DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem | @capy-vn/ui |
| Tabs, TabsList, TabsTrigger, TabsContent | @capy-vn/ui |
| Tooltip, TooltipTrigger, TooltipContent, TooltipProvider | @capy-vn/ui |
| ScrollArea | @capy-vn/ui |
| Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator | @capy-vn/ui |
| Calendar | @capy-vn/ui |
| DatePicker | @capy-vn/ui |
| DateRangePicker | @capy-vn/ui |
| TimePicker | @capy-vn/ui |
| DatetimePicker | @capy-vn/ui |
| DatetimeRangePicker | @capy-vn/ui |
| Toaster | @capy-vn/ui |
Forms (tích hợp react-hook-form)
| Component | Mô tả |
|-----------|-------|
| FormInput | Input field |
| FormTextarea | Textarea field |
| FormCheckbox | Checkbox field |
| FormSwitch | Switch field |
| FormSelect | Select dropdown |
| FormNumberInput | Số nguyên / thập phân |
| FormSlider | Range slider |
| FormOtpInput | OTP input |
| FormMultiSelect | Multi-select |
| FormFileUpload | File upload |
| FormDatePicker | Chọn ngày |
| FormTimePicker | Chọn giờ |
| FormDatetimePicker | Chọn ngày + giờ |
| FormDateRangePicker | Chọn khoảng ngày |
| FormDatetimeRangePicker | Chọn khoảng ngày + giờ |
Tất cả Form components nhận prop name, label, và description (optional hint text).
Layout
| Component | Mô tả |
|-----------|-------|
| PageLayout | Layout trang đầy đủ với header/content |
| SidebarLayout | Layout có sidebar |
| Container | Wrapper có max-width và padding |
| Stack | Flex stack (vertical) |
| HStack | Flex stack ngang |
| VStack | Flex stack dọc |
Navigation
| Component | Mô tả |
|-----------|-------|
| Pagination | Phân trang với usePagination hook |
| Stepper | Stepper multi-step |
Data Display
| Component | Mô tả |
|-----------|-------|
| DataTable | Table với TanStack Table |
| StatCard | Card hiển thị số liệu |
| EmptyState | Màn hình trống |
| DescriptionList | Danh sách key-value |
| Timeline | Timeline sự kiện |
Feedback
| Component | Mô tả |
|-----------|-------|
| LoadingSpinner | Spinner loading |
| LoadingOverlay | Overlay loading toàn màn hình |
| ConfirmDialog | Dialog xác nhận hành động |
| Result | Trang trạng thái (success/error/warning) |
Hooks
import { useDisclosure, useDebounce, usePagination, useLocalStorage } from "@capy-vn/ui";| Hook | Mô tả |
|------|-------|
| useDisclosure() | Quản lý trạng thái open/close (modal, dropdown) |
| useDebounce(value, delay) | Debounce giá trị |
| usePagination(options) | Logic phân trang |
| useLocalStorage(key, initial) | Đọc/ghi localStorage |
Utilities
import { cn } from "@capy-vn/ui";
// Kết hợp Tailwind class
<div className={cn("base-class", condition && "conditional-class")} />Peer Dependencies
Project sử dụng library cần có sẵn:
{
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwindcss": "^3.0.0"
}Next.js là optional — library hoạt động với bất kỳ React 19+ project nào.
Cập nhật
npm update @capy-vn/uiLicense
MIT © Tâm Nguyễn