Theme test / Design system

This page showcases reusable components and styles. It will grow as we add more building blocks.

Buttons

Variants and sizes of the shared Button component.

Primary

Secondary

Ghost

Cards

Standard card

This is a simple card with a shadow.

Bordered card

This card uses only a border and no shadow.

Custom content

Cards accept arbitrary slot content, so you can build anything inside them.

Card without title

This card has no shadow and no title, just a container.

Alerts

Information

This is an informational message.

Success

The operation completed successfully.

Warning

Be careful — something needs your attention.

Error

Something went wrong while processing your request.

Forms

Examples of text fields, selects, checkboxes, radios, and a simple toggle.

Text fields

A standard text input.

We'll only use this to contact you about your enquiry.

Please enter a valid email address.

Textarea and select

Simple select styled with base form classes.

Checkboxes

Radios

Contact preference

Toggle

This is a visual toggle example; real state management would be wired later.