<< All versions
Validation Timing (
Skill v1.0.2
currentAutomated scan100/100vercel-labs/json-render/shadcn-svelte
1 files
──Details
PublishedApril 26, 2026 at 08:04 PM
Content Hashsha256:2afe2d38f582163d...
Git SHA7e4d107dbafa
Bump Typepatch
──Files
Files (1 file, 5.4 KB)
SKILL.md5.4 KBactive
SKILL.md · 132 lines · 5.4 KB
version: "1.0.2" name: shadcn-svelte description: 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.
@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:
typescript
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";// Catalog: pick definitionsconst catalog = defineCatalog(schema, {components: {Card: shadcnComponentDefinitions.Card,Stack: shadcnComponentDefinitions.Stack,Heading: shadcnComponentDefinitions.Heading,Button: shadcnComponentDefinitions.Button,Input: shadcnComponentDefinitions.Input,},actions: {},});// Registry: pick matching implementationsconst { registry } = defineRegistry(catalog, {components: {Card: shadcnComponents.Card,Stack: shadcnComponents.Stack,Heading: shadcnComponents.Heading,Button: shadcnComponents.Button,Input: shadcnComponents.Input,},});
Then render in your Svelte component:
svelte
<script lang="ts">import { Renderer, JsonUIProvider } from "@json-render/svelte";export let spec;export let registry;</script><JsonUIProvider initialState={spec?.state ?? {}}><Renderer {spec} {registry} /></JsonUIProvider>
Available Components
Layout
- Card - Container with optional title, description, maxWidth, centered
- Stack - Flex container with direction, gap, align, justify
- Grid - Grid layout with columns (number) and gap
- Separator - Visual divider with orientation
Navigation
- Tabs - Tabbed navigation with tabs array, defaultValue, value
- Accordion - Collapsible sections with items array and type (single/multiple)
- Collapsible - Single collapsible section with title
- Pagination - Page navigation with totalPages and page
Overlay
- Dialog - Modal dialog with title, description, openPath
- Drawer - Bottom drawer with title, description, openPath
- Tooltip - Hover tooltip with content and text
- Popover - Click-triggered popover with trigger and content
- DropdownMenu - Dropdown with label and items array
Content
- Heading - Heading text with level (h1-h4)
- Text - Paragraph with variant (body, caption, muted, lead, code)
- Image - Image with alt, width, height
- Avatar - User avatar with src, name, size
- Badge - Status badge with text and variant (default, secondary, destructive, outline)
- Alert - Alert banner with title, message, type (success, warning, info, error)
- Carousel - Scrollable carousel with items array
- Table - Data table with columns (string[]) and rows (string[][])
Feedback
- Progress - Progress bar with value, max, label
- Skeleton - Loading placeholder with width, height, rounded
- Spinner - Loading spinner with size and label
Input
- Button - Button with label, variant (primary, secondary, danger), disabled
- Link - Anchor link with label and href
- Input - Text input with label, name, type, placeholder, value, checks
- Textarea - Multi-line input with label, name, placeholder, rows, value, checks
- Select - Dropdown select with label, name, options (string[]), value, checks
- Checkbox - Checkbox with label, name, checked, checks, validateOn
- Radio - Radio group with label, name, options (string[]), value, checks, validateOn
- Switch - Toggle switch with label, name, checked, checks, validateOn
- Slider - Range slider with label, min, max, step, value
- Toggle - Toggle button with label, pressed, variant
- ToggleGroup - Group of toggles with items, type, value
- ButtonGroup - Button group with buttons array and selected
Validation Timing (validateOn)
All form components support validateOn to control when validation runs:
"change"-- validate on every input change (default for Select, Checkbox, Radio, Switch)"blur"-- validate when field loses focus (default for Input, Textarea)"submit"-- validate only on form submission
Important Notes
- The
/catalogentry point has no Svelte dependency -- use it for server-side prompt generation - Components use Tailwind CSS classes -- your app must have Tailwind configured
- Component implementations use bundled shadcn-svelte primitives (not your app's
$lib/components/ui/) - All form inputs support
checksfor validation (type + message pairs) andvalidateOnfor timing - Events: inputs emit
change/submit/focus/blur; buttons emitpress; selects emitchange/select