Skip to main content
DevClub
registry

Registry Specification

DevClub UI distributes components via an open JSON registry specification that can be consumed by CLI tools, automated agents, or custom build pipelines.

REST Endpoints

The registry exposes clean REST endpoints to search, filter, and fetch component source code programmatically:

GET/api/components
List Catalog

Returns all browsable registry components with their full source, the total count, and the list of category ids. Supports query parameters ?category=, ?q=, and ?tag=.

GET/api/components/[slug]
Fetch Component Detail

Returns a single component item, including its source files, dependencies, props, and accessibility metadata. Unknown slugs return a 404 with success: false.

GET/r/registry.json
Shadcn Registry Index

Open shadcn-compatible schema catalog. Individual components can be installed directly via npx shadcn@latest add https://ui.devclubxnst.online/r/[name].json.

GET/api/health
Health & Diagnostics

Status check returning status, version, uptime (seconds since the serving instance started), timestamp, and environment. Use /api/components for component counts.

Registry Item Schema

Each component returned by the API has the following shape. Items also carry the shadcn registry fields $schema, type and title, and each file includes content, type and target.

src/types/component.ts
1
export interface ComponentItem {
2
slug: string;
3
name: string;
4
description: string;
5
summary?: string;
6
category: ComponentCategory;
7
tags: string[];
8
dependencies: string[];
9
registryDependencies?: string[];
10
highlights?: string[];
11
anatomy?: string[];
12
physics?: ComponentPhysicsSpec;
13
accessibility?: ComponentAccessibilitySpec;
14
guidelines?: ComponentGuidelines;
15
files: {
16
name: string;
17
path: string;
18
code: string;
19
}[];
20
props?: ComponentProp[];
21
usage?: string;
22
interactive?: boolean;
23
supportsColor?: boolean;
24
hidden?: boolean;
25
}
26
 
27
export interface ComponentRegistryItem extends ComponentItem {
28
version: string;
29
createdDate: string;
30
updatedDate: string;
31
}

GET /api/components wraps the items in this envelope:

Response shape
1
{
2
"success": true,
3
"data": {
4
"components": ComponentRegistryItem[],
5
"total": number,
6
"categories": ComponentCategory[]
7
},
8
"timestamp": string
9
}

Categories

ComponentCategory is one of the 19 ids below. Pass the id to ?category=.

  • buttonsButtons & actions (5)
  • inputsInputs & forms (4)
  • searchSearch & commands (3)
  • navbarNavbar (3)
  • navigationNavigation (4)
  • sliders-and-togglesSliders & toggles (5)
  • menusMenus & overlays (2)
  • cardsCards & testimonials (5)
  • galleries-and-mediaGalleries & media (3)
  • page-transitionsPage Transitions (1)
  • ai-stuffAI & editors (4)
  • charts-and-graphsCharts & graphs (1)
  • displayData & display (5)
  • backgrounds-and-effectsBackgrounds & effects (3)
  • feedbackFeedback & progress (3)
  • loadersLoaders (4)
  • accordionAccordions (3)
  • clocks-and-timersClocks & timers (2)
  • date-and-timeDate & time (1)

Sample Response Payload

Executing a GET request against /api/components/noise produces the following response. It is generated from the live registry data; long strings and arrays are shortened here.

Response (application/json)
1
{
2
"success": true,
3
"data": {
4
"slug": "noise",
5
"name": "Noise Background",
6
"description": "High-performance procedural grain noise background with CRT static, film dust, vignette, and sca…",
7
"summary": "An ultra-optimized hardware-accelerated procedural canvas noise generator engineered for cinemat…",
8
"category": "backgrounds-and-effects",
9
"tags": [
10
"noise",
11
"grain"
12
],
13
"dependencies": [
14
"clsx",
15
"tailwind-merge"
16
],
17
"version": "1.0.0",
18
"createdDate": "2026-09-23",
19
"updatedDate": "2026-09-23",
20
"interactive": false,
21
"supportsColor": false,
22
"highlights": [
23
"Sub-pixel pattern tiling running on 32-bit Uint32Array memory buffers for near-zero CPU overhead",
24
"Three selectable noise algorithms: Film Grain, CRT Static, and Film Dust"
25
],
26
"anatomy": [
27
"<div> (Responsive Container: handles ResizeObserver and IntersectionObserver lifecycle)",
28
"<canvas> (2D Canvas Buffer: renders high-density tiled noise patterns without CPU overhead)"
29
],
30
"physics": {
31
"engine": "32-bit Uint32 Procedural Buffer + 2D Canvas Matrix Pattern Transform",
32
"description": "Direct memory buffer generation coupled with GPU hardware-accelerated 2D canvas pattern matrix t…",
33
"parameters": [
34
{
35
"label": "Pattern Buffer Size",
36
"value": "250px × 250px"
37
},
38
{
39
"label": "Memory Pipeline",
40
"value": "32-bit Uint32Array"
41
}
42
]
43
},
44
"accessibility": {
45
"aria": "No role or aria-hidden is set. Extra props are spread onto the root div, so pass aria-hidden=\"tr…",
46
"reducedMotion": "Automatically stops animated pattern jitter and freezes grain texture when prefers-reduced-motio…"
47
},
48
"guidelines": {
49
"recommended": [
50
"Cinematic dark mode hero backgrounds in developer platforms, dashboards, and landing pages",
51
"Subtle analogue film grain texture inside card surfaces, modals, and container boundaries"
52
],
53
"bestPractices": [
54
"Use low patternAlpha values (10 - 25) for subtle, premium film grain that does not overpower for…",
55
"Pair with dark container backgrounds for optimal contrast with film grain highlights"
56
]
57
},
58
"props": [
59
{
60
"name": "patternSize",
61
"type": "number",
62
"defaultValue": "250",
63
"description": "Dimensions (width and height in px) of the offscreen noise generator pattern buffer tile."
64
},
65
{
66
"name": "patternScaleX",
67
"type": "number",
68
"defaultValue": "1",
69
"description": "Horizontal scaling factor applied to the noise grain texture."
70
}
71
],
72
"usage": "import { Noise } from \"@/components/ui/noise\";\n\nexport function NoiseDemo() {\n return (\n <No…",
73
"files": [
74
{
75
"name": "noise.tsx",
76
"path": "registry/ui/noise.tsx",
77
"code": "\"use client\";\n\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n…",
78
"content": "\"use client\";\n\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n…",
79
"type": "registry:ui",
80
"target": "@ui/noise.tsx"
81
}
82
],
83
"type": "registry:ui",
84
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
85
"title": "Noise Background"
86
},
87
"timestamp": "2026-10-10T14:56:28.895Z"
88
}
Previous
Skills
Next
Community