@duapuluhtiga/ui
v0.1.0
Published
Design system internal **PT Duapuluhtiga** — kumpulan komponen UI, design tokens, dan panduan desain untuk membangun produk web konsisten di seluruh platform 23.
Readme
@duapuluhtiga/ui
Design system internal PT Duapuluhtiga — kumpulan komponen UI, design tokens, dan panduan desain untuk membangun produk web konsisten di seluruh platform 23.
Dibangun di atas React 19, Tailwind CSS v4, dan React Aria Components.
Instalasi
npm install @duapuluhtiga/uiPeer dependencies yang dibutuhkan
npm install react react-dom react-aria-components @untitledui/icons @untitledui/file-iconsQuick Start
1. Import CSS di root layout
Next.js (app/layout.tsx):
import "@duapuluhtiga/ui/style.css";Vite (src/main.tsx):
import "@duapuluhtiga/ui/style.css";2. Wrap app dengan ThemeProvider
import { ThemeProvider } from "@duapuluhtiga/ui";
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}3. Pakai komponen
import { Button, Badge, Input, Select } from "@duapuluhtiga/ui";
export default function Page() {
return (
<div>
<Button>Simpan</Button>
<Button variant="secondary">Batal</Button>
<Badge color="success">Aktif</Badge>
<Input label="Nama" placeholder="Masukkan nama..." />
</div>
);
}Komponen yang tersedia
Base
| Komponen | Import |
|---|---|
| Button | import { Button } from "@duapuluhtiga/ui" |
| Input, InputGroup, InputFile, InputNumber | import { Input, InputGroup } from "@duapuluhtiga/ui" |
| Select, MultiSelect, ComboBox | import { Select, MultiSelect } from "@duapuluhtiga/ui" |
| Badge, BadgeWithDot, BadgeWithIcon | import { Badge } from "@duapuluhtiga/ui" |
| Checkbox | import { Checkbox } from "@duapuluhtiga/ui" |
| Toggle | import { Toggle } from "@duapuluhtiga/ui" |
| RadioGroup, RadioButton | import { RadioGroup, RadioButton } from "@duapuluhtiga/ui" |
| TextArea | import { TextArea } from "@duapuluhtiga/ui" |
| Tooltip | import { Tooltip } from "@duapuluhtiga/ui" |
| Avatar, AvatarLabelGroup | import { Avatar } from "@duapuluhtiga/ui" |
| Slider | import { Slider } from "@duapuluhtiga/ui" |
| TagGroup, Tag | import { TagGroup, Tag } from "@duapuluhtiga/ui" |
| ProgressBar, ProgressBarCircle | import { ProgressBar } from "@duapuluhtiga/ui" |
| ButtonGroup | import { ButtonGroup, ButtonGroupItem } from "@duapuluhtiga/ui" |
| Dropdown | import { Dropdown } from "@duapuluhtiga/ui" |
Application
| Komponen | Import |
|---|---|
| Modal, Dialog | import { Modal, Dialog, DialogTrigger } from "@duapuluhtiga/ui" |
| Tabs, TabList, Tab, TabPanel | import { Tabs, TabList, Tab, TabPanel } from "@duapuluhtiga/ui" |
| Table, TableCard | import { Table } from "@duapuluhtiga/ui" |
| Pagination | import { PaginationPageDefault } from "@duapuluhtiga/ui" |
| EmptyState | import { EmptyState } from "@duapuluhtiga/ui" |
| DatePicker, DateRangePicker | import { DatePicker } from "@duapuluhtiga/ui" |
| FileUpload | import { FileUpload } from "@duapuluhtiga/ui" |
| LoadingIndicator | import { LoadingIndicator } from "@duapuluhtiga/ui" |
| Carousel | import { Carousel } from "@duapuluhtiga/ui" |
Foundations
| Komponen | Import |
|---|---|
| FeaturedIcon | import { FeaturedIcon } from "@duapuluhtiga/ui" |
| RatingBadge, RatingStars | import { RatingBadge, RatingStars } from "@duapuluhtiga/ui" |
| Social Icons | import { GitHub, LinkedIn, Twitter } from "@duapuluhtiga/ui" |
| Payment Icons | import { Visa, Mastercard } from "@duapuluhtiga/ui" |
Dark Mode
Package ini mendukung dark mode via class .dark-mode di root element:
import { useTheme } from "@duapuluhtiga/ui";
function ThemeToggle() {
const { theme, setTheme } = useTheme();
return (
<button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
Toggle theme
</button>
);
}Tech Stack
- React 18+
- Tailwind CSS v4
- React Aria Components — aksesibilitas WCAG
- Motion (Framer Motion) — animasi
- Untitled UI Icons
- Tailwind Merge
Lisensi
Internal use only — © PT Duapuluhtiga