Components

Joko-UI provides a comprehensive set of Vue 3 components inspired by Joko Widodo's leadership and Indonesian identity.

Available Components

Action Components

🔘

JButton

Presidential buttons for primary actions. Multiple variants, sizes, and states.

Documentation →Storybook ↗

Feedback Components

📢

JAlert

Clear, accessible alerts for success, warning, error, and info messages.

Documentation →Storybook ↗

Display Components

🏷️

JBadge

Versatile badges for status indicators, labels, and counts.

Documentation →Storybook ↗

Component Principles

All Joko-UI components follow these core principles:

🏗️ Built to Last

Like infrastructure projects, components are engineered for reliability and long-term use.

🤝 Accessible by Default

WCAG 2.1 AA compliant with keyboard navigation, screen reader support, and proper ARIA attributes.

🎨 Themeable

Consistent use of design tokens allows easy customization while maintaining the design system.

📱 Responsive

All components work seamlessly across devices from mobile to desktop.

⚡ Performance-Focused

Optimized bundle sizes, tree-shakeable exports, and efficient rendering.

🔧 Developer-Friendly

Full TypeScript support, clear props, emitted events, and comprehensive documentation.

Usage Patterns

Import Individual Components

import { JButton, JAlert } from '@joko-ui/vue'

Use with TypeScript

import type { JButtonProps, JAlertProps } from '@joko-ui/vue'

Customize with Design Tokens

<style scoped>
.my-component {
  --joko-red-600: #your-custom-color;
}
</style>

Coming Soon

We're actively working on expanding the component library. Upcoming components include:

• JInput - Text inputs, textareas, and form controls
• JSelect - Dropdown selection component
• JCheckbox & JRadio - Selection controls
• JCard - Container component for grouped content
• JModal - Dialog and modal overlays
• JTable - Data tables with sorting and pagination
• JTabs - Tabbed navigation component
• And more!

Want to request a component? Open an issue on GitHub

Component Status

Component	Status	Version
JButton	✅ Stable	1.0.0
JAlert	✅ Stable	1.0.0
JBadge	✅ Stable	1.0.0
JInput	🚧 In Progress	-
JCard	📋 Planned	-
JModal	📋 Planned	-

---