Svelte Garden

Buttons

Button Variants

Button Sizes

Pill Buttons

Stretched Button

Disabled Buttons

Icon Buttons

Toggle Buttons

Toggle: false, Icon: false

Split Button

Anchor Links

Here is an inline link , a danger link , and an external link .

Forms

Text Input

Enter your information

Input Validation States

Looks good!
Please review

Media Input (with icons)

Faux Input (display only)

This looks like an input but isn't editable

Textarea

Provide a detailed description

Select

Checkbox

Radio Buttons

Selected: option1

Toggle Switch

Range Slider

File Upload

Drag files here or choose files

File List

  • report.pdf
  • photo.jpg
  • approved.docx
  • invalid.pdf

Fieldset & Legend

Contact Information

Tiles

Selected: tile1

Typography

Headings

Heading 1 (XXL)

Heading 2 (XL)

Heading 3 (LG)

Heading 4 (MD)

Heading 5 (SM)
Heading 6 (XS)

Paragraphs

Default paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small paragraph for secondary content.

Large paragraph for emphasis.

Text Styles

Bold text | Monospace | Use inline code for code snippets.

Code Block

function greet(name: string): string { return `Hello, ${name}!`; } console.log(greet('World'));
TypeScript
function Button({ children }) { return ( <button className="btn"> {children} </button> ); }
JSX
npm install svelte-garden cd my-project npm run dev
Bash

Blockquote

"Design is not just what it looks like and feels like. Design is how it works."
- Steve Jobs

Lists

Unordered

  • First item
  • Second item
  • Third item

Ordered

  1. Step one
  2. Step two
  3. Step three

Avatars

Sizes (with text)

XS
SM
MD
LG

With Images

User 1
User 2
User 3

Status Indicators

AB
available
CD
away
EF
transfers
GH
offline

System Avatar

SY

Tags

Sizes

Small Medium Large

Colors

Red Yellow Green Teal Blue Purple

Pill Tags

Pill Tag Blue Pill Green Pill

With Close Button

Removable Blue Tag

With Avatar

 John Doe
Jane Smith

Loaders

Spinner

Dots

Inline Loader (in button)

Progress Bar

65%
65%

Skeleton

Notifications

Alerts

Notification

New Update Available
A new version of the application is ready. Would you like to update now?

Toast

Modals

Tooltips

Placements

Sizes

Tabs

This is the overview content panel.

Accordions

Svelte Garden is a component library built with Svelte 5, based on the Zendesk Garden design system.

Tables

Basic Table

User Directory
ID Name Email Role
1 John Doe john@example.com Admin
2 Jane Smith jane@example.com Editor
3 Bob Wilson bob@example.com Viewer

Sortable Table

User Directory
ID Name Email Role
3 Bob Wilson bob@example.com Viewer
2 Jane Smith jane@example.com Editor
1 John Doe john@example.com Admin

Sorted by: name (asc)

Grid

12-Column Grid

4
4
4
3
6
3

Auto-sizing

Auto
Auto
Auto

Pagination

Offset Pagination

Page: 1

Cursor Pagination

Color Pickers

Full Color Picker

Color Swatch Palette

Date Pickers

Date Picker Input

Standalone Calendar

January 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Draggable

Draggable List

  • Item 1 - Default
  • Item 2 - Compact
  • Item 3 - Bare
  • Item 4 - Disabled

Dropzone

Drop here
Active
Danger

CKEditor

Rich Text Editor

A CKEditor 5 integration styled with Garden design system. Includes toolbar with common formatting options.

Loading editor...

Output Preview

Welcome to Svelte Garden Editor

This is a CKEditor 5 integration styled with the Zendesk Garden design system.

Try out the formatting options:

  • Bold, italic, underline text
  • Headings and paragraphs
  • Bulleted and numbered lists
  • Links and blockquotes

This is a blockquote example with Garden styling.

Icons

SVG icons ported from @zendeskgarden/svg-icons . All icons use currentColor for fill/stroke to inherit text color.

Sizes

12px
16px
24px
32px

Colors (via CSS color)