urbanflow components

urbanflow's design system: tokens and icons on npm, plus re-skinned shadcn/ui components you copy into your app. Preview everything at https://components.urbanflow.co.

Use it in an app (Next.js or Vite, Tailwind v4)

npm i @urbanflow/theme @urbanflow/icons

Theme. In your main CSS file, replacing shadcn's generated :root / @theme inline blocks:

@import "tailwindcss";
@import "tw-animate-css";
@import "@urbanflow/theme";

Fonts. Load Figtree and DM Mono yourself:

• Next.js: next/font/google with Figtree({ variable: "--font-figtree" }) and DM_Mono({ variable: "--font-dm-mono", weight: "400" }), with both classes on <html>.
• Vite: npm i @fontsource/figtree @fontsource/dm-mono, then in your entry file import @fontsource/figtree/400.css, @fontsource/figtree/600.css and @fontsource/dm-mono/400.css.

Icons.

import { SearchIcon } from "@urbanflow/icons";
<SearchIcon size={16} className="text-texticons-secondary" />

Components. Add the registry to components.json:

"registries": { "@urbanflow": "https://components.urbanflow.co/r/{name}.json" }

Then npx shadcn add @urbanflow/<name>. The component is now yours to edit. To pick up a newer version, re-run the command and review the diff. Install @urbanflow/utils first (Flow-aware cn()). Stock shadcn components don't pick up the theme (it has no shadcn colours), so use the registry versions.

AI agents. Point them at https://components.urbanflow.co/llms.txt: the design language (DESIGN.md), setup, and every token, component and icon, generated from this repo.

Release notes live in each package's CHANGELOG.md (theme, icons, components). All packages share one version number.

Working on this repo

See AGENTS.md. npm install, npm run dev, npm run check.