Playground

Every example on one page. Change the skin, the appearance, the brand color or the reading direction and watch all of them follow.

Showcase

New project card

New project

Draft

Give it a name now. You can invite your team later.

Project name

Everyone you invite sees this name.

Button

Usage

Variants

Sizes

Disabled

Select at least one row to export.

As a link

Read the guide

Card

Usage

Lessons this week

Three lessons are planned. You can move a lesson up to 24 hours before it starts.

With actions

Invite your team

Members can plan lessons and see every student's progress.

In a grid

Theory exam

Practice 40 questions in the format of the real exam.

Driving test

Book your test once your instructor marks you ready.

Field

Usage

Full name

As it appears on your driving licence.

With an error

Email address

Enter an email address like name@example.com.

With a text area

Notes for your instructor

Optional. Your instructor reads this before the lesson.

Input

Usage

Postcode

Sizes

Input types

Phone number

Number of lessons

Dates and times

Lesson date

Start time

Exam

Disabled

Student number

Select

Usage

Lesson length

Sizes

With an error

Car

Choose the car for this lesson.

Combobox

Usage

Instructor

Values that differ from the label

Pick-up point

Type part of a name, or any address.

Options that are links

Go to a student

Date range

Usage

Holiday, no lessons

From Until

With a hint

Report period

Up to one year. The end moves along when you pick a later start.

From Until

Checkbox

Usage

Send me a reminder the day before

Group

Notify me about New bookings Cancelled lessons Invoices (set by your school)

Radio

Usage

Transmission Manual Automatic

With a hint

Lesson plan

You can change the plan after each lesson.

Once a week Twice a week Intensive course, every day

Switch

Usage

Show weekends in the calendar

Settings

Notifications Email me about changes Text me on the day of a lesson Push notifications (needs the app)

File upload

Usage

Copy of your provisional licence

A photo or a PDF, up to 10 MB.

Several files

Fuel receipts

Choose several files at once.

Editor

Usage

Lesson notes

Practised roundabouts and merging on the ring road.

Badge

Usage

Draft

Variants

Draft New Paid Due soon Overdue Scheduled

In context

Invoice 2026-114 Overdue

Alert

Usage

Your trial ends on 30 November

Add a payment method to keep your projects after that date.

Variants

Changes are saved as you type

Maintenance on Sunday from 02:00 to 04:00

Invoice sent to the customer

Two lessons have no instructor yet

Payment failed: the card was declined

With actions

Your session ends in 2 minutes

Unsaved changes are lost when it ends.

Toast

Usage

Variants

Draft saved

Sam opened the invitation

Lesson moved to Thursday

Two lessons still need a car

Could not send the invoice

With an action

Lesson cancelled

Progress

Usage

Lessons done: 14 of 20 14 of 20

With a hint

Uploading theory-notes.pdf 62%

62% of 4.8 MB

Spinner

Usage

Saving the lesson…

In a button

Sizes

Skeleton

Usage

Variants

Empty state

Usage

No lessons planned this week

Plan a lesson and Sam gets the time on their phone right away.

No search results

No students match “Jansn”

Check the spelling, or search by email address or phone number instead.

Dialog

Usage

With a form

Sheet

Usage

From the start edge

From the bottom

Usage

Links and a label

Unavailable item

Usage

On an icon button

Accordion

Usage

How long is a lesson?

A lesson takes 60 minutes. Exam training and highway lessons take 90.

Can I move a lesson?

Yes, free of charge up to 24 hours before it starts.

Where does the lesson start?

At your home, school or work address. Pick one when you book.

One open at a time

Pay per lesson

You get an invoice after each lesson and pay within 14 days.

Buy a package

Ten lessons at once, paid up front, with one lesson free.

Tabs

Usage

Tuesday at 09:00 with Sam, 90 minutes in the blue car.

Unavailable tab

Invoice 2026-114 for ten lessons, sent on 3 November.

Usage

Pagination

Usage

On the first page

Stepper

Usage

Vertical

Avatar

Usage

Sizes

SV NB LJ

With an image

Table

Usage

Lessons this week
Student	Day	Time	Minutes
Sam de Vries	Tuesday	09:00	90
Noor Bakker	Wednesday	14:30	60
Lucas Jansen	Friday	11:00	120

Stat

Usage

Lessons this week

8 more than last week

Group

Students

128

12 started this month

Pass rate

74%

First attempt, last 12 months

Open invoices

€ 1,240

3 overdue

Timeline

Usage

2 September
First lesson

Getting to know the car and the controls.
14 October
Theory exam passed
25 November
Interim test

A practice exam with a real examiner.
Driving test

Booked once your instructor marks you ready.

Separator

Usage

Lessons this month: 12

Open invoices: 2

Vertical

Profile Billing Help

Container

Usage

This text sits in a small container: centred, with space at the sides, and never wider than 42rem.

Stack

Usage

First lesson planned

Theory exam booked

Interim test on 25 November

Sizes

Smallspace

Mediumspace

Largespace

Cluster

Usage

As a list

Roundabouts
Merging
Parallel parking
Night driving
Highway exits

Grid

Usage

Lessons
Plan and move lessons.
Students
Follow progress per student.
Invoices
Send and track payments.

Narrower columns

Students
128
Lessons
42
Cars
6
Instructors
4

Section

Usage

How lessons work

Book a lesson, get picked up, and see your progress after every drive.

Heading

Usage

Plan a week of lessons

Sizes

Extra large

Large

Medium

Small

Text

Usage

Every student gets the new lesson times on their phone, so nobody has to call to check.

Sizes

Large text, for an introduction.

Medium text, for most paragraphs.

Small text, for notes and captions.

Prose

Usage

Your first lesson

Your instructor picks you up at the address you chose. Bring your provisional licence and glasses if you need them.

Getting to know the car
Starting, steering and stopping
A short drive on quiet roads

Most students drive on a real road within twenty minutes.

Questions? Search for first lesson in the app.

Link

Usage

Read the installation guide first, then browse the component pages for the classes you need.

Inside prose

Every guide links onward: start with the theming guide to learn the tokens, then read how skins work before writing your own.

Code

Usage

Add ca-button--primary to the main action of a view.

Code block

Usage

@import "tailwindcss";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";

Without a header

bun add @calaca/ui tailwindcss

Kbd

Usage

Press Esc to close the dialog.

Shortcuts

Search with Ctrl + K, or ⌘ K on a Mac.