Halaska UI: a UI kit for AI products

Halaska UI is a single-file React UI kit for AI products: 40 AI UX patterns and 90 styled components, built on the shadcn/ui base, with inline styles and no dependencies beyond react and react-dom. It is MIT licensed and installed by pasting one prompt into a coding agent such as Claude Code or Cursor. Made by Chris Halaska and Halaska Studio.

What is inside

2 example screens: Chat, Canvas, each built only from the kit.
40 AI UX patterns in 6 lifecycle groups: Agentic navigation, Conversation core, Trust & transparency, Agentic control, Output & generative UI, Ambient & beyond chat.
90 components: Of shadcn/ui's 65 components, the kit matches 13, partly matches 37, maps 6 conversation pieces to its own patterns, and has 8 still to build. It adds 27 of its own.

How it works

Copy the prompt. Five short lines. They tell your coding agent where the kit is and how to use it.
Paste it into Claude Code or Cursor. The agent downloads one React file. There is nothing else to install.
The agent applies the kit. It restyles your prototype one screen at a time, so you can check each change.

Patterns by group

Agentic navigation

The stage before any single conversation: how people get to the agent and move between agents. One bar follows whatever is on screen and offers the next step. One deck lets a person with several agents, across several parts of their life, find the right one in a swipe.

Contextual taskbar: Use when the agent can help on many different screens and users should not have to open a chat to find out how.
Spaces and agents: Use when one person runs several agents across separate parts of their life or work, and switching between them has to take one gesture.

Conversation core

The first thing you build: a place to ask and a place to read the answer. Every AI product ships these surfaces, so users compare yours with the best they have used. The work here is in the details: what the composer does mid-answer, how a reply arrives, what you can do with it afterwards.

Prompt input: Use when people start work by typing a request, and need to attach a file, pick a model or stop an answer from the same place.
Message thread: Use when users will copy, rate or regenerate an answer, and need earlier versions to stay within reach.
Streaming answer: Use when an answer takes a few seconds to arrive and users need to see progress, where it came from and what to ask next.
Agent chat: Use when the agent lives in a side panel next to the product and people ask it questions while they work.
Code block: Use when the agent writes code or config the user will read, check and copy.
Model & context: Use when users choose between models and a long conversation can run out of room without them noticing.

Trust & transparency

The stage where the answer has arrived and the user decides whether to believe it. These patterns show how the agent got there, what it read, and how sure it is. They matter most once people start acting on what the agent says.

Thinking: Use when the agent works for more than a couple of seconds before answering and the wait needs to look like progress.
Inline citations: Use when an answer makes factual claims from several sources and readers need to check one without leaving the page.
Context sources: Use when the agent answers from your own documents and data, and users need to see exactly which passages it pulled.
Confidence states: Use when the agent is sometimes unsure and a confident-sounding wrong answer would cost the user something.
Recommendation: Use when the agent has spotted something and has a specific next step to propose, and a person makes the call.
Feedback capture: Use when you need to learn why an answer missed, not only that it did.

Agentic control

The stage where the agent stops answering and starts doing. It covers the whole handover: agreeing what the agent may do, watching it work, stepping in, and checking what changed afterwards. Reach for these as soon as an action touches a customer, money or a record.

Plan preview: Use when the agent is about to take several steps the user has not seen yet.
Approval card: Use when the agent has stopped at a fork and needs the user to pick one path before it continues.
Autonomy levels: Use when people need to set how far the agent can go on a task, from watching to acting alone.
Permission scope: Use when people need to see and change which tools, data and spending limits the agent has.
Task queue: Use when the agent has a backlog of tasks and people want to see and change what it does next.
Agent status: Use when the agent runs for more than a few seconds and people need to know what it is doing and how to stop or steer it.
Tool calls: Use when the agent edits files, runs commands or reads documents, and people want to follow each action as it happens.
Task rows: Use when the agent runs several tasks at once and people need the status of each at a glance.
Handoff: Use when the agent reaches the edge of what it is allowed to do and a person has to take the work or widen the limit.
Action receipt: Use when the agent has just changed something real and people need proof of what changed, plus a short window to undo it.
Checkpoints: Use when a long agent session changes a lot and people want a safe point to roll back to.
Audit log: Use when someone needs to look back over everything the agent did and find the actions that need a second look.
Error repair: Use when the agent got something wrong and has to own it, show the fix, and give people a way to take it further.

