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: 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