Overview

Welcome to Spark One

Spark One is a community template for toddle.dev . It is based on Spark Core , the unstyled component library. It was built to be a great starting point for all kinds of projects and provides a solid set of standard components that can be used and extended to fit a variety of use cases.

It is free and open source . So go nuts and create something awesome!

If you are looking for more templates or have questions, feel free to visit us at spark-pro.dev

Info

All components, their attributes, structure and functionality can be found in the official docs of the template.

If you want to adjust the colors and the color scheme, check out Radix UI colors. We based everything on the Radix color scheme to give you an easy way of changing the look and feel of the template.

Typography

Headings

Heading h1

Heading h2

Heading h3

Heading h4

Texts

Spark One comes with presets for regular text styles. We have standard paragraphs, strong text , and emphasized text . You can also use code blocks for monospaced highlighting.

If you don't need semantic tags, you can use the text component, which renders as a span element.

You can also use the kbd component to highlight keys like Space , and of course, there is a link component available.

Spark One can be a great starting point for your next toddle project.

Components

Accordion

Alert Dialog

Avatar

Sizes
Variants

Avatar Group

Badge

Sizes
Small Medium Large
Colors
Brand Neutral Success Warning Critical

Bottom Sheet

Button Critical

Default
Loading
Disabled

Button Primary

Default
Loading
Disabled

Button Secondary

Default
Loading
Disabled

Button Tertiary

Default
Disabled

Callout

Colors
Neutral callout
Brand callout
Success callout
Warning callout

Checkbox

Default
Indeterminate

Checkbox Group

Checkbox Cards

Collapsible

Context Menu

Right click or long press here to open the menu.

Data List

Status
Authorized
ID
u_2J89JSA4GJ
Name
Jane Doe
Email
jane.doe@example.com
Company
Spark

Dialog

Field

Variants
Login Example

Popover

Progress Bar

Radio Cards

Radio Group

Select

Single
Multi

Separator

Skeleton

Slider

Slider Range

2000 € - 7000 €

Spinner

Sizes
Colors

Switch

Switch Cards

Table

Full name Email Group
Jane Doe jane@example.com Developer
John Doe joe@example.com Admin
Jasper Eriksson jasper@example.com Developer

Tabs

Toast

Toggle

Toggle Group

Toolbar

Tooltip