PHPackages                             vasui/ui-design - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. vasui/ui-design

ActiveLibrary[Utility & Helpers](/categories/utility)

vasui/ui-design
===============

Design tokens and reusable basic UI components for PHP and Laravel projects.

01↓50%PHP

Since Jun 23Pushed 1mo agoCompare

[ Source](https://github.com/andriSH30/ui-design)[ Packagist](https://packagist.org/packages/vasui/ui-design)[ RSS](/packages/vasui-ui-design/feed)WikiDiscussions main Synced 2w ago

READMEChangelogDependenciesVersions (1)Used By (0)

Vasui UI - Design Tokens & Component Library
================================================

[](#vasui-ui---design-tokens--component-library)

Vasui UI adalah perpustakaan komponen UI dasar dan token desain yang ringan, modular, dan modern yang dirancang menggunakan **Vanilla HTML, CSS, dan JS**.

Proyek ini sangat fleksibel dan siap didistribusikan via **NPM** (untuk proyek frontend berbasis JS/Webpack/Vite) maupun **Composer** (untuk proyek berbasis PHP/Laravel).

---

Fitur Utama
-----------

[](#fitur-utama)

- **Zero Dependencies:** Tidak bergantung pada framework CSS/JS tertentu (seperti Tailwind atau React).
- **Design Tokens:** Variabel CSS bawaan untuk warna, tipografi, bayangan, sudut lengkung, dan jarak yang konsisten.
- **Dark Mode Support:** Cukup gunakan atribut `data-theme="dark"` pada tag `` atau ``.
- **Integrasi Mudah:** Siap digunakan langsung di Laravel, HTML statis, WordPress, dll.

---

📦 Panduan Instalasi
-------------------

[](#-panduan-instalasi)

### 1. Menggunakan NPM

[](#1-menggunakan-npm)

Install package ke proyek frontend Anda:

```
npm install vasui-ui-design
```

*Catatan: Selama pengembangan lokal sebelum dipublish ke NPM registry, Anda bisa menginstall dari path direktori lokal:*

```
npm install /path/to/ui-design
```

#### Integrasi Aset:

[](#integrasi-aset)

Import CSS dan JS ke file entrypoint Anda (misalnya di Vite atau Webpack):

```
// Di file JS utama Anda (e.g., app.js)
import 'vasui-ui-design/dist/tokens.css';
import 'vasui-ui-design/dist/components.css';
import 'vasui-ui-design/dist/components.js';
```

---

### 2. Menggunakan Composer (PHP / Laravel)

[](#2-menggunakan-composer-php--laravel)

Jika ingin memanggilnya di proyek Laravel Anda, tambahkan package lokal ini ke file `composer.json` proyek Laravel Anda:

```
"repositories": [
    {
        "type": "path",
        "url": "../ui-design"
    }
]
```

Kemudian jalankan:

```
composer require vasui/ui-design
```

#### Publish Aset ke Laravel:

[](#publish-aset-ke-laravel)

Setelah di-install via Composer, publikasikan aset CSS dan JS statis ke direktori `public/` Laravel Anda dengan menjalankan perintah artisan berikut:

```
php artisan vendor:publish --tag=vasui-ui-assets
```

Aset akan disalin ke folder `public/vendor/vasui/` dan siap dipanggil di layout Blade Anda:

```

```

---

🛠️ Panduan Penggunaan Komponen
------------------------------

[](#️-panduan-penggunaan-komponen)

### 1. Buttons

[](#1-buttons)

Gunakan class `.btn` yang dipadukan dengan varian warna dan ukuran.

```

Primary Button
Secondary Button
Outline Button
Ghost Button

Small
Medium (Default)
Large

Disabled
Loading
```

### 2. Forms & Inputs

[](#2-forms--inputs)

Mendukung input teks standar, drop-down select, checkbox, dan radio button.

#### Text Input:

[](#text-input)

```

  Username

  Username minimal 5 karakter.

  Email

  Format email salah.

```

#### Select Dropdown:

[](#select-dropdown)

```

  Role

      Pilih salah satu role...
      Admin
      User

```

#### Checkbox & Radio:

[](#checkbox--radio)

```

  Ingat saya

  Transfer Bank

```

### 3. Modal Dialog

[](#3-modal-dialog)

Kontrol buka/tutup modal secara instan via global JS helper `UI.modal`.

```

Buka Modal

      Judul Modal
      ×

      Konten atau formulir di dalam modal...

      Batal
      Konfirmasi

```

### 4. Alert (Pesan Umpan Balik)

[](#4-alert-pesan-umpan-balik)

Mendukung penutupan alert secara otomatis lewat tombol close.

```

  ✓

    Berhasil!
    Data merchant telah disimpan.

  ×

```

*Pilihan varian alert:* `alert-info`, `alert-success`, `alert-warning`, `alert-danger`.

### 5. Data Tables

[](#5-data-tables)

Tabel data responsif dengan efek striped dan hover.

```

        No
        Nama
        Status

        1
        Budi Santoso
        Aktif

```

### 6. Cards

[](#6-cards)

```

    Judul Kartu

    Konten kartu...

    Footer info

```

---

🎨 Kustomisasi Design Tokens
---------------------------

[](#-kustomisasi-design-tokens)

Anda bisa dengan mudah menimpa (override) token warna, font, shadow, dll pada file CSS utama Anda menggunakan CSS variables:

```
:root {
  /* Override font default */
  --font-sans: 'Inter', sans-serif;

  /* Ganti warna utama brand Anda */
  --color-primary-500: #e02424; /* Merah */
  --color-primary-600: #c81e1e;
}
```

---

Lisensi
-------

[](#lisensi)

Proyek ini didistribusikan di bawah lisensi MIT.

###  Health Score

20

—

LowBetter than 12% of packages

Maintenance60

Regular maintenance activity

Popularity1

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity11

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/ee03919982f30a5f2a7730291374f91a45fd7588a0b1053c4b23559f6c694e4a?d=identicon)[andrish30](/maintainers/andrish30)

---

Top Contributors

[![andriSH30](https://avatars.githubusercontent.com/u/60417603?v=4)](https://github.com/andriSH30 "andriSH30 (2 commits)")

### Embed Badge

![Health badge](/badges/vasui-ui-design/health.svg)

```
[![Health](https://phpackages.com/badges/vasui-ui-design/health.svg)](https://phpackages.com/packages/vasui-ui-design)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)