Skip to main content

Catalog

Find Kit components, blocks, hooks, utilities, and required dependencies.
3 min read

The manifest contains 49 entries: 32 UI items, four blocks, eleven hooks, one utility, and one style. The groups below organize those entries by task. They describe the registry at this source revision, not a guarantee that every published item installs without adjustment.

Choose an item#

Use the exact registry name in its URL. For example:

Follow installation and styling first. Imports come from installed files, not an @n3wth/kit barrel export. The manifest uses a mixture of full URLs and bare registry dependency names; inspect dependencies and installed imports when combining items.

UI components#

CategoryRegistry namesIntended use
Forms and actionsbutton, input, label, textarea, switchButtons, labeled fields, and toggles
Status and identitybadge, avatar, progress, skeletonStatus text, images or initials, progress, and loading placeholders
Contentcard, separator, code-blockGrouped content, dividers, and code display
Disclosure and selectionaccordion, tabs, dropdown, tooltip, modalExpandable content, panels, selection, tooltips, and dialogs
Navigation helpersnav-link, hamburger-icon, mobile-drawer, theme-toggleLinks, menu controls, drawers, and theme controls
Feedback and utilitiestoast, command-box, error-boundaryNotifications, copyable commands, and render-error handling
Decoration and motionnoise-overlay, scroll-indicator, animated-text, shape, character, speech-bubble, composite-shapeDecorative elements and visual animation
IconsiconGenerated registry artifact exists; source file is missing from this checkout

Several items have multiple exports. For example, card.tsx exports Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter. Import them from the same installed module:

Card additionally uses --color-grey-400, --glass-border, and the font-display class. Configure these in your application's theme as needed.

Page blocks#

Registry namePurposeDeclared registry dependencies
navResponsive navigationcn, nav-link, theme-toggle, mobile-drawer
footerFooter content and linkscn
heroIntroductory section with calls to actioncn, badge, button
sectionContent width and vertical spacingcn

These are copied blocks in registry/new-york. The Kit website's own header, footer, and documentation pages use application components and shared UI code; editing a registry block does not change the website chrome.

Hooks, utilities, and style#

CategoryRegistry namesDependencies or behavior
Theme and environmentuse-theme, use-media-query, use-reduced-motionReact hooks for theme state, media queries, and motion preference
Interactionuse-keyboard-shortcuts, use-toastKeyboard handling and notification state; use-toast depends on toast
Animationuse-count-up, use-scroll-reveal, use-stagger-list, use-page-transition, use-text-reveal, use-button-pulseEach declares gsap as an npm dependency
Class utilitycnDeclares clsx and tailwind-merge
Stylen3wthContains theme, light, and dark CSS variables; no source files

useTheme() returns theme, setTheme, toggleTheme, isDark, and isLight. Its defaults are defaultTheme: 'dark', storageKey: 'n3wth-theme', and attribute: 'data-theme'. Match your CSS selectors to that attribute. The CLI's Next.js dark-theme setup uses a dark class instead; those mechanisms are not automatically synchronized.

Availability and dependency caveats#

  • icon points to registry/new-york/icon/icon.tsx, which is absent from this revision, although public/r/icon.json contains generated content. That artifact is not evidence that a clean source rebuild will succeed.
  • command-box, theme-toggle, and toast declare icon; nav and use-toast depend on items that in turn need it. Inspect the generated icon artifact before relying on those chains.
  • shape and composite-shape each include a supporting TypeScript file. Keep the generated relative imports and supporting files together.
  • The AI catalog is descriptive context. Resolve disagreements about props and exports against the source or the installed artifact.

For maintenance steps, see authoring registry entries.

Sources#