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…
@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";
// Catalog: pick definitions
const catalog = defineCatalog(schema, {
components: {
Card: shadcnComponentDefinitions.Card,
Stack: shadcnComponentDefinitions.Stack,
Heading: shadcnComponentDefinitions.Heading,
Button: shadcnComponentDefinitions.Button,
Input: shadcnComponentDefinitions.Input,
},
actions: {},
});
// Registry: pick matching implementations
const { 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:
<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 /catalog entry 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 checks for validation (type + message pairs) and validateOn for timing
Events: inputs emit change/submit/focus/blur; buttons emit press; selects emit change/selectdon't have the plugin yet? install it then click "run inline in claude" again.