1. Components
  2. introduction

Introduction

A collection of React UI components and blocks built with TailwindCSS v4 and React Aria Components, featuring CSS variable-based customization and shadcn/ui compatibility

Overview

JK-UI is a React component library distributed via the shadcn registry, built on react-aria-components and styled with TailwindCSS v4.
It provides a complete set of accessible, customizable components that you install directly into your codebase — you own the code, not a dependency.

What makes JK-UI different?

  • shadcn-compatible — Works with the standard shadcn init --base aria flow. Install components via npx shadcn add @jk-ui/{name}.
  • Semantic theming — Full shadcn-standard CSS variable system (--background, --foreground, --primary, --muted, etc.) plus extended jk-ui tokens for advanced customization.
  • React Aria Components — Accessible, headless primitives with built-in keyboard navigation, screen reader support, and internationalization.
  • TailwindCSS v4 — Utilities, @theme integration, and @utility directives for clean, composable styling.
  • 17 theme presets — Built-in color themes (default, air, earth, fire, water, and more) switchable via CSS variables.
  • 60+ components — Buttons, forms, overlays, tables, charts, navigation, and layout primitives.
  • Pre-built blocks — Login forms, sidebars, KPI cards, marketing sections, and application shells.

Quick Links

Getting Started

Set up JK-UI in your project

Components

Browse the available components

Theming

Customize colors, borders, and radii

Acknowledgements

JK-UI is built on the shoulders of excellent open-source projects:
  • shadcn/ui — The foundation: semantic token system, component architecture, and registry-based distribution model
  • Intent UI — Design adaptations: semantic color organization and token structure
  • Flexiwind — Layout patterns and utility-first CSS approach
We adapted these ideas into a cohesive system faithful to shadcn's design philosophy while adding our own layer of semantic theming and prebuilt blocks.

License

MIT — see LICENSE for details.
Principles

Core design tokens and development philosophy.

Next
On this page