Components

Every primitive in app/components/ui, with its states and variants.

Buttons and links

PrimaryButton

New dashboard code passes appearance modern. A leading icon goes first in children.

Classic
Modern
Leading icon
Loading
Disabled

SecondaryButton

Classic
Modern
Ghost
Leading icon
Disabled
Ghost disabled

DangerButton

Classic
Modern
Classic disabled
Modern disabled

PrimaryLink and SecondaryLink

Use these when the action navigates. Each link points back to this page.

Primary classicView animal
Primary modernNew form
Primary disabledView animal
Secondary classicBack to list
Secondary modernBack to list
Secondary ghostSettings

BackLink and BreadcrumbLink

BackLinkBack to settings
BreadcrumbLink

Badges, status, and alerts

ListStatus: known labels

A known label takes its tone from STATUS_LABEL_TONE, so no tone is passed here.

ApprovedPaidDeniedInactivePendingNot ReviewedSome unknown label

ListStatus: every tone

Pass tone for a rescue-chosen status or a label whose colour is not its own.

grayredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletfuchsiaroseslatepurplepink

ListStatus: shape and dot

Pill with dotAvailable
shape rectGeneral Donation
dot falseAdmin
rect, no dotSponsorship

Badge

A small label that is not a status, such as an id or Coming soon.

#1042Coming soonBetaNewDraftOverdueStaffVolunteerArchived

Alert

The export runs every night at 2am.

Your changes were saved.

The date range is limited to 12 months.

We could not reach the payment provider.

Try again

Toast

Toasts appear in the bottom right corner.

Text fields

TextField

Shown on the public adoption page.
Enter at least two characters.

TextArea

Only staff can see these notes.
Notes are required for a medical hold.

NumberField

Whole years only.
Weight must be above zero.

MoneyField

Enter an amount above $0.

EmailInput

Type an address and press Enter, comma, or semicolon.

A[email protected]
The applicant is always included.
Add at least one recipient.

PhoneNumber

Enter a phone number.

SearchField

Search needs at least two characters.

ColorPicker

Accent colour
Disabled
Invalid
Enter a hex colour such as #4F46E5.

FileTrigger

Nothing is uploaded. The picked names show below.
Pick at least one file.

Choice fields

Select

Species
With descriptionUsed on the public listing.
Disabled
Read-only
InvalidPick a species.

ComboBox

Grouped by role.
Pick a foster.

MultiSelect and MultiSelectPopover

MultiSelectPopover
Pill trigger
Single selection
MultiSelect

Checkbox and CheckboxGroup

Vaccines givenTick every vaccine on the record.
Disabled group

RadioGroup

Housing
Row direction
Disabled
InvalidPick a housing type.

Switch

For a toggle inside a header row.
Turn this on to publish the form.

TagGroup and Tag

Multiple selection
Good with kids
Good with cats
Good with dogs
House trained
Compact
Good with kids
Good with cats
Good with dogs
House trained
Removable
Good with kids
Good with cats
Good with dogs
House trained
Read-only
Good with kids
Good with cats
Good with dogs
House trained
Invalid
Good with kids
Good with cats
Good with dogs
House trained
Pick at least one trait.

Dates and times

DatePicker

Intake date
With description
The day the animal arrived.
Disabled
Read-only
Invalid
Pick an intake date.

TimePicker

Pickup time
9
30
AM
24-hour
17
45
Disabled
9
30
AM
Invalid
––
––
AM
Pick a pickup time.

DateRangePopover

Reads and writes the start and end search params, so Apply changes this page's URL.

MultiSelectCalendar

Normal

October 2026

S
M
T
W
T
F
S
0 dates picked this month.
Disabled

October 2026

S
M
T
W
T
F
S
0 dates picked this month.
Invalid

October 2026

S
M
T
W
T
F
S
Pick at least one date.

Form wrappers

Every Form* wrapper

Press Validate to see the invalid state on Full name, Adoption fee, Species, and Intake date.

Typed values

Text, number, money, email, phone, and address fields.

Suggestions come from Google Places as you type.
Country
State

Choices

FormChoice renders pills for up to four options and a searchable combobox above that.

Good with kids
Good with cats
Good with dogs
Coat colour

Dates

Date, time, and multi-date fields.

Intake date
9
30
AM

October 2026

S
M
T
W
T
F
S
Days the foster is free.

Rich text, files, and settings

Editors, file pickers, the signature pad, and ToggleCard.

Nothing is uploaded.

Uploaded Files

Feb 1, 2026

Sent to the rescue's main address.

Disabled until a phone number is verified.

Cancel

Read-only Form

