Shadcn Svelte

This gives Claude access to 36 pre-built shadcn-svelte components for json-render apps, covering everything from cards and buttons to forms, dialogs, and carousels. The nice thing here is the dual entry point design: use the catalog-only import for server-side schema work without pulling in Svelte dependencies, or grab the full implementations when you're actually rendering. It expects you to cherry-pick components rather than importing everything, which keeps things lean. All form inputs support validation with configurable timing (on change, blur, or submit), and everything's built on Svelte 5 with Tailwind CSS. Useful if you're building dynamic UIs from JSON specs and want a solid component library without wiring up shadcn-svelte components yourself.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

@json-render/shadcn-svelte

Pre-built shadcn-svelte component definitions and implementations for json-render. Provides 36 components built on Svelte 5 + Tailwind CSS.

Two Entry Points

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

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/svelte/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn-svelte/catalog";
import { defineRegistry } from "@json-render/svelte";
import { shadcnComponents } from "@json-render/shadcn-svelte";

SKILL.md on GitHub