Output & generative UI

The stage where the response is a thing, not a paragraph: a document, a set of edits, a record, a chart. These patterns give that output a container the user can review, accept in part, and come back to later.

Artifact: Use when the agent produces a document people will read, revise and take elsewhere, not a reply to scroll past.
Diff view: Use when the agent proposes edits to code or config and people need to accept or reject each change on its own.
Diff table: Use when the agent wants to change several records at once and people need to see every edit before it lands.
Structured data: Use when the agent returns data in a schema and people need to read it without parsing JSON.
Insight cards: Use when the agent has found a few things worth knowing in the data and each one needs a number and a chart to back it.
Comparison: Use when people need to judge two models or two drafts against the same prompt and record which is better.

Ambient & beyond chat

The stage where the agent works while nobody is chatting with it. Boards, nudges, digests and inline help carry its work into the rest of the product, so people can see where things stand without reading a transcript.

Taskboard: Use when the agent works through many tasks in the background and people should only step in where a decision is needed.
Inline assist: Use when the agent can finish what someone is typing, in the place they are typing it.
Nudge: Use when the agent notices something worth acting on and the user has not asked.
Digest: Use when people come back after the agent has worked without them and need to catch up in a minute.
Notification center: Use when the agent produces events over time and people need one place to see what is new.
Command search: Use when people need one place to jump to anything or ask the agent, without learning the navigation.
Agent setup: Use when someone is creating a new agent and has to give it a job, limits and tools before it goes live.

Components

