Skip to content

@karni/ui

Everything the package exports from its root (import { ... } from "@karni/ui"), from the manifest built with the package (@karni/ui/manifest.json, which coding agents read too). Props and usage are in the package README; the resource components render from the backend's OpenAPI schema, so a page is a few lines composing them (see the tutorial).

Resource components (schema-driven)

  • ResourceTable — role data-table
  • ResourceForm — role resource-form
  • ResourceDetail — role detail-view
  • ResourceSelect — role async-select
  • ChangeHistory — role change-history
  • ResourceImport — role resource-import

App shell and pages

  • Layout — role layout-shell
  • Page — role page-shell
  • EmptyState — role empty-state
  • Modal — role modal
  • ModalClose
  • Toaster — role toast
  • Stat — role stat
  • DataChart — role chart
  • FileUpload — role file-upload
  • KarniMark

Auth

  • AuthProvider
  • AuthGuard — role auth-guard
  • LoginForm — role login-form
  • KarniProvider

Primitives

Styled Radix parts and basics; className always merges, refs are forwarded.

Button, Checkbox, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea

Hooks

  • useAuth — { user, status, login(email, password), logout, refresh } from AuthProvider.
  • useChangeHistory — One row's field-level change history (GET /<resource>/<id>/history/, audited models).
  • useImportActions — upload, preview (the dry run) and commit mutations of an import.
  • useImportDescribe — The importable fields of a resource and the user's remembered column mapping.
  • useImportJob — One import job's state; polls while the backend previews or commits it.
  • useKarniClient — The KarniClient behind every hook: client.request(path, { method, body, query }) for custom actions.
  • usePermission — { hasRole(...names), isAuthenticated } for gating UI on roles.
  • useResourceItem — One row by id, optionally expanded.
  • useResourceList — A page of a resource: { page, pageSize, ordering, search, filters, expand } → DRF's { count, next, previous, results }.
  • useResourceMutations — create, update, remove for a resource; they invalidate the resource's queries on success.
  • useSchema — The parsed OpenAPI schema of one resource (fields, operations, access).
  • useToast — Show a toast through the mounted Toaster.

Component roles

Every top-level component claims one semantic role; karni make component refuses a role another component holds (compose it instead), and karni context lists them.

Role Component
async-select ResourceSelect
auth-guard AuthGuard
change-history ChangeHistory
chart DataChart
data-table ResourceTable
detail-view ResourceDetail
empty-state EmptyState
file-upload FileUpload
layout-shell Layout
login-form LoginForm
modal Modal
page-shell Page
resource-form ResourceForm
resource-import ResourceImport
stat Stat
toast Toaster