shadcn-svelte

Name: shadcn-svelte
Author: vercel-labs

731installs849forks

How to install shadcn-svelte?

vercel-labs/json-render/shadcn-svelte

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

Installs into the current project.

Summary

Pre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-render/shadcn-svelte, adding standard UI components to a Svelte catalog, or building Svelte web UIs with shadcn-svelte + Tailwind CSS components.

Files · 1

View on GitHub

SKILL.md

1	# @json-render/shadcn-svelte
2
3	Pre-built shadcn-svelte component definitions and implementations for json-render. Provides 36 components built on Svelte 5 + Tailwind CSS.
4
5	## Two Entry Points
6
7	\| Entry Point \| Exports \| Use For \|
8	\|-------------\|---------\|---------\|
9	\| `@json-render/shadcn-svelte/catalog` \| `shadcnComponentDefinitions` \| Catalog schemas (no Svelte dependency, safe for server) \|
10	\| `@json-render/shadcn-svelte` \| `shadcnComponents`, `shadcnComponentDefinitions` \| Svelte implementations + catalog schemas \|
11
12	## Usage Pattern
13
14	Pick the components you need from the standard definitions. Do not spread all definitions -- explicitly select what your app uses:
15
16	```typescript
17	import { defineCatalog } from "@json-render/core";
18	import { schema } from "@json-render/svelte/schema";
19	import { shadcnComponentDefinitions } from "@json-render/shadcn-svelte/catalog";
20	import { defineRegistry } from "@json-render/svelte";
21	import { shadcnComponents } from "@json-render/shadcn-svelte";
22
23	// Catalog: pick definitions
24	const catalog = defineCatalog(schema, {
25	components: {
26	Card: shadcnComponentDefinitions.Card,
27	Stack: shadcnComponentDefinitions.Stack,
28	Heading: shadcnComponentDefinitions.Heading,
29	Button: shadcnComponentDefinitions.Button,
30	Input: shadcnComponentDefinitions.Input,
31	},
32	actions: {},
33	});
34
35	// Registry: pick matching implementations
36	const { registry } = defineRegistry(catalog, {
37	components: {
38	Card: shadcnComponents.Card,
39	Stack: shadcnComponents.Stack,
40	Heading: shadcnComponents.Heading,
41	Button: shadcnComponents.Button,
42	Input: shadcnComponents.Input,
43	},
44	});
45	```
46
47	Then render in your Svelte component:
48
49	```svelte
50	<script lang="ts">
51	import { Renderer, JsonUIProvider } from "@json-render/svelte";
52
53	export let spec;
54	export let registry;
55	</script>
56
57	<JsonUIProvider initialState={spec?.state ?? {}}>
58	<Renderer {spec} {registry} />
59	</JsonUIProvider>
60	```
61
62	## Available Components
63
64	### Layout
65	- Card - Container with optional title, description, maxWidth, centered
66	- Stack - Flex container with direction, gap, align, justify
67	- Grid - Grid layout with columns (number) and gap
68	- Separator - Visual divider with orientation
69
70	### Navigation
71	- Tabs - Tabbed navigation with tabs array, defaultValue, value
72	- Accordion - Collapsible sections with items array and type (single/multiple)
73	- Collapsible - Single collapsible section with title
74	- Pagination - Page navigation with totalPages and page
75
76	### Overlay
77	- Dialog - Modal dialog with title, description, openPath
78	- Drawer - Bottom drawer with title, description, openPath
79	- Tooltip - Hover tooltip with content and text
80	- Popover - Click-triggered popover with trigger and content
81	- DropdownMenu - Dropdown with label and items array
82
83	### Content
84	- Heading - Heading text with level (h1-h4)
85	- Text - Paragraph with variant (body, caption, muted, lead, code)
86	- Image - Image with alt, width, height
87	- Avatar - User avatar with src, name, size
88	- Badge - Status badge with text and variant (default, secondary, destructive, outline)
89	- Alert - Alert banner with title, message, type (success, warning, info, error)
90	- Carousel - Scrollable carousel with items array
91	- Table - Data table with columns (string[]) and rows (string[][])
92
93	### Feedback
94	- Progress - Progress bar with value, max, label
95	- Skeleton - Loading placeholder with width, height, rounded
96	- Spinner - Loading spinner with size and label
97
98	### Input
99	- Button - Button with label, variant (primary, secondary, danger), disabled
100	- Link - Anchor link with label and href
101	- Input - Text input with label, name, type, placeholder, value, checks
102	- Textarea - Multi-line input with label, name, placeholder, rows, value, checks
103	- Select - Dropdown select with label, name, options (string[]), value, checks
104	- Checkbox - Checkbox with label, name, checked, checks, validateOn
105	- Radio - Radio group with label, name, options (string[]), value, checks, validateOn
106	- Switch - Toggle switch with label, name, checked, checks, validateOn
107	- Slider - Range slider with label, min, max, step, value
108	- Toggle - Toggle button with label, pressed, variant
109	- ToggleGroup - Group of toggles with items, type, value
110	- ButtonGroup - Button group with buttons array and selected
111
112	## Validation Timing (`validateOn`)
113
114	All form components support `validateOn` to control when validation runs:
115	- `"change"` -- validate on every input change (default for Select, Checkbox, Radio, Switch)
116	- `"blur"` -- validate when field loses focus (default for Input, Textarea)
117	- `"submit"` -- validate only on form submission
118
119	## Important No

