Components · Summonware

Browse the libraryEvery built component, with live examples for each variant and pattern.

Action

Button

Dropdown

Container

Order summary

Paid

Three items, shipped 4 March. Delivery expected within five working days.

Card

What is included?

Everything in the base plan, plus priority support and audit log export.

Can I cancel anytime?

Yes — cancellation takes effect at the end of the current billing period.

Do you offer annual billing?

Annual plans are billed up front at a 20% discount.

Collapse

Downloads this month

4,821

Tilt Card

Content

JDJDJDJD

Avatar

JDSLAKMC+1

Avatar group

NeutralPrimarySuccessWarningDanger

Badge

Core UI

Copy to clipboard

home

search

settings

user

bell

check

close

plus

trash

arrowRight

calendar

download

filter

Icon set

Misc elements

Data display

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1

2

3

Sprint reviewDesign sync

4

5

6

7

8

9

10

11

12

Client demo

13

14

15

16

17

18

19

20

Invoice due

21

22

23

24

25

26

27

28

29

30

31

Calendar

First slide

Second slide

Third slide

Carousel

Chart

Ada Lovelace

Can you take a look at the invoice export bug?

9:41 AM

On it — looks like a timezone offset issue.

9:43 AM

Ada Lovelace

Makes sense, thanks!

9:44 AM

Chat

6 of 6


ORD-2043	Acme Ltd	Paid	$1,004.36
ORD-2044	Globex	Pending	$248.00
ORD-2045	Initech	Overdue	$97.50
ORD-2046	Umbrella Corp	Paid	$3,412.00

Page 1 of 2

Data table

Gallery

Invoice INV-2043

Billed to Acme Ltd

Issued Jul 1, 2026

Due Jul 15, 2026

Description	Qty	Unit price	Amount
Platform subscription — Pro plan	1	$899.00	$899.00
Additional seats	4	$25.00	$100.00
Onboarding support	1	$250.00	$250.00

Total$1249.00

Invoice document

To do2

Design the export flowDesign

Fix timezone bugBug

In progress1

Rebuild the invoice PDFEngineering

Done1

Ship dark modeEngineering

Kanban board

Lightbox

San Francisco

New York

London

Sydney

Map

Starter

For trying things out.

$0/mo

1 project
Community support
Core components

Pro

For teams shipping regularly.

$49/mo

Unlimited projects
Priority support
All components
Theme presets

Enterprise

For larger orgs with real requirements.

Custom

SSO
Dedicated support
Custom contracts

Pricing

Revenue

$48,290

▲ 12.4%

Sparkline

Revenue

$48,290

$

▲ 12.4%vs last month

Open tickets

37

◎

▲ 3.1%vs last week

Churn

1.8%

↓

▼ 0.4%vs last quarter

Active seats

1,204

◇

no change this week

Stat widget

export function Button({ variant = 'solid', children }: ButtonProps) {
  return (
    
  );
}

Syntax highlighter

Order placed
9:02 AM
Payment confirmed
9:03 AM
Charged $1,004.36 to card ending 4242
Shipped
Yesterday
Carrier: FedEx · Tracking 784552310
Delivery attempted
Today
No one available to receive the package

Timeline

Tree view

Data Input

Effects

Ambient backgrounds

Click me

Distort approximations

Vignette

Visual effects

Feedback

Heads up

Your trial ends in 5 days.

Saved

Changes applied.

Approaching limit

You have used 87% of your quota.

Payment failed

The card was declined.

Alert

Alert dialog

Your inbox is empty

Messages you receive will appear here.

Empty state

No messages yet

New messages from your team will show up here.

Isometric Empty State

Micro interactions

Notification center

Storage used72%

Onboarding complete31%

Progress

Skeleton

Spinner

Toast

Tour

Forms

Customer

Autocomplete

Due date

Choose a date on or after today

Date picker

Attachments

Drag files here, or

contract.pdf
photo.jpg

PDF, PNG or JPG up to 10MB

File upload

Profile

How your name and role appear to teammates.

First name

Last name

Role

Title

Form layout

2 fields need attention

Email is required
Password must be at least 8 characters

Email

Email is required

Password

Password must be at least 8 characters

Form validation

Image cropper

Release notes

Markdown editor

Phone number

US format

Masked input

Price range$200 – $800

Range slider

Rating

Description

Rich text editor

Appointment time

Time picker

Full name

Wizard

Foundations

--sw-primaryPrimary actions, active states, links

--sw-secondarySupporting actions

--sw-successPositive status

--sw-warningCaution status

--sw-dangerErrors, destructive actions

--sw-bgApp canvas

--sw-surfaceCards and panels

--sw-surface-2Recessed areas

--sw-textBody copy

--sw-headingHeadings

--sw-borderDividers and outlines

--sw-sidebar-bgNavigation chrome

Colour palette

The quick brown fox--sw-text-3xl · Display

The quick brown fox--sw-text-2xl · Page title

The quick brown fox--sw-text-xl · Section title

The quick brown fox--sw-text-lg · Subsection

The quick brown fox--sw-text-base · Body

The quick brown fox--sw-text-sm · Secondary

The quick brown fox--sw-text-xs · Caption

Typography

Illustration

Isometric Illustration

Motion

Lift

Glow ring

Underline drawLearn more

Hover & cursor-reactive presets

Loading presets

fade

fade-in-up

fade-in-down

Motion presets

Active seats

0

Scroll choreography

Navigation

Breadcrumb

Page 4 of 12

Pagination

Stepper

Order placed 4 March, shipped 6 March.

Tabs

Overlay

Modal

Offcanvas

Tooltip

Table & List

Design reviewDue tomorrowSoon
Vendor onboardingWaiting on documents
Q3 forecastCompletedDone

List group

Reference	Customer	Status	Total
ORD-2043	Acme Ltd	Paid	$1,004.36
ORD-2044	Globex	Pending	$248.00
ORD-2045	Initech	Overdue	$97.50

Table