Hey friend!

These templates are yours to grab and modify as you need!

Just copy the source code & paste into a new .svelte file.

These can do basic color theming, if you set the css variables in a parent component:

:root {
    --accent-color: #3E3454;
    --gray: #ccc;
}

If you don't define an --accent-color and --gray, the accent defaults to #282828 and gray defaults to #ccc.

Whenever possible, component code is available both with opinionated styling (e.g., animations, rounded corners etc.) and without it. Choose whichever better suits your purpose!

UI Elements

Component Description

A component to create a single checkbox or group of checkboxes. These should be used when a user can select more than one item out of a group of options or to turn a single feature on or off.

View Code

on GitHub on Svelte REPL

Use This Component

Examples

Choose your starter

Bulbasaur

Charmander

Squirtle

red,blue is selected

Props

This component takes 5 props:

Prop	Expects	Description
options	array of objects	Specifies label and value of each checkbox
legend	string	Brief description of the group of checkboxes
userSelected	Array	Bindable value for accessing selected checkbox values
fontSize	number	Size of checkbox and text, defaults to 16
flexDirection	row or column	Indicator of which direction the checkboxes should be visually arranged

Bound Values

This component exposes the variable value to the parent component. An array of selected check values can be accessed in the parent component using bind:value

Example Use

<script>
	import Checkbox from './Checkbox.svelte'
	
	let value;
	
	const options = [{
		value: 'green',
		label: 'Bulbasaur',
		selected: false
	}, {
		value: 'red',
		label: 'Charmander',
		selected: true
	}, {
		value: 'blue',
		label: 'Squirtle',
		selected: true
	}]
</script>

<Checkbox {options} legend = 'Choose your starter' fontSize={16} bind:userSelected={value}/>

<p>
	Selected are: {value};
</p>

Component Description

A component to create a group of radio buttons. These should be used when a user can select one (and only one) item out of a group of options.

View Code

on GitHub on Svelte REPL

Use This Component

Examples

Choose your starter

Bulbasaur Charmander Squirtle

green is selected

Props

This component takes 5 props:

Prop	Expects	Description
options	array of objects	Specifies label and value of each radio button
legend	string	Brief description of the group of radio buttons
userSelected	array	Bindable value for accessing selected radio button value
fontSize	number	Size of radio button and text, defaults to 16
flexDirection	row or column	Indicator of which direction the checkboxes should be visually arranged

Bound Values

This component exposes the variable userSelected to the parent component. An array of selected radio values can be accessed in the parent component using bind:userSelected

Example Use

<script>
	import Radio from './Radio.svelte'
	
	let radioValue;
	
	const options = [{
		value: 'green',
		label: 'Bulbasaur',
	}, {
		value: 'red',
		label: 'Charmander',
	}, {
		value: 'blue',
		label: 'Squirtle',
	}]
</script>

<Radio {options} fontSize={16} legend='Select a starter Pokemon' bind:userSelected={radioValue}/>
<p>
	{radioValue} is selected
</p>

Component Description

A component to create a single toggle switch (with 3 style options). The Inner or Slider design options should be used when a user can toggle an option between an on or off (or any other binary) state. The Multi design option should be used when the user is toggling between two possible options that are not binary.

View Code

on GitHub on Svelte REPL

Use This Component

Examples

Inner style option

Enable dark mode

Switch is on

Slider style option

Enable dark mode

Switch is on

Multi style option

Choose a theme

light dark

Switch is dark

Props

This component takes 5 props:

Prop	Expects	Description
label	string	Brief description of the group of the toggle switch
design	inner, slider, or multi	Indicator of which style of toggle switch should be drawn
options	array of strings	Only necessary for "multi" design option
value	string	Bindable value for accessing selected switch value
fontSize	number	Size of switch and text, defaults to 16

Bound Values

This component exposes the variable userSelected to the parent component. An array of selected radio values can be accessed in the parent component using bind:userSelected

Example Use

<script>
    import Switch from './Switch.svelte'

    let switchValue;
    let sliderValue;
    let multiValue;
</script>

<Switch bind:value={switchValue} label="Enable dark mode" design="inner" />
<p>Switch is {switchValue}</p>

<Switch bind:value={sliderValue} label="Enable dark mode" fontSize={24} design="slider" />
<p>Switch is {sliderValue}</p>

<Switch bind:value={multiValue} label="Choose a theme" design="multi" options={['light', 'dark']} fontSize={12}/>
<p>Switch is {multiValue}</p>

Component Description

A component to create a group of UI elements designed to look like a set of buttons. These should be used when a user can select one (and only one) item out of a group of options.

