Components
nessa-ui is a set of accessible React components and tokens for AI products. It covers primitives, layout, data, charts, files, conversation, agent and git surfaces.
Components own the behaviour and hand back the presentation: renderEvent and renderTask for the calendar and Gantt, node and card children for the canvas and board, compound parts everywhere else. Unlike an unstyled primitives library, each component arrives with a default skin painted in tokens rather than fixed colour.
The library owns the drag models, pan and zoom, streaming, focus order and keyboard paths.
Calendar events, Gantt bars, board cards and canvas nodes are rendered by the consumer, through render props and children.
Every surface is assembled from named parts, so one can be rearranged without forking the component.
Every part carries a data-slot and merges className. Tokens drive light and dark.
An agent app assembled from these components: sidebar, split panes, transcript, composer, board, calendar, Gantt timeline, workflow canvas and a terminal dock. The source of each surface opens inside the app.
Installation
Install the package, or copy the source into your project. Both paths give the same code, which lives at github.com/nessalabs/nessa_ui.
npm install @nessa-ui/react # or copy the source into your projectnpx shadcn@latest add https://nessalabs.ai/r/tool-call.jsonAll components
A button that triggers an action, in six variants and four sizes.
A single-line text field.
A checkbox built on a real input, with a mixed state for a set that is only partly selected.
A compact label that marks status, in four variants.
A bordered surface with header, content, footer and action slots.
A tablist that swaps one panel for another, with roving focus and arrow-key movement.
A row of mutually exclusive options. Arrow keys move between them.
A nav of numbered page buttons between previous and next controls. The host computes the window and holds the page.
A menu of actions anchored to a trigger, with checkbox and radio items, shortcut hints and submenus.
A right-click menu of actions, with checkbox and radio items, shortcut hints and submenus.
A floating card surface that overlay chrome sits on, leaving positioning and dismissal to its host.
A single-select list under a search field, where the host renders each row.
A single-select list grouped under sticky headers, where arrow keys move across the section boundaries.
An avatar painted from a seed, where the same identity always paints the same picture.
A gradient backdrop built from a palette, under an optional hairline pattern and a grain layer.
A mesh-gradient backdrop of blurred colour fields that circulate on closed-loop paths.
An application frame of header, docks and status bar around a workspace of panes that split, move and resize.
A collapsible navigation rail beside the page, with grouped menus, submenus and tooltips once collapsed to icons.
A pair of resizable panels around a draggable separator. Arrow keys resize it from the keyboard.
A deck of windows that snaps one to the centre and opens an overview of tiles on Mod+G.
A modal panel anchored to one edge of the viewport, sliding in on the motion tokens.
A bottom sheet that rises over its nearest positioned ancestor and fills it when dragged up.
A fixed-height list that mounts only the rows in view. Offscreen rows unmount; durable state stays with the host.
A data table on a flat bordered shell, with the toolbar, sorting, column menu and pager as separate pieces.
A board of columns and draggable cards. Moves report through onCardMove.
A day, week and month scheduler. Events are created, moved and resized by drag.
A section outline on a rail that jogs with heading depth, tracking the section being read.
A structured view of a JSON value, with optional per-branch collapse.
A pie or donut of one wedge per slice, where hovering isolates a wedge and clicking selects it.
A radar of values on spokes, one closed outline per series, with a probe along each axis.
A flow diagram of node bars joined by ribbons whose thickness carries the flow.
A price plot with a scrubbable cursor and price and time scales, drawn as a line or candles.
A quote panel of price, change, range controls and key figures around a scrubbable price chart.
A project timeline of bars, milestones and typed dependency arrows. Tasks are drawn, linked and rescheduled by drag or keyboard.
A band for a horizontal scale, whose pixel-offset cells can pin their labels as the scroll passes them.
A diagram rendered from Mermaid source, following the app's colour mode.
A block of syntax-highlighted code with a copy button. CodeBlockProvider sets the theme.
Markdown for message bodies, composing CodeBlock and MathBlock.
A KaTeX formula that holds its last valid render while the TeX is still streaming.
A previewer that renders a file by its detected kind, through renderers the host can replace.
A wrapper that turns whatever it contains into a file drop target, reporting the files it accepts.
A summary of changed files with per-file stats and a collapse toggle.
A row in a transcript, with assistant and user sides built from avatar, bubble and footer parts.
A transcript viewport that follows the live edge until the reader scrolls away, with a control to return.
A navigator beside a transcript that marks every turn and previews one on hover or focus.
A chat entry surface with an input, footer actions, attachments and submit.
A message input where attachments are atomic inline chips that keep their place in the sentence.
A queue of messages pending on a running turn. Entries can be reordered, steered and removed.
A control beside the composer that picks the tool-approval policy a turn runs under.
A model chooser grouped by provider, with search.
A thinking-level control and fast-mode toggle for the composer's model row.
A pill-shaped composer for small chat surfaces, with a light travelling its rim while the agent works.
A bubble transcript built from message, quote, reaction, receipt and attachment parts.
A strip of pill tabs for a chat window, with busy dots, attention badges and close controls.
A single row of everything attached to the message being written, collapsing its tail into a count.
A reading view that takes over a chat's transcript while the tab strip and composer stay in use.
Passages lifted from a document and the reader's comments on them, read as short conversations.
A searchable roster of conversations, each row painted from the avatar of its project.
A question flow of fieldsets, choices and free text, answered through a wrapping form.
An inline citation that opens its source card on hover or focus.
A pill of actions for the current text selection. Overflow actions sit in a scrolling shelf.
A single tool invocation that expands into its input, output and touched files. The label shimmers while it runs.
A permission request for a tool run. Setting a resolution makes the card inert.
A list of task rows, each carrying a todo, active, done or failed status.
A collapsed cue for a stretch of agent work, opening its thinking and tool calls elsewhere.
A panel naming an agent conversation, with compact actions and a section of project fields.
A container that holds an ambient placeholder while content is generated, then morphs into it.
A labelled hairline across a transcript, marking a day boundary, a model swap or a compaction.
A pan-and-zoom canvas of nodes and edges that can be dragged, connected and deleted.
Attribution
Open-source work nessa-ui is built on.
Framework and rendering model.
Token and utility layer.
Menu, popover, tab and dialog primitives.
Drag and drop under the Kanban board.
Source distribution model and registry format.
Default icon set.
Math, diagram and markdown rendering.
Roles, keyboard interaction, focus behaviour.