@baotek/kubo-ui

Component library for Kubo back-office apps. Pure React components, Tailwind v4 + radix-ui + shadcn conventions (style: "new-york"), light/dark theme via CSS variables. No dependency on @baotek/kubo-core, no router import - components that render navigation (Button's to prop, Breadcrumb, StatCard) read a router-agnostic link component via context instead, defaulting to a plain <a href>.

Install

pnpm add @baotek/kubo-ui

Import the stylesheet once, alongside Tailwind, in your app's global CSS:

@import 'tailwindcss';
@import '@baotek/kubo-ui/dist/index.css';

What's in it

• Primitives - Button, TextField, SelectField, MultiSelectField, DateField, NumberField, CheckboxField, SearchSelect, StatusSelect, Badge, Avatar, Spinner, Skeleton, ProgressBar, DangerLink, and more.
• Composites - DataTable, FilterBar, Pagination, Modal, SlideOver, ConfirmDialog, PageActionBar, Breadcrumb, EmptyState, ErrorBanner, StatCard, SegmentedTabs, TabStrip, Cascader, TreeSelect, Transfer, RichTextField, and more.
• Theme - ThemeProvider, useTheme, ThemeToggle, light/dark via CSS variables.
• Router integration - LinkComponentProvider + useLinkComponent, override once with your app's own Link (react-router-dom's Link works directly; Next's Link needs a small to-to-href wrapper since its prop name differs).

Browse every component's stories and props with Storybook - clone the Kubo monorepo and run pnpm --filter @baotek/kubo-ui storybook.

NumberField keeps the controlled value as a raw numeric string and can format it for display:

<NumberField label="Budget" value={amount} onChange={setAmount} format="money" currency="USD" />
<NumberField label="Discount" value={discount} onChange={setDiscount} format="percentage" min={0} max={100} />

For a domain-specific format, pass an object with format and parse functions. MoneyField and PercentageField remain available as compatibility wrappers around these NumberField formats.

Usage

import { ThemeProvider, LinkComponentProvider, Button } from '@baotek/kubo-ui'
import { Link } from 'react-router-dom'

function App() {
  return (
    <ThemeProvider>
      <LinkComponentProvider component={Link}>
        <Button to="/orders">View orders</Button>
      </LinkComponentProvider>
    </ThemeProvider>
  )
}

Pairs with @baotek/kubo-core for the headless data/auth layer. Both are scaffolded automatically into new apps by Kubo's kubo-init-app agent skill.

Source: https://github.com/baotek/kubo.git (packages/ui).