The readOnly prop puts every wrapper in the shared disabled style and hides the save button.

Typed values

Text, number, money, email, phone, and address fields.

J[email protected]
Suggestions come from Google Places as you type.
Country
State

Choices

FormChoice renders pills for up to four options and a searchable combobox above that.

Good with kids
Good with cats
Good with dogs
Coat colour

Dates

Date, time, and multi-date fields.

Intake date
9
30
AM

October 2026

S
M
T
W
T
F
S
Days the foster is free.

Rich text, files, and settings

Editors, file pickers, the signature pad, and ToggleCard.

Uploaded Files

Feb 1, 2026

Sent to the rescue's main address.

Disabled until a phone number is verified.

Cancel

SubmitButton

WizardFormActions and StepProgress

1. Details
2. Photos
3. Review

Step 1: Details

Drawers, modals, and menus

Drawer, DrawerHeader, and DrawerFooter

Sizes md, lg, and xl. The DrawerHeader drawer opens a second drawer and a modal from inside it.

ModalDialog and ModalTitle

Modal (confirmation)

Popover and Tooltip

Popover
Tooltip

Menu and ActionsMenu

Menu has a dark trigger, so it sits on a dark band here.

Menu
ActionsMenu

Display

Avatar and AvatarGroup

Small
Jane Smith
Medium
Jane Smith
Large, square, label
Omar Haddad
Omar
Initials fallback
SC
With delete
Jane Smith
AvatarGroup, max 3
Jane Smith
Omar Haddad
Lee Park
+2

AnimatedNumber and MoneyLabel

AnimatedNumber
Number format
MoneyLabel$12,480.50
No decimals$12,480.5

AddressLabel and GoogleMapsLink

Whisker Rescue

100 Congress Ave

Austin, TX 78701

(512) 555-0123

Get Directions

GoogleMapsLinkGet Directions

TimeDuration and TruncatedTextWithTooltip

TimeDuration2 years 9 months 14 days
TimeDurationWithFormat2 years 9 months
TruncatedTextWithTooltip

DetailsList and DetailsItem

Species
Cat
Breed
Domestic Shorthair
Intake
Jan 4, 2026
Microchip
 

HistoryTimeline

With items
  • Adopted by Jane Smith
    Mar 2, 2026
  • Application approved
    Feb 26, 2026
  • Moved to foster
    Jan 15, 2026
  • Intake
    Jan 4, 2026
Empty

No activity yet.

StepProgress

1. Details
2. Photos
3. Review
1. Details
2. Photos
3. Review

Separator, Spinner, and Icon

SeparatorAboveBelow
Spinner small
Spinner medium
Spinner large
Icon

Container, Logo, and CirclesBackground

Container
Centred content, capped at max-w-7xl with responsive padding.
LogoOne Click Rescue Logo
CirclesBackground

PhotoCarousel and PhotoLightbox

PhotoCarousel
Empty carousel

No photos yet.

PhotoLightbox

Confetti

Editors

QuillEditor

Only one editable QuillEditor can sit on a page, because its toolbar binds to a fixed element id.

Read-only
Error message

QuillEditorViewer

Meet Biscuit

Biscuit is a gentle three-year-old who loves:

  • Window seats
  • Feather toys

SimpleEditor

Write a short description.

StyleToolBar

The email template block toolbar. It reads its block from the surrounding Form.

Lists

KpiTile

Raised

$12,480

+$1,200 this month

Donors

214

18 new this month

Open applications

9

3 need review

List, ListRow, ListIdentity, ListBody, ListTitle, ListFacts, ListStatus, ListAnchor, ListActions

The first row links to this page through its title. The second has a review badge and tone bar. The third has missing values, which render as ListMissing dashes.

  • Biscuit#A-1042Available

    Female·Domestic Shorthair·2y 3m·Foster

    6appsLast app Mar 2
  • 2
    Pepper and 3 siblingsLitterPending

    Kittens·8 weeks·Intake Mar 1

    $240Adoption fees
  • Omar Haddad[email protected]Volunteer

    Foster·—·Joined Jan 2026

    ——

ListMissing on its own: —

InfiniteScroller

Scroll to the bottom of the page to load the next rows.

  • Volunteer application 1

    Submitted online·Row 1

  • Volunteer application 2

    Submitted online·Row 2

  • Volunteer application 3

    Submitted online·Row 3

  • Volunteer application 4

    Submitted online·Row 4

  • Volunteer application 5

    Submitted online·Row 5

  • Volunteer application 6

    Submitted online·Row 6

  • Volunteer application 7

    Submitted online·Row 7

  • Volunteer application 8

    Submitted online·Row 8

8 of 40 rows loaded