fn-design-system

Read-only mirror of @fn_library — the React 19 + Mantine v9 design system that lives inside fn_registry.

This repo exists for one purpose: give Claude Design (and other external tools) a clean, minimal view of the design system without exposing the rest of the monorepo.

⚠️ Do not edit files in components/ directly. They are overwritten on each sync from fn_registry.

Structure

fn-design-system/
  DESIGN_SYSTEM.md       ← the contract (read this first)
  components/            ← mirror of fn_registry/frontend/functions/ui/
    index.ts             ← @fn_library barrel
    *.tsx + *.md         ← 75 components, one pair each
  package.json           ← runtime deps (Mantine v9, Tabler, React 19)
  tsconfig.json          ← paths → @fn_library maps to ./components
  sync_from_registry.sh  ← re-syncs from fn_registry

How to use

For Claude Design

1. Link this repo to your Claude Design project (claude.ai/design → Settings → Connected repos).
2. In prompts, refer to components by name from @fn_library and obey DESIGN_SYSTEM.md.
3. Handoff to Claude Code → the generated code lands in your local fn_registry apps.

For humans / agents

Read DESIGN_SYSTEM.md. It is the single source of truth.

How to re-sync

When you add or modify components in fn_registry/frontend/functions/ui/:

./sync_from_registry.sh
git add -A
git commit -m "sync: <what changed>"
git push

The script requires FN_REGISTRY_ROOT to point at your local fn_registry clone (defaults to ~/fn_registry).

What is NOT in this repo

• Any application code (apps/*/)
• The registry itself (registry.db, cmd/fn/, Go code)
• Python / Bash functions
• Deploy config, operations DBs, secrets

Everything here is derivable from fn_registry — if this repo is lost, ./sync_from_registry.sh rebuilds it.