10 releases since 17 October 2026. All public packages (@basiiik/tokens, @basiiik/ui, @basiiik/icons, @basiiik/mcp) share one version number. Dates are when the version reached npm. Packages on npm.
74 components and 47 icons. The gaps the agent-chat run named (evidence), agent interfaces batch three, and hover styles for real pointers only.
@basiiik/icons: seven new icons, terminal, code, git-branch, clock, refresh, thumbs-up and thumbs-down (47 icons), 16px grid, use/avoid text. The MCP finds them by "shell", "retry", "feedback" and the like. Figma components on the Icons page.
@basiiik/ui, Sidebar:SidebarDrawer, the phone pattern: the same navigation in a panel that slides in from the left, opened from a menu button (native <dialog>, closes on Escape, on its close button and when an item is chosen). Rule and anti-pattern in the Sidebar spec.
@basiiik/ui, PageHeader:compact for a phone, a panel or a tool screen: a smaller title, the description on one line, no meta line, the actions beside the title.
@basiiik/ui, hover: every hover style now applies only to a real pointer (@media (hover: hover) and (pointer: fine)), so a tap on a touch screen no longer leaves the last thing tapped looking hovered. Focus and keyboard styles are unchanged; Tooltip keeps its tap-to-open behaviour. A test fails on any new :hover outside the query.
@basiiik/mcp, specs: Plan Card shows a TaskList of TaskItems as the example children.
@basiiik/ui, three new components in the agents category (74 components):CodeBlock (code with a file name or language header and a Copy button that announces "Copied"; the code scrolls in a focusable region, line numbers are never read or copied; no syntax highlighting), FileDiff (one file's change from unified diff text: status badge, counts, + and − marks with hidden words so colour is never the only signal, optional old and new line numbers) and InlineCitation (a numbered marker after a claim that links to its source, named "Source 2: <title> (opens in a new tab)"). Figma sets (Code Block: Line numbers × State, 4 variants; File Diff: Change × Line numbers, 6; Inline Citation: State, 3), specs with agent rules, tests with axe, stories, Code Connect.
Agent interfaces: ten new components in a new agents category, two avatar components with Figma sets, and the guidance an agent-built chat screen showed was missing.
@basiiik/mcp, guide and specs: a Layout section in get_design_system_guide (the --spacing-* scale, radii and shadows, list_tokens with prefix: "spacing", how to size an app shell with 100dvh and min-height: 0), a note in Sidebar Item that long labels are cut off with an ellipsis, rules in Prompt Input (disabling it while a question is open), Tool Call (output may be set while running) and Plan Card (do not echo the decision as a message). All from the gaps in the agent-chat run (evidence): a fresh agent built a coding-assistant chat screen from one prompt with 11 of the new components, 60 MCP calls and no errors.
@basiiik/ui, agent interfaces, batch two (five more components):PlanCard (a plan the agent asks permission to run: title, steps, Approve and Reject; the decision replaces the buttons with a line of text announced politely), TaskItem with TaskList (an ordered list of tasks with a status shown as a shape and spoken as a word; the running task is aria-current="step"), QuestionCard (a question with radio options, an optional "Something else" that reveals a text field, and an answer button that waits for an answer), Suggestion with Suggestions (suggested follow-up prompts as real buttons in a named list) and Sources (the pages an answer used, folded under "Used 3 sources", each a link that says it opens in a new tab). Figma sets, specs with agent rules, tests with axe, stories, Code Connect. 71 components.
@basiiik/ui, agent interfaces (new category agents), five new components:Conversation (a scrollable role="log" that follows the newest message, stops when the reader scrolls up and offers "Jump to latest"), ChatMessage (user and assistant, with a streaming state that is aria-busy so a screen reader reads the finished message once, and an error state), PromptInput (a growing composer: Enter sends, Shift+Enter starts a new line, Enter is left alone while an input method composes, the send button becomes a stop button while the agent answers), Reasoning (collapsible "Thinking…" or "Thought for N seconds") and ToolCall (a tool name with a status word, input and result folded, a failed call opens by itself). Figma sets, specs with agent rules, tests with axe, stories (a full chat story wires them together), Code Connect. 66 components.
Figma and specs, Avatar Button and Avatar Upload: the two avatar parts released in 0.4.0 are now components of their own, each with a Figma set in Basiiik v.1 (Avatar Button: Size × State, 20 variants; Avatar Upload: Picture × Size × State, 12 variants), a spec with agent rules, Code Connect and a gallery tile. The React code is unchanged. 61 components.
The gaps the agent-built screens named, closed: seven new components, small props on existing ones, seven icons, and an MCP snippet tool that no longer fails on a missing prop.
@basiiik/ui, new component:SettingRow, one line of a settings page: the setting's name and description on the left, its control (Switch, Select, Button) on the right; controlId makes the label a real <label> for the control; the control wraps under the text when the row is narrow (layout="stacked" always stacks); a hairline separates neighbouring rows. Figma set "Setting Row" (Layout Inline and Stacked), spec with agent rules, tests with axe, stories, Code Connect. 59 components.
@basiiik/ui, Avatar: two parts for the avatar jobs agents hand-built. AvatarButton is an avatar that is a native button (account menu trigger; aria-label required, the picture is hidden from assistive tech). AvatarUpload chooses or changes a profile picture: picture or initials, an Upload photo button that opens the file picker, optional Remove, accept and maxSize checks with onFileReject(file, 'type' | 'size'), an immediate preview, helper text and error. Both are documented in the Avatar spec and found by name.
@basiiik/ui, TextField:revealable on type="password" adds a show/hide button inside the field (name "Show password" with aria-pressed; revealLabel for translation).
@basiiik/ui, Badge:icon puts a decorative 12px glyph before the label (replaces dot).
@basiiik/icons: seven new icons the agent screens asked for: mail, lock, users, credit-card, folder, bell and settings (40 icons), drawn for the 16px grid, with Figma components and use/avoid text. The MCP finds them by name and synonym ("email", "password", "team", "billing", "gear").
@basiiik/ui, small additions the agent screens kept hand-building:Checkbox gains error (true marks the box invalid; content is shown under it and linked with aria-describedby); TextField gains prefix and suffix (text such as "$", "https://", ".com", read with the field's description); Stepper gains responsive (a horizontal stepper stacks below 480px of its own width). Code-only props, so the Figma sets are unchanged. Specs, tests with axe, stories and Code Connect updated.
@basiiik/mcp, get_component_snippet: a required prop the caller leaves out (such as aria-label on IconButton) is now filled in from its spec example and listed in the notes, instead of returning an error. In the re-run of the workspace screen 9 of the 10 tool errors were this error. An error is still returned when a required prop has no example.
@basiiik/ui, TagInput:separators written as a quoted JSX attribute (separators=",; \n", which is how the first spec example showed it) was a backslash and the letter n, so every "n" in an address split it. A backslash-n or backslash-t in separators is now read as a newline or a tab, and the spec example uses braces. Found by an agent-built screen on the unreleased build.
@basiiik/ui, package: the package no longer ships two empty test declaration files (floating.test.d.ts, date.test.d.ts); the type build now leaves out every *.test.ts and *.stories.ts as well as the .tsx ones.
@basiiik/ui, new component:TagInput, a text field where each entry becomes a removable tag: Enter, comma, semicolon, a pasted list or leaving the field ends an entry (separators adds more, such as a space for email addresses); validate rejects bad entries, which stay in the field with their message; repeats are ignored unless allowDuplicates; max; Backspace in an empty field removes the last tag; each change is announced with the count; name submits one value per entry. Figma set, spec, tests with axe, stories and Code Connect. 58 components.
@basiiik/ui, Table: responsive parts, all optional and off by default. hideBelow (sm 480px, md 640px, lg 800px) on TableHeaderCell and TableCell hides a column when the table's own container is narrower (a container query, so it also works in a narrow panel on a wide screen); pin (start or end) keeps a column in view while the table scrolls sideways (row actions, the name); maxHeight makes the body scroll and keeps the header row in view. A table that actually scrolls becomes a labelled, focusable region so a keyboard can scroll it. Guidance and anti-patterns updated.
@basiiik/ui, Button: a press shrinks the button to 97% (--motion-duration-fast, --motion-easing-out), so a tap feels answered at once; off under prefers-reduced-motion.
@basiiik/ui, Card: new fullWidth prop fills the container instead of the default 320px, so a Card in a page column or grid no longer needs a className override.
@basiiik/ui, new component:RadioCard, a card that is one option of a single-choice group (a plan picker), used inside RadioGroup; the whole card selects, the label names the radio and the description and details describe it; cards share a horizontal row and stack on narrow screens. Figma set, spec with agent rules, tests with axe, stories and Code Connect. 56 components.
@basiiik/ui, new component:MultiCombobox, a Combobox that chooses any number of options: chosen options are removable tags in the field, the list stays open while choosing, Backspace in an empty field removes the last tag, each change is announced with the count, name submits one value per option. Combobox is unchanged. Figma set, spec, tests with axe, stories and Code Connect. 57 components.
@basiiik/mcp, guidance: a search for "searchable select" or "autocomplete" now finds Combobox, and Select points to it by name.
Six components the agent-built screens had to hand-build, motion tokens, and three icons.
@basiiik/ui, new components:Stat (metric tile: label, value, trend spoken in words), Sidebar with SidebarSection (named nav landmark, sections as lists, collapse toggle; SidebarItem follows the collapsed state on its own), AvatarGroup (overlap with a "+N" count read as "N more"), DescriptionList with DescriptionItem (native <dl>, inline or stacked), PageHeader (breadcrumb, h1, status badge, description, meta, actions; stacks itself below 640px of its own width) and BulkActionBar (selected count announced politely, actions, clear; inline or floating). Each has a Figma set, a spec with agent rules and anti-patterns, tests with axe, stories and Code Connect. 55 components.
@basiiik/ui, motion: every transition and animation uses the new motion tokens instead of literal values. Drawer, Modal, Accordion, Tooltip, Switch and Progress move on stronger ease-out curves; colour changes are unchanged.
@basiiik/icons:arrow-up, arrow-down and sidebar (33 icons).
@basiiik/mcp: the six components with their parts (SidebarSection, DescriptionItem); list_tokens and get_token serve the motion tokens (types duration and cubicBezier, curves as cubic-bezier(...)); the guide gains a Motion section (no hand-written durations, no ease-in, under 300ms, respect reduced motion).
Fixes found by four agent-built screens (team admin, settings, workspace setup, project workspace; see evidence): the places where an agent had to guess or read the TypeScript because the MCP answer was missing or hard to use.
@basiiik/mcp, parts:get_component now documents the exports that have no spec of their own, under react.parts, with every prop and its TypeScript type read from the source when the bundle is built: Card (CardContent, CardTitle, CardDescription, CardMedia, CardFooter), Table (TableHeader, TableBody, TableHeaderCell with sort, onSort, align, TableCell), Tabs (TabList, TabPanel), NavbarLink, RadioGroup, ToastRegion, MenuSeparator, List, FileList. Asking for a part by name (get_component RadioGroup) finds the component it belongs to and says so; search_components finds parts too. Each part's example is type-checked by a test.
@basiiik/mcp, props:react.otherProps lists the props the table did not (FileUploadaccept, maxSize, onFilesRejected, Toastduration, ProgressvalueText, ...), and handler or object props show their type (Toastaction is { label: string; onClick: () => void }). A prop driven by several Figma properties is listed once (Navbar actions). Components that forward native attributes (id, className, data-*, aria-*, onChange, autoFocus) say so.
@basiiik/mcp, tokens:list_tokens and get_token accept CSS variables and hyphenated names (font-weight, --font-weight-semibold, --text-body-md-font-size). A type style returns its real variables in cssVars (--text-heading-h2-font-size, ...), not only the wildcard. The guide has a Typography section naming the type styles and the font scale, so agents stop hard-coding font sizes and weights.
@basiiik/mcp, snippets and icons:get_component_snippet for a component with required props now ends its error with the call that works (Call again with props: {...}). search_icons with no query lists all 30 icons.
@basiiik/ui, @basiiik/tokens, @basiiik/icons: no code change; version bumped so the four packages stay on one number.
Agents get fewer wrong turns: lookup tools forgive argument names, and several guidance gaps found by the with/without demo are closed.
@basiiik/mcp: get_component, get_component_snippet, get_icon and get_token accept slug, name or id for their one identifier, and a missing identifier now gets an error that says what to send and which search tool to call. The rules guide gains the page base-font rule (plain h1, p and a do not get the font from the components).
Specs (inside @basiiik/mcp): guidance fixes for Card, Modal (footer actions), Radio and the Alert, Toast and Empty State icon notes.
@basiiik/icons: the README links Icon Lab (https://basiiik-icons.pages.dev).
@basiiik/tokens, @basiiik/ui: no code change; version bumped so the four packages stay on one number.
Basiiik gets its own icons, and agents can search them.
@basiiik/icons (new): 30 outline icons as React components, one style (16px grid, 1.5 stroke, round caps and joins, currentColor), zero runtime dependencies, decorative by default (aria-hidden) with an optional title. @basiiik/icons/icons.json is the catalogue with search words and when-to-use / when-not-to-use text for each icon. NOTICE.md records where each drawing comes from (23 drawn for Basiiik, 7 adapted from common Feather/Lucide-style patterns). 16px is the only designed size.
@basiiik/mcp: new tools search_icons and get_icon (nine tools now). Snippets import icons that exist from @basiiik/icons instead of using placeholders. The rules guide tells agents never to invent SVG icons.
@basiiik/ui: Button focus ring has a 2px offset so it stays visible on filled buttons, and the outline variant keeps its border in forced-colours (high-contrast) mode. Tabs: a tab row wider than its container now scrolls inside it instead of widening the page (found on a 390px phone width); the line variant's rule is an inset shadow so the selected underline is not clipped.
@basiiik/tokens: no change.
Icon Lab (repo tool) converts any SVG to the Basiiik icon style in the browser.
Badge and Tag brand tone can no longer be mistaken for a status colour, and the docs numbers are current.
@basiiik/tokens: six new accent roles (bg/accent/default, bg/accent/subtle, bg/accent/subtle-hover, text/accent, text/on-accent, border/accent) that equal the brand by default. 68 semantic colours and 98 contrast checks. Nothing changes unless you remap them.
@basiiik/ui: Badge and Tag with tone="brand" read the accent roles instead of the brand roles. If you override --color-bg-brand-subtle (or the other brand roles) to restyle them, override the matching --color-*-accent variables too. Buttons, links, checkboxes, tabs and selected states are unchanged.
@basiiik/mcp: the rules guide and the Badge and Tag specs explain the accent roles and that Brand Mapper turns them neutral when the brand is close to error, success or warning.
Brand Mapper (repo tool, https://basiiik-mapper.pages.dev) does that neutral fallback and has a switch to keep the brand colour.
Brand colours can no longer change what status colours mean, and glyphs on the brand fill keep their contrast.
@basiiik/tokens: new fixed info colours (color.info.* and the roles bg/info/*, text/info, text/on-info, border/info; same blue as before) and the role icon/on-brand. 62 semantic colours. Error, success, warning and info never follow the brand colour.
@basiiik/ui: the Info Alert and Toast read the info roles instead of the brand roles, so a green or orange brand no longer turns Info into Success or Warning. The Checkbox mark, Radio dot and Switch thumb read icon/on-brand: graphics need 3:1, so they stay white on mid-tone brand colours where button text has to turn dark.
@basiiik/mcp: the rules guide has a "Brand colour and status colours" section; Badge, Tag and Alert carry rules and anti-patterns about status versus brand tone; Checkbox, Radio and Switch list color.icon.on-brand.
All three packages gain a homepage link (https://basiiik.pages.dev).
@basiiik/ui: 49 zero-dependency React components with Light and Dark themes, built on native platform primitives (dialog, popover, form controls). WCAG-checked, 413 tests.
@basiiik/tokens: DTCG 2025.10 tokens with CSS variables (Light, Dark by attribute or OS), JS/TS constants and the DTCG source for rebuilding with your own primitives.
@basiiik/mcp: MCP server for AI agents: component search and specs with accessibility rules, validated snippets, token lookup, the rules guide. Extensible with createServer(bundle, extensions).
@basiiik/mcp-pro (commercial): token linter and guided workflow prompts.
