Labsco
vercel-labs logo

shadcn-svelte

★ 15,600

by vercel · part of vercel-labs/json-render

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…

🔥🔥🔥✓ VerifiedFreeQuick setup
#git#video-editing
🧰 Not standalone. This skill ships with vercel-labs/json-render and only works together with that tool — install the tool first, then add this skill.

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…

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

by vercel

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… npx skills add https://github.com/vercel-labs/json-render --skill shadcn-svelte Download ZIPGitHub15.6k

@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

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