@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:
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
/
select