Introduction

Naraya Design System adalah library komponen production-ready untuk ekosistem digital Naraya. Dibangun untuk Next.js + Tailwind CSS dengan estetika cyber-enterprise.

Overview

Konsistensi visual & developer experience untuk seluruh sub-produk Naraya.

48 Komponen

Tier 0-4: dari layout primitives sampai DataTable advanced. Semua siap pakai.

Zero External UI Deps

Plain CSS + CSS variables. Hanya lucide-react untuk icon, sisanya original Naraya.

Built for Ekosistem

NaraEdu, NaraAI, NaraBiz — semua satu DNA visual. Bilingual ID/EN, theme-ready.

Filosofi Desain

Empat prinsip yang mengikat setiap keputusan.

Mature, bukan loud

Warna saturated tapi profesional. Animasi cepat, tidak distraktif.

Mobile-friendly, web-first

Responsive utility, breakpoints konsisten. Native mobile coming later.

Token-first, bukan class-first

Edit satu CSS variable, ratusan komponen update otomatis.

Accessible by default

ARIA roles, keyboard nav, focus visible, reduced-motion respect.

Langkah Selanjutnya

Installation →

Pasang @naraya/ui di project Anda.

Theming & Tokens →

Customize warna & breakpoint via CSS variables.

Bilingual Setup →

Aktifkan dukungan ID/EN dengan LangProvider.

Foundations: Typography →

Pelajari sistem typography Naraya.