Home

The page's content.

Shadleaf showcase

accordion

Accordion

Is it accessible?
Yes. Each section is a details element, which the browser opens and closes, from the keyboard too.
Is it styled?
Yes. It comes with default styles that match the other components.
Is it animated?
Yes, where the browser can animate a height to auto, and only when the user has not asked for reduced motion.

Multiple

How do I reset my password?
Choose "Forgot password" on the sign-in page and follow the link we email you.
Can I change my username?
Yes, once every 30 days, from your profile settings.

In a card

Subscription & billing
Common questions about your account, plans and payments
What subscription plans do you offer?

Three: Starter, Professional and Enterprise, each with more storage and support.

Annual billing is available with a 20% discount.

How does billing work?
At the start of each billing cycle, by card or bank transfer.
How do I cancel?
From your account settings, at any time.

Disabled

Can I access my account history?
Yes, in the Account history section of your dashboard.
Premium feature information
How do I update my email address?
In your account settings; we send a link to the new address.

alert-dialog

Alert dialog

Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data from our servers.

Small, with media

Allow accessory to connect?
Do you want to allow the USB accessory to connect to this device?

Media

Share this project?
Anyone with the link will be able to view and edit this project.

Destructive

Delete chat?
This will permanently delete this chat conversation. View Settings to delete any memories saved during this chat.

alert

Alert

Order placed
We will email you when it ships.

Destructive

Payment failed

Your card was declined. Check the details and try again:

  • the expiry date
  • the billing address

Title only, no icon

Your trial ends in 3 days.

Announced

avatar

Avatar

CN

Fallback

JD

Broken image

GH

Sizes

JD JD JD

Next to a name

Jane Doe

badge

Badge

New

Variants

Default Secondary Destructive Outline Ghost Link

With an icon

Verified Details

As a link

Open Late All orders

Pass-through attributes

Shipped

Props from an expression

Late

breadcrumb

With a menu

Collapsed levels

Another separator

A level without a page

button

Button

Variants

Sizes

Icon-only sizes

With an icon

As a link

View orders View orders

Disabled

View orders

Loading

In a form

Props from an expression

Pass-through attributes

card

Card

Order #1042
Placed on 12 September
Shipped

Three items, delivered to the Antwerp warehouse.

View order

Small

Late orders
Past their delivery date

3

Dividing lines

Notifications
What we email you about

Order updates and weekly summaries.

Content only

A card needs none of its parts but one.

checkbox

Checkbox

Checked

With a separate label

Indeterminate

Invalid

Disabled

collapsible

Collapsible

@peduarte starred 3 repositories

@radix-ui/primitives

@radix-ui/colors

@stitches/react

Drawn as a button

Filters

Disabled

Order history

dialog

Dialog

Edit profile
Make changes to your profile here. Click save when you're done.

Close button in the footer

Loading

Edit member
Changes are saved when you click Save.

dropdown-menu

Dropdown menu

Icons and a destructive item

Checkbox items

Radio items

Row actions

field

Field

Letters, digits and dashes.

With errors

Your company address.

must be a well-formed email address

Several errors

  • must be at least 12 characters long
  • must contain a digit

Textarea

A few words for your profile page.

Native select

must not be blank

Switch

One email a month, no more.

Checkbox

must be accepted

Radio group

Plan

You can change it at any time.

must not be blank

Checkbox group

Toppings

Field set and field group

Shipping address

Where we deliver your order.

Responsive

Shown next to your comments.

Without th:field

An order number or a customer name.

Disabled

Only an administrator can change it.

Required by your organisation.

Disabled field set

Billing cycle

Fixed until your contract ends.

Read-only

Quote it when you contact us.

form-errors

Form errors

There is a problem
The passwords do not match.

Several errors

There is a problem
  • The delivery date is before the order date.
  • Orders over 50 items need a purchase order number.

All errors

There is a problem
  • This invitation has expired.
  • Enter your name.
  • Enter an email address like you@example.com.
Enter your name.
Enter an email address like you@example.com.

A title of its own

The transfer was not made
Your balance is too low for this amount.

Content of its own

There is a problem

The payment service did not answer. Your card was not charged.

Try again in a minute.

icon

Icon

Sizes

Stroke width

A meaningful icon

input

Input

Types

Invalid

Disabled

Read-only

With htmx

kbd

Kbd

Esc Enter /

A key combination

Ctrl Shift P Ctrl+K

With an icon

K

In a button

In a sentence

Press / to search.

label

Label

Around its control

native-select

Native select

Groups

Sizes

Invalid

Disabled

pagination

From a page

On the first page

More pages around the current one

A Slice

Without Spring Data

Written by hand

Summary

11–20 of 270

Summary as the page number

Page 2 of 27

Rows per page

Rows per page

popover

Popover

Sides

query-params

Query params

radio-group

Radio group

Plan

Horizontal

Invalid

Disabled item

select

Select

Groups and separators

Icons

Long lists

Sizes

With errors

must not be empty

Disabled

separator

Separator

Vertical

Blog
Docs
Source

Announced

sheet

Sheet

Edit profile
Make changes to your profile here. Click save when you're done.

Side

From the top
A sheet on the top edge, as wide as the screen.
From the right
The default: the end of the line, which is the left on a right-to-left page.
From the bottom
A sheet on the bottom edge, as wide as the screen.
From the left
The start of the line, which is the right on a right-to-left page.

No close button in the corner

Notifications
You have no unread messages.

Body

Ada Lovelace
Member since 1843.

Loading

Member details

sidebar

Sidebar

site-header

Site header

Acme Inc.

skeleton

Skeleton

In a card

switch

Switch

Sizes

Invalid

Disabled

table

Table

A list of your recent invoices.
Invoice Status Method Amount
INV001 Paid Credit card €250.00
INV002 Pending Bank transfer €150.00
INV003 Overdue Credit card €350.00
Total €750.00

Sorted on the server

Name Email Orders
Ada Lovelaceada@example.com3
Alan Turingalan@example.com12
Grace Hoppergrace@example.com7

Nothing found

Name Email Role
No results.

Selecting rows

Name Email
Ada Lovelace ada@example.com
Alan Turing alan@example.com
Grace Hopper grace@example.com

Actions per row

Name Role Actions
Ada Lovelace Owner
Alan Turing Member
Grace Hopper Admin

tabs

Tabs

Account
Make changes to your account here. Click save when you're done.

Line

Sales are up 12% on last month.

Vertical

Language, time zone and start page.

Icons and a disabled tab

The rendered page.

Links

textarea

Textarea

Initial text

Invalid

Disabled

Read-only

theme-toggle

Theme toggle

One button

toaster

Toast

    Variants

      Several at once

        tooltip

        Tooltip

        Add to library

        Sides

        Shown above Shown after Shown below Shown before

        With a keyboard shortcut

        Save changes CtrlS

        Repeating the name

        user-menu

        In the site header

        Acme Inc.

        Without a picture

        Nobody signed in

        Acme Inc.