People who liked this also viewed

6 picks

Type

shadcn-svelte

731installs849forks

View on GitHub

How to install shadcn-svelte?

vercel-labs/json-render/shadcn-svelte

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# @json-render/shadcn-svelte
2
3	Pre-built shadcn-svelte component definitions and implementations for json-render. Provides 36 components built on Svelte 5 + Tailwind CSS.
4
5	## Two Entry Points
6
7	\| Entry Point \| Exports \| Use For \|
8	\|-------------\|---------\|---------\|
9	\| `@json-render/shadcn-svelte/catalog` \| `shadcnComponentDefinitions` \| Catalog schemas (no Svelte dependency, safe for server) \|
10	\| `@json-render/shadcn-svelte` \| `shadcnComponents`, `shadcnComponentDefinitions` \| Svelte implementations + catalog schemas \|
11
12	## Usage Pattern
13
14	Pick the components you need from the standard definitions. Do not spread all definitions -- explicitly select what your app uses:
15
16	```typescript
17	import { defineCatalog } from "@json-render/core";
18	import { schema } from "@json-render/svelte/schema";
19	import { shadcnComponentDefinitions } from "@json-render/shadcn-svelte/catalog";
20	import { defineRegistry } from "@json-render/svelte";
21	import { shadcnComponents } from "@json-render/shadcn-svelte";
22
23	// Catalog: pick definitions
24	const catalog = defineCatalog(schema, {
25	components: {
26	Card: shadcnComponentDefinitions.Card,
27	Stack: shadcnComponentDefinitions.Stack,
28	Heading: shadcnComponentDefinitions.Heading,
29	Button: shadcnComponentDefinitions.Button,
30	Input: shadcnComponentDefinitions.Input,
31	},
32	actions: {},
33	});
34
35	// Registry: pick matching implementations
36	const { registry } = defineRegistry(catalog, {
37	components: {
38	Card: shadcnComponents.Card,
39	Stack: shadcnComponents.Stack,
40	Heading: shadcnComponents.Heading,
41	Button: shadcnComponents.Button,
42	Input: shadcnComponents.Input,
43	},
44	});
45	```
46
47	Then render in your Svelte component:
48
49	```svelte
50	<script lang="ts">
51	import { Renderer, JsonUIProvider } from "@json-render/svelte";
52
53	export let spec;
54	export let registry;
55	</script>
56
57	<JsonUIProvider initialState={spec?.state ?? {}}>
58	<Renderer {spec} {registry} />
59	</JsonUIProvider>
60	```
61
62	## Available Components
63
64	### Layout
65	- Card - Container with optional title, description, maxWidth, centered
66	- Stack - Flex container with direction, gap, align, justify
67	- Grid - Grid layout with columns (number) and gap
68	- Separator - Visual divider with orientation
69
70	### Navigation
71	- Tabs - Tabbed navigation with tabs array, defaultValue, value
72	- Accordion - Collapsible sections with items array and type (single/multiple)
73	- Collapsible - Single collapsible section with title
74	- Pagination - Page navigation with totalPages and page
75
76	### Overlay
77	- Dialog - Modal dialog with title, description, openPath
78	- Drawer - Bottom drawer with title, description, openPath
79	- Tooltip - Hover tooltip with content and text
80	- Popover - Click-triggered popover with trigger and content
81	- DropdownMenu - Dropdown with label and items array
82
83	### Content
84	- Heading - Heading text with level (h1-h4)
85	- Text - Paragraph with variant (body, caption, muted, lead, code)
86	- Image - Image with alt, width, height
87	- Avatar - User avatar with src, name, size
88	- Badge - Status badge with text and variant (default, secondary, destructive, outline)
89	- Alert - Alert banner with title, message, type (success, warning, info, error)
90	- Carousel - Scrollable carousel with items array
91	- Table - Data table with columns (string[]) and rows (string[][])
92
93	### Feedback
94	- Progress - Progress bar with value, max, label
95	- Skeleton - Loading placeholder with width, height, rounded
96	- Spinner - Loading spinner with size and label
97
98	### Input
99	- Button - Button with label, variant (primary, secondary, danger), disabled
100	- Link - Anchor link with label and href
101	- Input - Text input with label, name, type, placeholder, value, checks
102	- Textarea - Multi-line input with label, name, placeholder, rows, value, checks
103	- Select - Dropdown select with label, name, options (string[]), value, checks
104	- Checkbox - Checkbox with label, name, checked, checks, validateOn
105	- Radio - Radio group with label, name, options (string[]), value, checks, validateOn
106	- Switch - Toggle switch with label, name, checked, checks, validateOn
107	- Slider - Range slider with label, min, max, step, value
108	- Toggle - Toggle button with label, pressed, variant
109	- ToggleGroup - Group of toggles with items, type, value
110	- ButtonGroup - Button group with buttons array and selected
111
112	## Validation Timing (`validateOn`)
113
114	All form components support `validateOn` to control when validation runs:
115	- `"change"` -- validate on every input change (default for Select, Checkbox, Radio, Switch)
116	- `"blur"` -- validate when field loses focus (default for Input, Textarea)
117	- `"submit"` -- validate only on form submission
118
119	## Important No

People who liked this also viewed

6 picks

Type