@cf/ui

Purpose

What @cf/ui is, where it comes from, and how to use it in another project.

What this is

@cf/ui is the set of components and tokens that my personal site actually runs on. It is not a separate library that the site consumes after the fact: the components in packages/ui/src/components are the ones rendering the notes editor, the chat panel and the CV, and the site imports @cf/ui/styles/theme.css for its palette, the same tokens @cf/theme writes into anyone else's stylesheet. When I fix a component for the site, the registry gets the fix.

I'm building it in public. Some of it is tidy and some of it is still carrying stock shadcn classes I haven't reviewed yet; where I know about a gap I say so in the relevant page rather than pretend it isn't there.

How to use it

There are three ways in, all generated from the same source by design/compile.ts:

  • The registry. Point shadcn at https://ds.connorforsyth.co/r/{name}.json under the @cf namespace, then bunx shadcn@latest add @cf/button. You get the source file copied into your repo, plus the theme and any components it imports.
  • DESIGN.md. bunx shadcn@latest add @cf/design writes the rules on this site into your repo as DESIGN.md, so a coding agent can follow them without visiting the docs.
  • MCP. https://ds.connorforsyth.co/api/mcp answers questions about the components, tokens and rules from the same compiled knowledge.

What's not included

Fonts are not part of the registry. The components are font-agnostic and inherit whatever the page sets. Breakpoints, the site's brand blue, search highlight colours and utilities like touch-target also live with the site in styles/globals.css, not in the theme. If a component needs one of those to look right, that is a bug in the component.

Rules

The same rules ship in DESIGN.md and the MCP server, for the agents building with this.

  • should

    Add components with bunx shadcn@latest add @cf/<name> so the @cf/theme item and any sibling components come with them.

    Every component lists @cf/theme as a registry dependency, and without it the semantic utilities resolve to nothing.

    install-through-registry

  • must

    Set the typeface on the page yourself; do not expect the registry to install KAG, Rodney or any other font.

    KAG and Rodney are licensed, so they stay with the site.

    bring-your-own-fonts

  • should

    Run bunx shadcn@latest add @cf/design in a consuming repo so the agents working there read the same rules as this document.

    read-design-md