YouBothAgent▾

You — Business rules and flows you own. Read these yourself.

Both — Know the idea; your agent follows the details.

Agent — Conventions and references your agent follows. Look up as needed.

CLI Reference▾

Commands Workspace Application Library Module Scalar Package Page Primitive Workflow Quality Context Agent Guideline

AkanJS Reference▾

akanjs/base akanjs/common akanjs/constant akanjs/fetch akanjs/signal akanjs/server akanjs/client akanjs/webkit

UI Reference▾

Overview Core Display Forms Overlays System Agent Customization

akanjs/ui

akanjs/ui is the framework's shared UI package: links, data loading, model CRUD shells, form controls, display helpers, overlays, the in-page agent and the app shell. Every name in this reference imports from that one path.

By Layer→

One page per layer you work in. Pick yours from the Page Map.

By Name→

Every export A to Z, each with the page that covers it. Start here when you know the name.

Page Map

Open the page for the layer you are working in. Each component there gets its own section: a props table, then the notes props alone cannot carry.

Core→

The parts most pages are built from: routing, images, page shells, data loading, model CRUD.Link, Image, Layout, Load, Model

Display→

Showing data and feedback: admin lists, relative times, loading and empty states, badges, tables.Data, RecentTime, Loading, Empty, Table, Pagination, Badge

Forms→

Form controls and buttons for templates, filters and admin screens.Field, Input, Select, Switch, Radio, ToggleSelect, DatePicker, Button

Overlays→

What opens over the page: modals, confirmations, sheets, menus, hints and copy buttons.Modal, Dialog, Popconfirm, Dropdown, BottomSheet, Tooltip, Menu, Portal, Copy

System→

The app shell, client-only boundaries, the API explorer, tabs and animation.System, ClientSide, Signal, Tab, animated

Agent→

The in-page agent: the layout chat, zones with their own conversation, route guidance, the dev dock.Agent.Chat, Agent.Zone, Agent.Guide, Agent.History, Agent.Skip, Agent.Scope, Agent.Dock

Customization→

Swap framework components per route with a page/**/_overrides.tsx file; call sites stay._overrides.tsx, override(), 46 slots

Recipes→

The className factories: use one, add one in apps/<app>/ui/Recipe/, or swap one via recipes.buttonRecipe, badgeRecipe, inputRecipe

Every Export

Every value akanjs/ui exports, A to Z. Use it when you know a name but not the page.

The label up front is the page. Each description starts with the page that covers that area; click it to go there.
A name with its own section links to it. Click the name itself to land on that section.
Only here means no page covers the name. The row is the whole documentation.
Type-only exports are left out. A type follows the component it describes, and a props interface is in that component's props table.

ExportDescription

Agent

Agent · The in-page agent namespace, with twelve members.

AgentAttachments

Agent · The attachment chips, drawn in the composer and on each sent message.

agentAttrs

Customization · The data-akan-* attributes for a handler passed by reference; spread them on your own control.

AgentProvider

Agent · Hands a subtree one session, passed in or built from a runner; an Agent.Chat inside uses it.

AgentReferences

Agent · The @ reference chips, drawn in the composer and on each sent message.

AgentSession

Agent · The conversation loop that runs in the browser; build one to own the transcript yourself.

agentSessionOf

Agent · Builds an AgentSession from the same options Agent.Chat takes.

animated

System · The react-spring animated elements: div, g and progress.

Badge

Display · The status pill.

badgeRecipe

Customization · The badge's className factory, and a recipe slot.

BottomSheet

Overlays · The mobile sheet, half or full height.

Button

Forms · The one button primitive; an onClick that returns a promise turns on its async states.

buttonRecipe

Customization · The button's className factory, and a recipe slot.

ChatCommands

Agent · The chat's slash-command registry: the whole / menu.

ClientSide

System · A small Suspense boundary for client-only content.

Clipboard

Overlays · A bare copy icon that turns into a check; Copy is the one with a success toast.

Constant

System · Doc and Graph: constant models as a schema document and as a relation graph.

Copy

Overlays · Wraps a trigger; a click copies text to the clipboard and shows a global success message.

createOverridable

Customization · Makes a framework component resolve through a route's override slot.

CsrImage

Core · Image without the optimizer: a plain img for a CSR-only bundle.

Data

Display · The admin listing screen, in nine parts.

DatePicker

Forms · The browser's native date field, plus RangePicker and TimePicker.

DefaultApproval DefaultBubble DefaultCode DefaultComposer DefaultLauncher DefaultMarkdown DefaultAgentMenu DefaultQuestion DefaultQueued DefaultSteps DefaultToolCard DefaultToast DefaultToastItem