Accordion: A stack of headings that each reveal a section of content. One section is open at a time.
Agent Glyph: A round accent mark with a spark, used as the agent's avatar beside messages and activity.
AI Suggestion Badge: An accent badge that marks content as suggested by the agent. Fixed text, no props.
Alert: An inline banner with a title and a description, in default, success, warning and danger variants.
Alert Dialog: A modal that interrupts to confirm a consequential action, with danger, warning and info variants.
Attachment: A file chip or card for things attached to a message or a composer, with a tinted letter glyph per file kind and upload progress.
Avatar: Shows a person as a photo or as coloured initials, alone or in an overlapping group.
Badge: A small label for state or category. Badge has five colour variants and StatusBadge adds a status dot.
Breadcrumb: Shows where a page sits in the hierarchy, with an optional home icon and a collapsed middle for long trails.
Browser Frame: Browser chrome with an address bar, for framing live previews and pages an agent has built.
Button: Triggers an action. Six variants and four sizes, with icon, loading and disabled states.
Button Group: Joins related buttons into one bordered row with a hairline between each.
Calendar: A month grid for picking a single date, with today marked and previous and next month controls.
Card: A glass surface that groups related content, with an optional header for a title, subtitle and action.
Chart: A small trend line drawn in plain SVG, with an optional area fill and a dot on the latest value.
Chat History: The sidebar list of past threads, grouped under Pinned, Today, Yesterday and Earlier, with search, a new-chat button and a quiet per-row menu to rename, pin or delete.
Chat Input: The composer for an agent conversation: a growing text field with suggestion chips, removable attachments, a model pill, a mic button and a send button that becomes Stop while the agent streams.
Checkbox: A box that turns an option on or off, with an animated tick, a label and a disabled state.
Chip: A compact pill that toggles on and off for filters, or carries a remove control for picked values.
Choicebox: A stack of selectable cards, each with a title, an optional description and a meta label. Single or multiple choice.
Collapsible: A single heading that shows or hides the content beneath it.
Combobox: A select with a filter field: type to narrow the options, then pick one.
Command: A searchable list of actions. CommandPalette (alias Command) renders inline, CommandMenu opens it as a modal.
Compare Slider: Shows two versions of the same thing, either side by side behind a draggable divider or one at a time behind a switch.
Confidence Bar: A labelled bar for how sure the agent is. Green above 80, amber above 50, red at 50 and below.
Context Menu: A menu of actions that opens at the pointer when its children are right clicked.
Conversation: The scrolling thread of an agent chat, built from Message: it follows new turns until the reader scrolls up, then offers a Jump to latest pill, and shows the agent's thinking indicator while a reply is on its way.
Copy Input: A read-only field with a copy button, for API keys, webhook URLs and share links.
Data Table: A table with sortable column headers and row selection built in.
Date Picker: A field that opens a Calendar and shows the chosen date in short form.
Dialog: A modal window over the page. Dialog holds plain content, FormDialog wraps fields in a form, CardDialog adds a cover and custom actions.
Document Agent: A document the agent edits beside you: each suggested change shows the old text struck through and the new text beside it, with Accept and Reject inline.
Dot Grid: A dotted canvas background that fills its nearest positioned parent. Used behind workflow builders and diagrams.
Dropdown Menu: A menu of actions that opens below a trigger, with icons, separators and a danger style.
Empty: A centred placeholder for a view with nothing in it: icon, title, description and one action.
Field: The kit has no separate Field wrapper. TextInput, TextArea and Select carry their own label, and the text fields add a caption and an error message.
File Tree: A collapsible tree of folders and files with optional badges, for showing what a coding agent touched.
Hover Card: A floating card of preview content shown while the pointer is over its trigger.
Input: A single-line text field with a built-in label, caption, error, leading icon and three sizes. Exported as TextInput and as Input.
Input Group: A text field with a fixed prefix, suffix or both inside one border.
Input OTP: A row of single-character boxes for a one-time code. Focus moves forward as each box fills.
Item: A row with a title, an optional subtitle, and slots on the left and right for media and actions.
Kbd: Shows a keyboard key or shortcut in a small keycap.
Label: A small text label for a form control, with an optional required marker.
Marker: The small inline citation marker inside a sentence that previews its source on hover or focus and opens it on click.
Media Generation: The waiting, progress and result states for a generated image or video, in a frame that keeps its aspect ratio throughout.
Menubar: A row of menus, like a desktop application bar. Open one, then move across the others by hovering.
Message: One turn in an agent conversation: user turns sit right in a bubble, agent turns sit left beside the agent's mark with sources and quiet actions, system turns are a centred line.
Middle Truncate: Shortens a long identifier in the middle so its start and end stay readable.
Orb: A small animated glyph that shows what an agent is doing. Five variants, any size, bare or as a labelled pill.
Pagination: Moves through pages of results. A compact counter with previous and next, or a row of dots.
Phone Frame: A handset bezel for framing mobile screens, drawers and sheets. Width and height are props.
Popover: A floating panel anchored below a trigger, for short forms, settings and details.
Progress: Shows how far a task has come, as a bar or as a ring with an optional label in the middle.
Question Card: The agent asks several questions before it continues: one at a time with a count, lettered options, an optional free-text answer and a summary at the end.
Radio Group: A vertical list of options where one is selected. Radio is the single item, with an animated dot.
Rating: A row of stars for giving or showing a score. Configurable maximum and size, with a read-only mode.
Reasoning Steps: A dense trace of what the agent did, with a glyph per kind of step and a duration on each. Open while it runs, folded to one summary line when done.
Result Cards: A row or grid of result cards the agent returns inside a reply, one shape for products, places, people and documents.
Scroll Area: A container with a maximum height that scrolls its content with a thin, theme-coloured scrollbar.
Search Input: A compact search field with a leading icon, a keyboard shortcut hint and a clear button once there is a value.
Segmented Control: Switches between a few views or modes, with a thumb that slides to the active segment.
Select: A dropdown for picking one value from a short list. Options are strings or value and label pairs.
Separator: A one pixel horizontal rule between groups of content. Exported as Divider, with Separator as an alias.
Sheet: A panel that slides in from the left or right edge of the screen over a scrim.
Skeleton: A shimmering placeholder block that holds the shape of content while it loads.
Slider: Picks a number in a range. Slider is a native range input with a value readout. SpringSlider adds a thumb that grows and settles with a spring.
Snippet: A single-line command with a prompt character and a copy button.
Spinner: A small spinning ring for work with no known length.
Split Button: A main action joined to a chevron that opens a menu of related actions.
Stack: A flex container that lays out children in a column or a row with a gap from the spacing scale.
Stat: A labelled number with an optional change that is coloured and arrowed by direction.
Status Dot: A small coloured dot for online, busy, error, offline and accent states, with an optional pulse.
Stepper: Shows progress through a fixed sequence of steps, with done, current and upcoming states.
Streaming Text: Types text out one character at a time with a blinking cursor, then hides the cursor when it finishes.
Switch: Turns a setting on or off at once. Exported as SwitchToggle and as Switch. SpringToggle adds a thumb that stretches while pressed.
Table: A simple table drawn from a list of columns and a list of rows, with a hover state on each row.
Tabs: Switches between views in the same context. Tabs is an underlined row, SubtleTabs is a compact pill group.
Tag: A pill label with an optional colour dot and a remove button.
Task List: The agent's running to-do list for one job: a count, a slim progress bar and one row per task with to do, running, done, failed and blocked states.
Textarea: A multi-line text field with a built-in label and caption. It resizes vertically. Exported as TextArea and as Textarea.
Thinking Indicator: A short label with three pulsing dots, shown while an agent is working. Two sizes.
Thinking Steps: A vertical list of the steps an agent is working through, with done, active and upcoming states.
Toast: A short message in a floating pill, in default, success, warning and danger variants.
Toggle: A button that stays pressed, for a single on or off option such as a filter.
Toggle Group: A joined row of toggles. Pass a string for one active option or an array for several. Your handler decides the next value.
Tooltip: A short text label that appears above an element on hover.
Trace Waterfall: An agent run on a timeline: totals for duration, cost, tokens and calls, a legend of span kinds, and one bar per span nested under its parent, with a detail line for the span under the pointer or focus.
Typography: Text primitives on the kit's type scale: body text, six heading levels, captions and inline code.
Zoom Control: A minus button, a percentage and a plus button. Steps by 10 between 25 and 200 percent.

