@nadicodeai/ui

nadicode's React components, published as a built package: shadcn components on Base UI, the chart kit, the Agent conversation interface, and the product compositions the website, the Portal, Nadia and Alveare share. They build on @nadicodeai/design-system, whose DESIGN.md is the design system and its design authority for tokens, visual direction and the rules components share; a component's own contract is the usage page in its source.

Install

Pin an exact version, never latest or a range:

npm view @nadicodeai/ui version
npm install @nadicodeai/ui@<exact-version> react@^19 react-dom@^19 tailwindcss@^4 @tailwindcss/postcss@^4

The package installs its exact @nadicodeai/design-system and its Agent UI implementation. Import conversation presentation, runtimes, providers and hooks from @nadicodeai/ui/agents, never from assistant-ui directly. Declare @nadicodeai/design-system yourself only for a separate public API of it, such as its static CSS or its asset files, pinned to the version the installed UI release requires (npm view @nadicodeai/ui@<version> dependencies).

Stylesheet

An application this design system styles whole imports one stylesheet, once, at its root:

import "@nadicodeai/ui/globals.css";

It composes Tailwind v4, shadcn, the complete design-system CSS and the brand typeface; add no other font loader for Geist, and no design-system stylesheet beside it. A host that runs Tailwind over base styles of its own imports @nadicodeai/design-system/css/host and then @nadicodeai/ui/components.css instead, keeping its own shadcn roles.

Lint

The package exports the rules this repository uses. Add them after the framework and TypeScript configs:

import nadicodeai from "@nadicodeai/ui/eslint";

export default [...nadicodeai.configs["flat/strict"]];

They reject design values the installed design system does not define, raw colours, deep imports, native visible controls and appearance overrides on shared components.

Imports

Import each component from its subpath:

import { Button } from "@nadicodeai/ui/components/button";
import { BrandWordmark } from "@nadicodeai/ui/components/brand";
import { Thread } from "@nadicodeai/ui/agents";

package.json exports and the built declarations under dist/components/ are the component inventory and the prop reference.

Forms use one model: the controls (Input, Select, Checkbox…), the Field layout primitives, and Form for React Hook Form. There is no separate form-control family.

Icons as files

Lucide under the house render, and the house's three icons, ship as SVG files for a consumer that renders without React: @nadicodeai/design-system/icons/<name>.svg.

Brand marks

AppMark draws a Composio toolkit's logo from Composio's own address, so a page that shows one allows https://logos.composio.dev in its img-src. ModelMark and PlatformMark ship their artwork in the package.

Build

npm run build -w @nadicodeai/ui

npm pack --dry-run -w @nadicodeai/ui shows exactly what consumers receive.