Customization · The shipped default behind each matching slot, public so a replacement can compose it.

Dialog

Overlays · The headless dialog namespace that Modal is built on.

DragAction

Only here · A row that reveals a left and a right action when swiped, built from Body, Left and Right.

DraggableList

Only here · A drag-to-sort list with Item and Cursor; Field.TextList is built on it.

Dropdown

Overlays · The row-action menu: a trigger that opens a floating menu.

DROPDOWN_KEEP_OPEN_ATTR

Overlays · data-dropdown-keep-open: a click on an item carrying it leaves the menu open.

Empty

Display · The no-data placeholder.

fetchRunner

Agent · The default runner: sends each turn to the app's own runAgentTurn endpoint.

Field

Forms · The form-field namespace: a section wrapper and twenty members.

FontFace

Only here · Adds one ReactFont's @font-face rule in the browser; fonts from .fonts() are already handled.

httpRunner

Agent · A runner that POSTs each turn to a URL you name, streamed or not.

Image

Core · An image from a File model or a URL, served through the Akan optimizer.

InfiniteScroll

Only here · Loads the next batch when a sentinel scrolls into view; reverse prepends and keeps position.

Input

Forms · The text input, plus TextArea, Password, Email, Number and Checkbox.

inputRecipe

Customization · The field shell's className factory, and a recipe slot.

KeyboardAvoiding

Only here · Lifts its children above the on-screen keyboard.

Layout

Core · The page shell: content containers such as View and frame slots such as Navbar.

LegacyModal

Overlays · The previous modal skin, with spring transitions and drag-to-dismiss.

Link

Core · Route-aware navigation, plus Back, Close and Lang.

Load

Core · The fetch-to-React bridge: Units, View, Edit, Pagination, Page, Stream.

Display · Six loading indicators, one per shape of waiting.

maxAttachmentBytesmaxMessageAttachmentBytesmaxMessageAttachments

Agent · The composer's default attachment limits: 4 MB a file, 8 MB and five files a message.

Overlays · A navigation menu built from an item tree.

Modal

Overlays · The modal: drive it with open, or hand it a trigger that opens it on click.

Model

Core · The CRUD shells for a generated model store, with fifteen members.

Only here · A list footer: infinite scroll on mobile, a pager elsewhere; Load.Units uses it by default.

ObjectId

Only here · A document id cut to its ends, with the full id in a tooltip and a copy button.

OverlayOwnerProviderisOwnOverlayClickOVERLAY_LAYER_ATTRuseOverlayLayerPropsuseOverlayScope

Overlays · How a menu tells a click in an overlay it opened from a click outside.

override

Customization · Builds the manifest an _overrides.tsx exports; it returns the map unchanged and checks its types.

Pagination

Display · The pager, taking its numbers as props.

Popconfirm

Overlays · A small confirmation before a destructive action.

Portal

Overlays · Renders into the host element with the given id, SSR included.

Radio

Forms · The radio group, with Item.

RecentTime

Display · A relative time label, with the absolute date in a tooltip.

recipe tv

Customization · The two factories every recipe is built from: recipe(tv({ ... })).

Reference

Agent · Helpers for an @ reference: its token in the draft, its identity and its size cap.

Refresh

Only here · Pull-to-refresh around a scrolling child.

ScreenNavigator

Only here · A swipeable pager across Screens, with NavbarItem; namespace publishes it to the agent.

Select

Forms · The selector: single, multiple or searchable.

SessionContext

Agent · The React context Agent.Zone and AgentProvider hand a session down through.

Signal

System · The API explorer, in eight namespaces.

Switch

Forms · An on/off toggle, drawn as a role="switch" button.

System

System · The app shell: Provider, Root and four controls.

Tab

System · Tabs split into parts so the panels stay on the server.

Table

Display · Draws rows you already have, with columns and an optional pager.

Toast

System · The toast stack System.Provider mounts; you write into it with msg.*.

ToggleSelect

Forms · A choice drawn as a row of buttons, with Multi.

tokenCount

Agent · Formats a token estimate as a short label: 950, 1.2k, 3.4M.

Tooltip

Overlays · A pure-CSS hint shown on hover or focus.

triggerSlot

Customization · Clones a caller's trigger so aria state lands on the real control.

UiOverrideProvider

Customization · The provider behind every _overrides.tsx; mount one yourself to override a subtree.

Unauthorized

Display · The no-access placeholder, shaped like Empty; you render it yourself.

useAgent

Agent · Reads the enclosing session from a component.

useAgentReference

Agent · Returns a function that puts data a component shows into the draft as an @ chip.

useUiOverride useUiRecipe

Customization · How a component looks up its own component slot and recipe slot on the current route.

Previousakanjs/webkit NextCore