Guides
Migrating from @dgesteves/agent-ui-kit
The package is now signoff-ui: swap it, rename the CSS variables, classes and attributes with one command, and what changed in styles.css.
@dgesteves/ is now signoff-ui. 0.5.0 is the first release under the new name. The components, their props and what they do are the same; the names around them changed, so they no longer collide with assistant-ui's (which also uses data-aui and --aui-). The old package stays on npm at 0.4.3 and gets no new releases.
What changed
| Where | @dgesteves/ 0.4 | signoff-ui 0.5 |
|---|---|---|
| npm package | @dgesteves/ | signoff-ui |
| Entry points | @dgesteves/, /, / and so on | signoff-ui/, /, / and so on, the same set |
| CSS variables | --aui-bg, --aui-accent, --aui-radius … | --signoff-bg, --signoff-accent, --signoff-radius … |
| Tailwind utilities | bg-aui-bg, text-aui-fg-muted, rounded-aui, font-aui-mono | bg-signoff-bg, text-signoff-fg-muted, rounded-signoff, font-signoff-mono |
| Tailwind theme variables | --color-aui-*, --radius-aui, --font-aui-*, --animate-aui-* | --color-signoff-*, --radius-signoff, --font-signoff-*, --animate-signoff-* |
| Keyframes | aui-spin, aui-shimmer … | signoff-spin, signoff-shimmer … |
| Component roots | data-aui | data-signoff |
data-slot values | approval-card, diff-hunk … | signoff-approval-card, signoff-diff-hunk … |
| shadcn namespace | @agent-ui-kit | @signoff-ui |
| shadcn files | components/ | components/ |
| Repository | github.com/ | github.com/; the old URLs redirect |
The docs, the playground and the hosted registry stay at agent-ui-kit-demo.vercel.app, so registry URLs such as https:/ keep working.
From npm
Swap the package:
npm uninstall @dgesteves/ agent-ui-kit && npm i signoff-uiThen rename the imports, CSS variables, classes and attributes. In a git repository, this rewrites every tracked file that uses them, outside package.json and lockfiles:
git grep -lE 'agent-ui-kit|aui' -- ':!*package.json' ':!*lock*' | xargs perl -pi -e 's#\@dgesteves/agent-ui-kit#signoff-ui#g; s#\@agent-ui-kit\b#\@signoff-ui#g; s#--aui-#--signoff-#g; s#data-aui\b#data-signoff#g; s#(?<=[a-z0-9]-)aui(?=-[a-z0-9]|\b)#signoff#g'Review the diff before you commit it. If the app also uses assistant-ui, whose own attribute is data-aui and whose variables start with --aui-, pass only the files that use this kit to perl instead of every match of git grep.
The command leaves data-slot values alone, since other libraries use the same attribute. If your CSS or tests select the kit's, add signoff- in front:
| Component | data-slot values |
|---|---|
AgentMessage | signoff-agent-message |
AgentStatus | signoff-agent-status |
ApprovalCard | signoff-approval-card, signoff-approval-approve, signoff-approval-deny |
DiffReview | signoff-diff-review, signoff-diff-file, signoff-diff-hunk, signoff-diff-submit |
Markdown | signoff-markdown |
Reasoning | signoff-reasoning |
RunMeter | signoff-run-meter |
Sources | signoff-sources |
ToolCallTimeline | signoff-tool-call-timeline, signoff-tool-call, signoff-tool-call-trigger, signoff-tool-call-details |
JsonView | signoff-json-view |
From the shadcn registry
The files you added are your code, and they keep working as they are. To take the new names:
- Rename the registry in
components.jsonfrom@agent-ui-kitto@signoff-ui. The URL stays the same. - Add the items again, for example
npx shadcn@latest add @signoff-ui/. The new files land indiff-review components/, and the tokens written into your CSS are nowsignoff-ui/ --signoff-*. - Carry over any edits you made to the old files, point your imports at
@/, then deletecomponents/ signoff-ui/ ... components/and theagent-ui/ --aui-*tokens,--color-aui-*mappings andaui-*keyframes the old items wrote into your CSS.
Or keep the old files and run the command above over them and your CSS, which renames their classes and tokens in place.
styles.css and your content
If you import signoff-ui/ (Tailwind v3 or no Tailwind), two things changed besides the names:
- Your content in a component is yours. What
renderTool,renderData,renderOutput,renderExtraand a custom approvalpreviewreturn now sits in an element withdata-signoff-slot, and the stylesheet's rules stop there. Before, the kit's reset and utilities also styled that content: a<p>lost its margins and a<ul>its bullets, and in a Tailwind v4 app with its own theme, yourp-4there used the kit's spacing. If your content relied on that, style it in your own CSS. Components you render in a slot are styled as before. - Your theme variables are left alone. The stylesheet used to set Tailwind's
--spacing,--text-*and other theme variables on every component, which also reached your content inside it. It now sets only the kit's--signoff-*tokens and Tailwind's per-element--tw-*properties, and its keyframes are namedsignoff-*.
With Tailwind v4 and signoff-ui/, your build generates the utilities as before, so nothing changes there besides the names.