SAF
UI Registry
shadcn Custom Registry

SAF UI Registry

Design-System für alle internen Next.js Projekte der SAF Tepasse GmbH. Komponenten, Design Tokens, Konfiguration und AI-Regeln – alles per CLI installierbar.

Schnellstart
Installiert Design Tokens, shadcn Config, CLAUDE.md, AGENTS.md und MCP Config
npx shadcn add saf/setup
Komponenten

18

Gruppen

3

MCP Tools

4

Tailwind

v4

Komponenten

18 Komponenten in 3 Gruppen – identisch mit der MCP-Antwort von list_components.

Setup & Config

setup
saf/setup
Meta-Paket: Installiert globals.css, components.json, CLAUDE.md, AGENTS.md und mcp.json
npx shadcn add saf/setup
globals-css
saf/globals-css
SAF Design Tokens (Tailwind v4 @theme)
npx shadcn add saf/globals-css
components-json
saf/components-json
shadcn Config mit SAF Registry-URL
npx shadcn add saf/components-json
claude-rules
saf/claude-rules
CLAUDE.md mit SAF-Regeln für Claude Code
npx shadcn add saf/claude-rules
agents-md
saf/agents-md
AGENTS.md für alle AI Agents
npx shadcn add saf/agents-md
claude-mcp
saf/claude-mcp
MCP Server Config für SAF UI
npx shadcn add saf/claude-mcp

Layout

app-header
saf/app-header
Sticky Header mit SAF Logo, horizontaler Nav, Mobile Hamburger Sheet
npx shadcn add saf/app-header
app-footer
saf/app-footer
Footer mit SAF Tepasse Copyright
npx shadcn add saf/app-footer
page-shell
saf/page-shell
min-h-screen Flex-Layout mit Header, max-w-6xl Main, Footer
npx shadcn add saf/page-shell
page-header
saf/page-header
Seiten-Header mit Titel, Beschreibung, optionalem Badge und Actions (Vercel-Stil)
npx shadcn add saf/page-header
page-section
saf/page-section
Inhalts-Sektion mit Titel, Beschreibung und Separator (Vercel-Stil)
npx shadcn add saf/page-section
content-grid
saf/content-grid
Responsives Grid-Layout für Cards und Content-Blöcke (2/3/4 Spalten)
npx shadcn add saf/content-grid
sidebar
saf/sidebar
240px Sidebar mit Nav-Items, Mobile Sheet, active-State
npx shadcn add saf/sidebar

Blocks

form-card
saf/form-card
Card-basiertes Formular mit Speichern/Abbrechen Footer und Loading-State
npx shadcn add saf/form-card
data-table-block
saf/data-table-block
TanStack Table mit Suchfeld, Sortierung, Skeleton-Loading, Pagination
npx shadcn add saf/data-table-block
stats-row
saf/stats-row
KPI-Kacheln in 2/4-Grid mit Trend-Indikator
npx shadcn add saf/stats-row
confirm-dialog
saf/confirm-dialog
Bestätigungs-Dialog mit Loading-State und destructive-Variante
npx shadcn add saf/confirm-dialog
empty-state
saf/empty-state
Leerzustand-Anzeige mit Icon, Titel, Beschreibung und Action-Button
npx shadcn add saf/empty-state

Design Guidelines

Vercel-inspiriertes Layout-System. Diese Regeln werden über das MCP Tool get_design_guidelines an AI Agents ausgeliefert.

Seitenaufbau
Jede Seite folgt dem gleichen Layout-Pattern – diese Seite nutzt selbst alle Wrapper-Komponenten

<PageShell>

<AppHeader />

<Sidebar />

<PageHeader /> ← Titel + Beschreibung + Actions

<PageSection /> ← Sektion mit Titel + Separator

<ContentGrid /> ← Cards im 2/3/4-Grid

<AppFooter />

</PageShell>

Typografie
Page Titletext-3xl font-bold
Sectiontext-2xl font-semibold
Sub-Sectiontext-xl font-semibold
Bodytext-sm
Codefont-mono text-sm
Farben
PrimarySAF Grün
DestructiveNur Löschen
SuccessErfolg-Status
WarningWarnungen
MutedSekundär
Don'ts
Diese Regeln werden AI Agents über MCP mitgeteilt
✕Keine Custom-Farben außerhalb der Design Tokens
✕Keine eigenen Header/Footer/Sidebar bauen
✕Keine verschachtelten Cards
✕Keine inline Styles
✕Kein padding/margin über p-8/mt-8 hinaus
✕Keine Modale für Formulare

MCP Endpoint

Der MCP Server erlaubt AI-Agents (Claude Code, Cursor, etc.) direkten Zugriff auf Komponenten, Quellcode und Design Guidelines.

Endpoint

https://ui.saf-vending.de/mcp
Verfügbare Tools
list_componentsListe aller SAF UI Komponenten mit Beschreibung und Install-Befehl
get_componentVollständiger Quellcode einer SAF UI Komponente
get_rulesSAF UI Regeln (CLAUDE.md) – Coding-Standards, Komponenten-Übersicht, Do/Don't
get_design_guidelinesSAF Design Guidelines – Seitenaufbau, Layout-Patterns, Typografie, Farben, Komponenten-Nutzung (Vercel-Stil). MUSS bei jedem neuen Feature beachtet werden.

Installation

MCP Server in Claude Code oder anderen AI Tools einrichten.

Claude Code CLI

claude mcp add-json saf-ui '{"type":"url","url":"https://ui.saf-vending.de/mcp","headers":{"Authorization":"Bearer YOUR_MCP_SECRET"}}'

Manuell in .claude/mcp.json

{
  "mcpServers": {
    "saf-ui": {
      "type": "url",
      "url": "https://ui.saf-vending.de/mcp",
      "headers": {
        "Authorization": "Bearer ${MCP_SECRET}"
      }
    }
  }
}

Ersetze YOUR_MCP_SECRET durch den tatsächlichen Token.