Json Render Shadcn

This gives Claude the knowledge to work with json-render's shadcn component library, which provides 36 pre-built UI components based on Radix UI and Tailwind CSS. The key pattern is selective importing: you explicitly pick the components you need for both the catalog definitions and React implementations rather than spreading everything. It covers the full range from layout primitives like Card and Stack to form inputs with built-in validation timing controls. The two entry point system is smart, the catalog side has no React dependency so you can safely use it server-side for prompt generation. If you're building declarative UIs with json-render and want a solid foundation of standard components without rolling your own, this is the reference Claude needs.

skills.sh installs: 213
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill json-render-shadcn --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/shadcn

Pre-built shadcn/ui component definitions and implementations for json-render. Provides 36 components built on Radix UI + Tailwind CSS.

Two Entry Points

Entry Point	Exports	Use For
`@json-render/shadcn/catalog`	`shadcnComponentDefinitions`	Catalog schemas (no React dependency, safe for server)
`@json-render/shadcn`	`shadcnComponents`	React implementations

Usage Pattern

Pick the components you need from the standard definitions. Do not spread all definitions -- explicitly select what your app uses:

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { defineRegistry } from "@json-render/react";
import { shadcnComponents } from "@json-render/shadcn";

SKILL.md on GitHub