View Code

on GitHub on Svelte REPL

Use This Component

Examples

Select a starter Pokemon

Bulbasaur

Charmander

Squirtle

green is selected

Props

This component takes 4 props:

Prop	Expects	Description
options	array of objects	Specifies label and value of each button
legend	string	Brief description of the group of buttons
userSelected	array	Bindable value for accessing selected radio button value
fontSize	number	Size of button text, defaults to 16

Bound Values

This component exposes the variable userSelected to the parent component. A string with the selected button value can be accessed in the parent component using bind:userSelected

Example Use

<script>
	import ButtonSet from './ButtonSet.svelte';
	
	let radioValue;
	
	const options = [{
		value: 'green',
		label: 'Bulbasaur',
	}, {
		value: 'red',
		label: 'Charmander',
	}, {
		value: 'blue',
		label: 'Squirtle',
	}]
</script>

<ButtonSet {options} legend='Select a starter Pokemon' bind:userSelected={radioValue} />
<p>
	{radioValue} is selected
</p>

Component Description

A component to add and resize icons to other elements. All possible icons can be viewed on the Feather Icons Site.

View Code

on GitHub

Use This Component

This component is included by default in our Pudding Svelte Starter Template. You can find it in src/components/helpers/Icon.svelte.

Examples

Props

This component takes 6 props:

Prop	Expects	Description
name	string	Icon name as indicated on feathericons.com
direction	string	The direction of the icon (e.g., n, ne, e, se, s, sw, w, nw)
strokeWidth	number	The width, in pixels of the icon stroke
stroke	string	Color of the icon stroke
width	string	Icon width with unit (e.g., "1em"). Default to 1em
height	string	Icon height with unit (e.g., "1em"). Default to 1em

Bound Values

This component doesn't expose any props for binding.

Example Use

<script>
    import Icon from './Icon.svelte'
</script>

<Icon name='info' />

Component Description

A component to add an autocomplete search bar. These can be helpful when there are many options in a select menu, and you want to keep your users from needing to scroll endlessly.

View Code

on GitHub

Use This Component

⚠️ This component also requires the Icon.svelte component (not automatically copied from the above buttons).

Examples

Select a Pokemon

Props

This component takes 5 props:

Prop	Expects	Description
data	array of objects	Data to fill autocomplete. Expects both value and label variables
name	string	Label for the autocomplete search box
fontSize	number	Size of search box and text, defaults to 16
selected	string	Bindable element returning the value of the selected option
clearButton	boolean	Whether to generate a button to clear the input of the autocomplete, defaults to true

Bound Values

This component exposes the variable selected to the parent component. A string with the selected button value can be accessed in the parent component using bind:selected

Example Use

<script>
	import Autocomplete from './Autocomplete.svelte'
	
	let selected = '';
	
	const data = [{
		value: 'green',
		label: 'Bulbasaur',
	}, {
		value: 'red',
		label: 'Charmander',
	}, {
		value: 'blue',
		label: 'Squirtle',
	}, {
		value: 'purple',
		label: 'Ivysaur',
	}, {
		value: 'brown',
		label: 'Charmeleon',
	}, {
		value: 'yellow',
		label: 'Wartortle',
	}]
</script>

<Autocomplete {data} name='select a pokemon' bind:selected/>