Questions people ask

What is Halaska UI?

A single-file React UI kit for AI products: 40 UX patterns for the moments an agent product has to get right (thinking, plans, approvals, tool activity, receipts, recovery) and 90 styled components, built on the shadcn/ui base. One file, react and react-dom only, MIT licensed, installed by pasting one prompt into a coding agent.

Which tools does this work with?

Any coding agent that can fetch a file and edit your project: Claude Code, Cursor, Codex, Windsurf and similar. For browser builders like Lovable or Bolt, paste the prompt and, if the tool can't fetch, upload the kit file from the link in the prompt.

Why do you ask for an email?

So you hear when new components and patterns land, along with other offers and services from Halaska Studio. The prompt is copied the moment you submit, and you can unsubscribe from any email.

Do I need to install anything?

No. The kit is a single file with inline styles. It needs react and react-dom, which your project already has. No Tailwind, no CSS setup, no chart library.

Will it work on a project that already has a UI?

Yes, that's the main use. The prompt tells the agent to keep your routing, state and data, and to swap screens over to the kit one at a time.

Can I change the look?

Yes. Light or dark, the colour scheme, the typeface and the motion are all switchable. Try the first two in the bar at the bottom of this page. The rest is on the Theming page.

Is this the same as shadcn/ui?

It starts from the shadcn/ui base, so the foundations and the component names are the ones you already know. On top of that we have added our own adaptations for AI interfaces, the patterns for thinking, approvals and agent activity, and our own styling, so the look is already decided for you.

Can I use this commercially?

Yes. MIT licensed, use it in anything.

Where's the source?

On GitHub at github.com/Halaska-Studio/ui. Open an issue there if something is missing or broken.

Links

Halaska UI · Components · Patterns · Screens · Install