Capítulo 100 de 108

Examples (Registry)

Core Idea

Reference catalog of registry item shapes by type — style, theme, block, ui, lib, hook, font, base — plus cross-cutting features (target placeholders, universal items) with copy-pasteable JSON.

Key Concepts

  • extends: "none": Makes a registry:style or registry:base item independent of shadcn/ui defaults — build a design system entirely from scratch instead of extending it.
  • registry:font: Installs a Google Font; requires the font object (family, provider, import, variable, optional weight, subsets, selector, dependency). selector applies the font via @apply on specific CSS selectors instead of globally on <html>.
  • registry:base: A complete design system base; unique config field carries style, iconLibrary, rsc, tsx, rtl, menuColor, menuAccent, tailwind.*, aliases.*, registries.
  • Target placeholders (@components/, @ui/, @lib/, @hooks/): In files[].target, resolve to the consumer's configured components.json aliases regardless of their import style (@/, #, package imports, workspace exports). target can install a file under a different shadcn directory than its type would default to.
  • Universal items (registry:item, since 2.9.0): Installable without framework detection or components.json, as long as every file has an explicit target (e.g. ~/.cursor/rules/x.mdc, ~/.eslintrc.json).
  • css field directives: @layer base/components, @utility (simple/complex/functional with -*), @import (plain, url(), with media queries), @plugin (requires matching npm package in dependencies). Order when combined: imports → plugins → other CSS.
  • Custom animations: require both cssVars.theme (e.g. --animate-wiggle) and a matching @keyframes block in css.
  • envVars: Adds vars to .env.local/.env without overwriting existing ones; for dev/example values only, never production secrets.

Code Examples

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "example-style",
  "type": "registry:style",
  "dependencies": ["@tabler/icons-react"],
  "registryDependencies": ["login-01", "calendar", "https://example.com/r/editor.json"],
  "cssVars": {
    "theme": { "font-sans": "Inter, sans-serif" },
    "light": { "brand": "20 14.3% 4.1%" },
    "dark": { "brand": "20 14.3% 4.1%" }
  }
}
  • O que demonstra: registry:style que estende o shadcn/ui default, misturando dependencies, registryDependencies (local + remoto) e cssVars.
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alias-child",
  "type": "registry:item",
  "files": [
    { "path": "registry/new-york/alias/target-alias-button.tsx", "type": "registry:ui", "target": "@ui/target-alias-button.tsx" },
    { "path": "registry/new-york/alias/prompt-input.tsx", "type": "registry:ui", "target": "@ui/ai/prompt-input.tsx" }
  ]
}
  • O que demonstra: placeholders de target (@ui/) resolvidos a partir do components.json do consumidor, preservando o caminho após o placeholder.

Reference Tables

registry:base config fieldTypeNotes
stylestringstyle name
iconLibrarystringe.g. lucide
rscbooleandefault false
tsxbooleandefault true
rtlbooleandefault false
menuColor"default"|"inverted"|"default-translucent"|"inverted-translucent"default "default"
menuAccent"subtle"|"bold"default "subtle"
tailwind.baseColorstringe.g. neutral, slate, zinc
tailwind.cssstringpath to CSS file
tailwind.prefixstringclass prefix
aliases.components/utils/ui/lib/hooksstringimport aliases
registriesRecord<string, string|object>keys must start with @
Target placeholderResolves to
@components/aliases.components
@ui/aliases.ui
@lib/aliases.lib
@hooks/aliases.hooks

Anti-patterns

  • Using a plugin in css without listing it in dependencies: e.g. @plugin "@tailwindcss/typography" requires "dependencies": ["@tailwindcss/typography"], or the install is incomplete.
  • Defining --animate-* without a matching @keyframes (or vice versa): the animation utility silently does nothing.
  • Using envVars for production secrets: it's meant for dev/example values written to .env.local; never ship real credentials this way.

Key Takeaways

  1. Pick type deliberately: registry:style/registry:base for whole systems, registry:block for multi-file composed features, registry:ui for single primitives, registry:lib/registry:hook for non-component code, registry:font for typography, registry:item for universal/non-framework files.
  2. extends: "none" is the escape hatch for building a design system that doesn't inherit shadcn/ui defaults at all.
  3. Target placeholders make a registry item portable across consumer projects with different alias conventions (@/, #, workspace packages) — critical for a registry meant to be shared broadly.
  4. Universal items (registry:item + explicit target on every file) can install config files (ESLint, Cursor rules) with zero framework assumptions.

Connects To

  • registry-item-json (ch108): canonical field-by-field schema; this chapter is the "show me examples" companion.
  • registry-faq (ch101): covers common follow-up questions like adding Tailwind colors/theme vars.
  • monorepo (ch092): workspace alias resolution relies on the same placeholder mechanism.