<p>
	{#if selected.length}
		{selected} was selected
	{/if}
</p>

Pagination

Component Description

A component to create a series of circular buttons. These are, by default, presented as a way to navigate through a stepper or paginated content. Ideal for processes with a few steps where steps can be skipped.

View Code

on GitHub on Svelte REPL

Use This Component

Examples

1 of 4

Step 1 is selected

Props

This component takes 3 props:

Prop	Expects	Description
numberOfItems	number	Total number of steps in the sequence
activeIndex	number	Bindable value for accessing the selected button index
fontSize	number	Size of dots and text, defaults to 16

Bound Values

This component exposes the variable activeIndex to the parent component. A string containing the selected button's index can be accessed in the parent component using bind:activeIndex

Example Use

<script>
	import ProgressDots from './ProgressDots.svelte'
	
	let dotValue;
</script>

<ProgressDots numberOfItems={4} bind:activeIndex={dotValue}/>

<p>
	Step {dotValue + 1} is selected.
</p>

Component Description

A component to automaically split and paginate data or content. This can be used to paginate any sort of output, including data tables.

View Code

on GitHub on Svelte REPL

Use This Component

⚠️ This component also requires the Icon.svelte component (not automatically copied from the above buttons).

Examples

1 - 5 of 15

Props

This component takes 3 props:

Prop	Expects	Description
rows	array	The data to be paginated
perPage	number	The number of items that you want to be displayed on each page
trimmedRows	array	Bindable value containing the trimmed data to be displayed for the current page

Bound Values

This component exposes the variable trimmedRows to the parent component. An array containing the trimmed data to be displayed on the selected "page" can be accessed in the parent component using bind:trimmedRows.

Example Use

<script>
	import Pagination from './Pagination.svelte';
	
	const examples = 'The Pudding is a digital publication that explains ideas debated in culture with visual essays.'.split(' ')
	
	let values;
</script>

{#if values}
{#each values as value}
<p>
	{value}
</p>
{/each}
{/if}

<Pagination rows={examples} perPage={3} bind:trimmedRows={values} />

Page Structure

Component Description

A component to create sections of content that can be hidden (visually and to keyboards/screen readers) and made visible again. This component uses unnamed slots, so any content can be wrapped within it and hidden and made visible.

View Code

on GitHub on Svelte REPL

Use This Component

Examples

Props

This component takes 1 prop:

Prop	Expects	Description
headerText	string	The text visible when the section is not expanded

Bound Values

This component doesn't expose any props for binding.

Example Use

<script>
	import CollapsibleSection from './CollapsibleSection.svelte'
</script>

<section>
<CollapsibleSection headerText={'Collapse or expand me!'} >
	<div class="content">
			Look at all this fun content
	</div>
</CollapsibleSection>
	
<CollapsibleSection headerText={'I can collapse or expand too!'} >
		<div class="content">
			Look at all this fun content
	</div>
</CollapsibleSection>
</section>

<style>
	section {
		width: 400px;
	}
	
	.content {
		background-color: #f4f4f4;
		padding: 0.5em;
	}
</style>

Data & Code

Component Description

A component to create sortable, semantic HTML tables.

View Code

on GitHub on Svelte REPL

Use This Component

⚠️ This component also requires the Icon.svelte component (not automatically copied from the above buttons).

Examples

name	color	element	id
Bulbasaur	green	plant	1
Charmander	red	fire	2
Squirtle	blue	water	3

Props

This component takes 6 props:

Prop	Expects	Description
headers	array	Array of column header strings (as will be presented on the table)
rows	array of arrays	Array of data to fill each row in the table
rowHeaders	boolean	If true, the first column of values will be designated as row headers. Defaults to false
sort	boolean	If true, all columns are sortable. Defaults to true.
rowBorder	boolean	If true, visual borders will be drawn along table rows. Defaults to false
caption	string	Table caption that doubles as a title.

Bound Values

This component doesn't expose any props for binding.

Example Use

<script>
    import Table from './Table.svelte'

let tableHeaders = ['name', 'color', 'element', 'id'];

let data = [{
    color: 'green',
    name: 'Bulbasaur',
    element: 'plant',
    id: 1
}, {
    color: 'red',
    name: 'Charmander',
    element: 'fire',
    id: 2
}, {
    color: 'blue',
    name: 'Squirtle',
    element: 'water',
    id: 3
}];
    
$: tableData = data.map(d => ([d.name, d.color, d.element, d.id]))

</script>

<Table headers={tableHeaders} rows={tableData} rowBorder={true}/>

Component Description

A component to create syntax highlighted code.

View Code

on GitHub

Use This Component

⚠️ This component also requires the Highlight.js, Highlight JS Svelte, and raw loader packages to be installed to your project.

Examples

let x = 25 + y

Props

This component takes 2 props:

Prop	Expects	Description
code	string	Code to syntax highlight as a string
language	string	Indicator of programming language (e.g., js or svelte)

Bound Values

This component doesn't expose any props for binding.

Example Use

<script>
    import CodeBlock from './CodeBlock.svelte'
    // importing code from a file requires the raw-loader npm package
    import codeFromFile from '!!raw-loader!./example.svelte'

    const inlineCode = `let x = 25`
</script>

<CodeBlock code={inlineCode} language='js' />
<CodeBlock code={codeFromFile} language='svelte' />

Component Description

A component to create a button that, when clicked, downloads a .csv file of data.

View Code

on GitHub

Use This Component

Examples

Props

This component takes 2 props:

Prop	Expects	Description
data	array of objects	Flat data to be exported to csv
title	string	string to be converted into file name

Bound Values

This component doesn't expose any props for binding.

Example Use

<script>
    import DataDownload from './DataDownload.svelte'

    let data = [{
        color: 'green',
        name: 'Bulbasaur',
        element: 'plant',
        id: 1
    }, {
        color: 'red',
        name: 'Charmander',
        element: 'fire',
        id: 2
    }, {
        color: 'blue',
        name: 'Squirtle',
        element: 'water',
        id: 3
    }];

</script>

<DataDownload {data} title='my data'/>

Component Description

The basics for a scatterplot. This uses svelte spring, which animates the dots on change, but requires a consistent number of items in the data array.

View Code

on GitHub

Use This Component

Examples

Props

This component takes 4 props:

Prop	Expects	Description
data	array of objects	Flat data to be used to create a scatterplot
xAccessor	function	indicator of which data variable should be used on the x-axis. Defaults to d[0]
yAccessor	function	indicator of which data variable should be used on the y-axis. Defaults to d[1]
rAccessor	function	indicator of which data variable should be used for the radius. Defaults to d[2]

Bound Values

This component doesn't expose any props for binding.

Example Use

<script>
    import Scatterplot from './Scatterplot.svelte'
    import {onMount} from 'svelte'

    const generateScatterplotData = () =>
        new Array(100).fill(0).map(_ => [Math.random(), Math.random(), 3]);
    let scatterplotData = generateScatterplotData();

    const onRegenerateScatterplotData = () => {
        scatterplotData = generateScatterplotData();
    };

    onMount(onRegenerateScatterplotData);
</script>

<Scatterplot data={scatterplotData} />

Decoration

Component Description

This is a message that will pop up to give quick user feedback, and disappears after a short amount of time. The message shows up whenever the text or iteration changes. Changing the iteration is a good way to make sure the message shows up when needed, even if the text doesn't change.

View Code

on GitHub

Use This Component

Examples

text

duration (milliseconds)

This is the message

Props

This component takes 3 props:

Prop	Expects	Description
text	string	The text that will appear on your message
iteration	number	A number to re-trigger before the message has disappeared
duration	number	The length of time, in milliseconds, the message remains on screen (default 1000)

Bound Values

This component doesn't expose any props for binding.

Example Use

<script>
    import BriefMessage from './BriefMessage.svelte'

    let messageIteration = 0;
    let messageDuration = 500;
    let message = "This is the message";
</script>

<BriefMessage text={message} iteration={messageIteration} duration={messageDuration} />

Component Description

Displays a number with an interpolated animation when changed.

View Code

on GitHub

Use This Component

Examples

value

duration (milliseconds)

format

0.0

Props

This component takes 3 props:

Prop	Expects	Description
number	number	The final number that the animation should reach
duration	number	The duration, in milliseconds, that the interpolation animation should take.
format	string	Format of the number.

Bound Values

This component doesn't expose any props for binding.

Example Use

<script>
    import Number from './Number.svelte';

    let number = 50;
    let numberDuration = 2000;
    let numberFormat = '.1f'

</script>

<Number {number} duration={numberDuration} format={numberFormat} />

Component Description

Throw in some festive confetti!

View Code

on GitHub on Svelte REPL

Use This Component

Examples

number of elements

duration (seconds)

timeout (milliseconds)

Props

This component takes 3 props:

Prop	Expects	Description
numberOfItems	number	The number of randomly generated elements in your confetti. Defaults to 50.
durationInSeconds	number	The duration, in seconds, of one animation loop.
timeout	number	The duration, in milliseconds, until the confetti disappears. Leave this blank to keep the party going indefinitely

Bound Values

This component doesn't expose any props for binding.

Example Use

<script>
	import Confetti from './Confetti.svelte'
</script>

<div class='container'>
	<Confetti durationInSeconds={2} />
</div>

Hey friend!

UI Elements

checkboxes

Component Description

View Code

Use This Component

Examples

Props

Bound Values

Example Use

Accessibility

radio buttons

Component Description

View Code

Use This Component

Examples

Props

Bound Values

Example Use

Accessibility

toggle switches

Component Description

View Code

Use This Component

Examples

Props

Bound Values

Example Use

Accessibility

button set

Component Description

View Code

Use This Component

Examples

Props

Bound Values

Example Use

Accessibility

icons

Component Description

View Code

Use This Component

Examples

Props

Bound Values

Example Use

Accessibility

autocomplete

Component Description

View Code

Use This Component

Examples

Props

Bound Values

Example Use

Accessibility

Pagination

progress dots

Component Description

View Code

Use This Component

Examples

Props

Bound Values

Example Use

Accessibility

content pagination

Component Description

View Code

Use This Component

Examples

Props

Bound Values

Example Use

Accessibility

Page Structure

collapsible sections

Component Description

View Code

Use This Component