Stable

Mulai dengan Aidash

Panduan lengkap untuk menginstal, mengkonfigurasi, dan menggunakan Aidash Components di project Next.js kamu — dari nol hingga production-ready.

Aidash Components adalah sistem komponen UI yang konsisten, fleksibel, dan siap pakai. Dibangun di atas Next.js 15, Tailwind CSS v4, dan Framer Motion — setiap komponen sudah teruji, accessible, dan mudah dikustomisasi sesuai brand project kamu.

Instalasi

Tiga langkah untuk menambahkan Aidash Components ke project kamu.

Install dependencies

Tambahkan Aidash Components dan peer dependencies ke project kamu.

Terminal

bash

npm install framer-motion
# or
pnpm add framer-motion

Copy komponen ke project

Salin folder src/components/aidash ke project kamu. Setiap komponen self-contained.

Terminal

bash

cp -r aidash-components/src/components/aidash ./src/components/aidash

Import dan gunakan

Import komponen dari folder aidash dan mulai membangun UI.

src/app/page.tsx

tsx

import { AidashButton } from "@/components/aidash/button";
import { AidashCard } from "@/components/aidash/card";
import { AidashInput } from "@/components/aidash/input";

export default function MyPage() {
  return (
    <div className="p-8 space-y-6">
      <AidashInput variant="outlined" placeholder="Enter your name" />
      <AidashButton variant="primary" size="lg">
        Get Started
      </AidashButton>
    </div>
  );
}

Cara Penggunaan

Import komponen yang kamu butuhkan, passing props, dan selesai. Tidak perlu konfigurasi tambahan.

Setiap komponen Aidash dirancang self-contained — import langsung dari folder aidash, gunakan props untuk mengatur variant, size, dan state. Semua komponen mengikuti pola API yang konsisten sehingga kalau kamu sudah paham satu komponen, komponen lainnya terasa familiar.

Lihat Semua Komponen

Button variants

tsx

<AidashButton variant="primary">Primary</AidashButton>
<AidashButton variant="secondary">Secondary</AidashButton>
<AidashButton variant="outline">Outline</AidashButton>
<AidashButton variant="ghost">Ghost</AidashButton>
<AidashButton variant="destructive">Delete</AidashButton>

Card with props

tsx

<AidashCard variant="elevated" hover>
  <AidashCard.Header>
    <h3>Card Title</h3>
  </AidashCard.Header>
  <AidashCard.Body>
    <p>Content goes here with consistent spacing.</p>
  </AidashCard.Body>
  <AidashCard.Footer>
    <AidashButton variant="primary" size="sm">
      Action
    </AidashButton>
  </AidashCard.Footer>
</AidashCard>

Form with validation

tsx

<AidashInput
  variant="outlined"
  label="Email Address"
  type="email"
  state="error"
  helperText="Please enter a valid email"
  prefixIcon={<MailIcon />}
/>

Kustomisasi Tema

Ubah tampilan seluruh library hanya dengan mengedit design tokens di @theme — tanpa perlu menyentuh kode komponen.

Aidash Components menggunakan CSS custom properties melalui Tailwind v4 @theme block. Ganti warna primary, accent, surface, dan ink sesuai brand kamu — semua komponen otomatis mengikuti. Tidak perlu prop theme atau context provider.

Primary & Accent

--color-primary

Warna utama — CTA, links, active states

--color-primary-hover

Hover state primary

--color-accent

Warna aksen — highlights, badges

Surface & Background

--surface

Background default

--surface-sunken

Alternating section background

--surface-elevated

Cards, modals, dropdowns

Text & Border

--text

Primary text color

--text-muted

Secondary/muted text

--border

Borders, dividers

src/app/globals.css

css

/* globals.css — @theme block */
@theme {
  /* 🎨 Change these to match your brand */
  --color-primary: oklch(55% 0.25 270);
  --color-accent: oklch(78% 0.15 195);

  /* Surfaces */
  --color-surface: oklch(99% 0.005 270);
  --color-surface-alt: oklch(96% 0.01 270);
  --color-surface-elevated: oklch(100% 0 0);

  /* Text */
  --color-ink: oklch(22% 0.08 280);
  --color-ink-muted: oklch(22% 0.08 280 / 0.55);

  /* Borders */
  --color-border: oklch(88% 0.02 270);
}

Lihat Sistem Warna Lengkap