Joko-UI

🏗️

Infrastructure-Inspired

Built like the foundations of Indonesia's development projects - solid, scalable, and made to last. Every component is a building block for your application.

🤝

Accessible & Approachable

Following Jokowi's people-first philosophy, our components are WCAG 2.1 AA compliant and designed to be intuitive for all users.

🚀

Modern & Progressive

Embracing innovation while honoring tradition. Built with Vue 3, TypeScript, and the latest web standards for exceptional developer experience.

🇮🇩

Indonesian at Heart

Featuring colors inspired by national identity, optional batik patterns, and support for Bahasa Indonesia. Celebrating local design.

🎨

Complete Design System

Comprehensive design tokens, typography scales, spacing systems, and component guidelines based on formal yet approachable aesthetics.

📚

Well Documented

Extensive documentation, live examples, Storybook integration, and code snippets. Everything you need to build with confidence.

Design Philosophy

Inspired by leadership that builds for the people

"Kerja, kerja, kerja" — Joko Widodo

🏗️ Solid Foundation

Like infrastructure projects, our components are built to last. Every element is carefully engineered for reliability and scalability.

<div class="value-card">
  <h3 class="value-title">💬 Clear Communication</h3>
  <p class="value-description">
    Transparent, understandable interfaces for all users. No hidden complexity, just straightforward design that makes sense.
  </p>
</div>

<div class="value-card">
  <h3 class="value-title">⚡ Progressive Enhancement</h3>
  <p class="value-description">
    Modern technology serving timeless needs. We embrace innovation while maintaining accessibility and usability.
  </p>
</div>

<div class="value-card">
  <h3 class="value-title">🇮🇩 Cultural Identity</h3>
  <p class="value-description">
    Subtle Indonesian influences throughout. Celebrating national pride through design that honors local heritage.
  </p>
</div>

Live Component Previews

See Joko-UI components in action

JButton - Action Components

Presidential buttons inspired by Jokowi's bold, action-oriented leadership. Available in multiple variants and sizes.

<div class="component-card">
  <h3 class="component-title">JAlert - Notifications</h3>
  <div class="component-preview">
    <JAlert variant="success" title="Success!">
      Proyek berhasil diselesaikan.
    </JAlert>
    <JAlert variant="warning" title="Perhatian">
      Harap tinjau sebelum melanjutkan.
    </JAlert>
    <JAlert variant="error" title="Error">
      Terjadi kesalahan dalam proses.
    </JAlert>
    <JAlert variant="info" title="Informasi">
      Pembaruan sistem tersedia.
    </JAlert>
  </div>
  <p style="color: var(--joko-neutral-600); font-size: 0.875rem; margin-top: 1rem;">
    Clear, accessible alerts for all types of messages. Supports Bahasa Indonesia content.
  </p>
</div>

<div class="component-card">
  <h3 class="component-title">JBadge - Status Indicators</h3>
  <div class="component-preview" style="flex-direction: row; flex-wrap: wrap; align-items: center;">
    <JBadge variant="primary">Featured</JBadge>
    <JBadge variant="success">Active</JBadge>
    <JBadge variant="warning">Pending</JBadge>
    <JBadge variant="error">Cancelled</JBadge>
    <JBadge variant="neutral">Draft</JBadge>
  </div>
  <p style="color: var(--joko-neutral-600); font-size: 0.875rem; margin-top: 1rem;">
    Versatile badges for status, categories, and labels. Multiple variants and sizes available.
  </p>
</div>

Indonesian-Inspired Color Palette

Presidential colors that convey authority and trust

Merah Jokowi (Primary Red)

Authoritative, passionate, action-oriented

red-100

#fee2e2

red-300

#fca5a5

red-500

#ef4444

red-600 ⭐

#dc2626

red-700

#b91c1c

red-800

#991b1b

<div>
  <h3 class="color-group-title">Biru Pembangunan (Development Blue)</h3>
  <p style="color: var(--joko-neutral-600); margin-bottom: 1rem;">Trust, stability, progress</p>
  <div class="color-swatches">
    <div class="color-swatch">
      <div class="color-box" style="background-color: #dbeafe;"></div>
      <div class="color-label">blue-100</div>
      <div class="color-value">#dbeafe</div>
    </div>
    <div class="color-swatch">
      <div class="color-box" style="background-color: #93c5fd;"></div>
      <div class="color-label">blue-300</div>
      <div class="color-value">#93c5fd</div>
    </div>
    <div class="color-swatch">
      <div class="color-box" style="background-color: #3b82f6;"></div>
      <div class="color-label">blue-500</div>
      <div class="color-value">#3b82f6</div>
    </div>
    <div class="color-swatch">
      <div class="color-box" style="background-color: #2563eb;"></div>
      <div class="color-label">blue-600 ⭐</div>
      <div class="color-value">#2563eb</div>
    </div>
    <div class="color-swatch">
      <div class="color-box" style="background-color: #1d4ed8;"></div>
      <div class="color-label">blue-700</div>
      <div class="color-value">#1d4ed8</div>
    </div>
    <div class="color-swatch">
      <div class="color-box" style="background-color: #1e40af;"></div>
      <div class="color-label">blue-800</div>
      <div class="color-value">#1e40af</div>
    </div>
  </div>
</div>

Joko-UIVue 3 Component Library