tikin-uai

A React design system built on top of Chakra UI v3, with components documented and tested in Storybook.

Installation

npm install tikin-uai @chakra-ui/react react react-dom

@chakra-ui/react, react, and react-dom are peer dependencies and must be installed alongside tikin-uai.

Usage

Wrap your app with Chakra's Provider, passing the design system's system (theme):

import { Provider } from "@chakra-ui/react"
import { system } from "tikin-uai"

export default function Root() {
  return (
    <Provider system={system}>
      <App />
    </Provider>
  )
}

Once wrapped, any Chakra component (and tikin-uai component) in your tree picks up the design system's colors, spacing, typography, and other tokens automatically — e.g. <Box bg="bg.canvas" color="text.body">.

Components

Button

import { Button } from "tikin-uai"

<Button colorPalette="primary" variant="solid">
  Save
</Button>

Props: variant (solid | subtle | surface | outline | ghost | plain), size (sm | md | lg), colorPalette (primary | secondary | info | warning | danger | success), plus all standard Chakra ButtonProps.

DataTable

A self-fetching table with sorting, per-column filtering, global search, pagination, and a row-actions menu — you provide a loader function, the table handles the rest.

import { DataTable, type DataTableColumn, type DataTableAction } from "tikin-uai"

type User = { id: number; name: string; email: string; role: string }

const columns: DataTableColumn<User>[] = [
  { key: "name", header: "Name", sortable: true, filterable: true },
  { key: "email", header: "Email", filterable: true },
  { key: "role", header: "Role", sortable: true },
]

const actions: DataTableAction<User>[] = [
  { label: "Edit", onClick: (row) => openEditModal(row) },
  { label: "Delete", variant: "danger", onClick: (row) => deleteUser(row.id) },
]

<DataTable
  columns={columns}
  actions={actions}
  enableSearch
  onDataLoading={async ({ page, pageSize, sort, search, filters }) => {
    const res = await fetch(`/api/users?${toQueryString({ page, pageSize, sort, search, filters })}`)
    return res.json() // { data: User[], pagination: { currentPage, pageSize, totalItems, totalPages } }
  }}
/>

onDataLoading is called on mount and whenever page, page size, sort, search, or column filters change. It must resolve to:

{
  data: T[]
  pagination: {
    currentPage: number
    pageSize: number
    totalItems: number
    totalPages: number
  }
}

Other notable props: rowKey, defaultPage, defaultPageSize, pageSizeOptions, searchPlaceholder, errorMessage, emptyMessage, size, variant. Pass a ref (typed as DataTableHandle) to call .refetch() manually after external mutations.

Development

npm run dev              # Vite dev server
npm run storybook        # Storybook at http://localhost:6006
npm run lint              # Oxlint
npm run build             # Build the library (dist/) and generate types
npm run build-storybook   # Static Storybook build

Tech Stack

• Chakra UI v3 — component primitives and theming
• Vite (library mode) — builds ES and CommonJS bundles
• Storybook — component documentation and visual testing (with a11y and Vitest addons)
• Oxlint — linting
• lucide-react — icons

License

MIT