k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
Switch to dark mode
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI
k8ordo

React libraries that use Baseline features without holding back.

Packages
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI Chat
  • Generative UI
  • AI Agents
  • Storybook
Resources
  • GitHub
  • npm

© 2026 k8o — MIT License

Typeset in Noto Sans JP & M PLUS 2

Get Started

k8ordo UI is a UI component library built with React 19. Interactive elements like forms and cards feel approachable with rounded shapes and generous spacing, while informational elements stay crisp and clear. Calm but never boring UI.

Installation

Install with your preferred package manager.

npm
yarn
pnpm

Setup

After installation, complete the following two configuration steps.

1. CSS

Import the prebuilt CSS at your application entry point. No Tailwind CSS setup is required.

Projects using Tailwind CSS 4 can import the source entry instead, which also makes the design tokens available as Tailwind classes in your own markup.

2. Provider

Wrap your application with UIProvider.

Usage

Once setup is complete, you can import and use components.

Requirements

k8ordo UI requires the following peer dependencies.

  • React >= 19.0.0
  • React DOM >= 19.0.0
  • Tailwind CSS >= 4.0.0 (optional: tailwind.css)
  • TypeScript >= 6.0.0

Next Steps

  • Browse the component catalog to discover available UI parts
  • Learn how to customize the theme
  • Switch the built-in wording to English or replace it
  • View detailed documentation for each component in Storybook
npm install @k8ordo/ui
import '@k8ordo/ui/styles.css';
import '@k8ordo/ui/tailwind.css';
import { UIProvider } from '@k8ordo/ui';

function App({ children }) {
  return (
    <UIProvider>
      {children}
    </UIProvider>
  );
}
import { Button, Heading } from '@k8ordo/ui';

function MyComponent() {
  return (
    <div>
      <Heading level="h1">Hello k8ordo UI</Heading>
      <Button variant="solid">Click me</Button>
    </div>
  );
}