# kinu — Preact UI toolkit (LLM authoring guide) kinu is a performance-first Preact UI toolkit. Components are thin pass-throughs from JSX to semantic HTML: each attaches a `k=""` attribute to a native element, and **all styling and most behavior is driven by CSS attribute selectors** — not JavaScript. > This file is generated from the component metadata on every build, so it never drifts. Do not edit > it by hand. ## How to author kinu UI - Prefer kinu components over hand-rolled markup. If you are about to write a `
` with utility classes to build something kinu already ships (a stack, a grid, a metric block, a star rating, a copy button, a number stepper…), use the component instead. - Components forward every native attribute to the underlying element. Pass `min`, `max`, `disabled`, `name`, `required`, `aria-*`, `onInput`, `style`, etc. straight through. - Variants and states are **attributes**, styled in CSS — there is no per-instance JS state for them: ` … ``` Custom commands (`--prev`, `--next`, `--step-up`, `--step-down`) ride the same bus, so new interactive components add no new global event listeners. ## Forms Validation is native. Use `required`, `type="email"`, `min` / `max`, `pattern`, etc., and let the `:user-invalid` CSS layer surface errors only after interaction. Wrap a control in `Field` with `Field.Label`, `Field.Description`, and `Field.Error` (which reveals only when the field is invalid). No validation library and no "touched" state to manage. ## Toast ```tsx import {toast, ToastContainer} from 'kinu'; toast.show('Saved', {title: 'Success'}); // Mount once near the app root. ``` ## Component reference Every component below is a named export from `kinu`. The usage snippet shows its JSX shape; notes call out behavior and attributes. Compound parts (e.g. `Dialog.Trigger`, `Stat.Value`) are accessed as properties of the root export. ### Data Display #### Badge Tiny inline status indicator with multiple tone variants. ```tsx New ``` #### Chip Badge-like label with an optional inline action button. ```tsx Tag× ``` - Chip.Button fires standard click events with no custom event wiring. - Use the selected attribute to mark a chip as active. - Chip.Button automatically spans the full height and hugs the rounded edge. #### Accordion Disclosure built on the native `
` element with smooth open and close animation. ```tsx Details

Hidden content

 ``` - Forwards every native `
` attribute so you can control open state. - Provide your own `` element to define the trigger. - Pass the same `name` to multiple accordions to make them mutually exclusive — only one can be open at a time in a group (HTML 2024 `
`). #### Avatar Styled `` avatar that falls back to initials from the alt text. ```tsx ``` - Uses the alt attribute content as a CSS-rendered fallback when the image fails. - Override dimensions in CSS if you need sizes other than the 2rem default. - Wrap several avatars in `` to get the overlapping stacked layout. #### Card Surface container with padding, border, and typography defaults. ```tsx

Title

Content

 ``` - Wraps a `
` and exposes padding/variant control via attributes. #### Collapsible Minimal hide/show container built on `
` without default markers. ```tsx Hidden content ``` - Expose the open attribute for controlled usage. - Great for FAQs when you want custom trigger markup. #### Table Table wrapper with zebra striping and compact density. ```tsx ......
``` - Uses native `` markup so semantics stay intact. - Pass `sticky` to make `` cells stick to the top of the nearest scroll container. Wrap the table in a scrollable element (e.g. `
`) so the header has somewhere to stick relative to. #### Kbd Styled `` wrapper for keyboard shortcut glyphs. ```tsx ⌘K ``` - Wraps the native `` element so semantics stay intact. - Combine multiple keys in a single `` (e.g. `⌘S`) to render them as one keycap. - Pairs naturally with `Item` rows — drop a `` inside an item to show the shortcut on the trailing edge. #### Empty Centered placeholder for no-data / no-results states. ```tsx

No results

Try a different search.

 ``` - Centers heading, body text, and optional actions in a flex column. - Headings inherit the foreground color; body text defaults to muted foreground. #### Tree Composable tree view built from native `
` and `` primitives. ```tsx src index.ts ``` - State is native via the `open` attribute on `Tree.Group`. - Nest `Tree.Group` inside `Tree.GroupItems` for deeper hierarchies. #### Skeleton Animated shimmer placeholder for loading states. ```tsx ``` - Wraps a `
` so you can size it however you want. - Use data-rounded to switch to pill skeletons. #### Timeline Vertical sequence of events with connecting line + dot markers. ```tsx Jason pushed 3 commits ``` - Renders as `
    ` + `
  1. ` so activity feeds and audit logs stay semantic. - Dot and connector line are both drawn on each entry from one `--k-timeline-x` variable (the dot radius), so they can't drift out of alignment. - Drop a native `