QSP Particle

A design system built for care management. Atoms are individual UI elements. Molecules combine atoms into interactive views. Pages compose molecules into complete layouts. Everything adapts across Apple, Healthcare, and Midnight themes with light and dark modes.

Quick Start

import { ParticleProvider, ClientList, StatusBadge } from '@qsp-life/particle';

// Wrap your app — themes cascade automatically
<ParticleProvider>
  <App />
</ParticleProvider>

Atoms

6Particle primitives

Button

Primary action element.

variantsizeisDisabled

Chip

Compact label for tags, categories, and metadata.

colorvariantsize

Avatar

Profile image with fallback initials.

sizecolorvariant

Input

Text input field.

placeholdertypeisDisabled

StatusBadge

Semantic status indicator.

statussize

Separator

Visual separator (renamed from Divider in v3).

orientationvariant

Molecules

5Composed Particle components

DataField

Label/value pair for structured data display.

labelvalue

Section

Titled card container using HeroUI v3 Card with header separator.

titlechildren

ThemeToggle

Combined theme switcher and dark mode toggle.

ClientList

Interactive data table for client records.

clientsonClientClick

EmployeeList

Interactive data table for employee records.

employeesonEmployeeClick

Pages

3Full page layouts

ClientDetail

Full client profile page with hero header and section cards.

clientphotoUrlResolver

EmployeeDetail

Full employee profile page with hero header and section cards.

employee

Login

Auth screen with login and forgot-password flows.

onLoginwelcomeTitlewelcomeSubtitle+7

HeroUI (free)

85Bundled HeroUI free components

Accordion

HeroUI v3 Accordion — bundled in Particle.

Alert

HeroUI v3 Alert — bundled in Particle.

AlertDialog

HeroUI v3 AlertDialog — bundled in Particle.

Autocomplete

HeroUI v3 Autocomplete — bundled in Particle.

Avatar

HeroUI v3 Avatar — bundled in Particle.

Badge

HeroUI v3 Badge — bundled in Particle.

Breadcrumbs

HeroUI v3 Breadcrumbs — bundled in Particle.

Button

HeroUI v3 Button — bundled in Particle.

ButtonGroup

HeroUI v3 ButtonGroup — bundled in Particle.

Calendar

HeroUI v3 Calendar — bundled in Particle.

CalendarYearPicker

HeroUI v3 CalendarYearPicker — bundled in Particle.

Card

HeroUI v3 Card — bundled in Particle.

Checkbox

HeroUI v3 Checkbox — bundled in Particle.

CheckboxGroup

HeroUI v3 CheckboxGroup — bundled in Particle.

Chip

HeroUI v3 Chip — bundled in Particle.

CloseButton

HeroUI v3 CloseButton — bundled in Particle.

ColorArea

HeroUI v3 ColorArea — bundled in Particle.

ColorField

HeroUI v3 ColorField — bundled in Particle.

ColorInputGroup

HeroUI v3 ColorInputGroup — bundled in Particle.

ColorPicker

HeroUI v3 ColorPicker — bundled in Particle.

ColorSlider

HeroUI v3 ColorSlider — bundled in Particle.

ColorSwatch

HeroUI v3 ColorSwatch — bundled in Particle.

ColorSwatchPicker

HeroUI v3 ColorSwatchPicker — bundled in Particle.

ComboBox

HeroUI v3 ComboBox — bundled in Particle.

DateField

HeroUI v3 DateField — bundled in Particle.

DateInputGroup

HeroUI v3 DateInputGroup — bundled in Particle.

DatePicker

HeroUI v3 DatePicker — bundled in Particle.

DateRangePicker

HeroUI v3 DateRangePicker — bundled in Particle.

Description

HeroUI v3 Description — bundled in Particle.

Disclosure

HeroUI v3 Disclosure — bundled in Particle.

DisclosureGroup

HeroUI v3 DisclosureGroup — bundled in Particle.

Drawer

HeroUI v3 Drawer — bundled in Particle.

Dropdown

HeroUI v3 Dropdown — bundled in Particle.

EmptyState

HeroUI v3 EmptyState — bundled in Particle.

ErrorMessage

HeroUI v3 ErrorMessage — bundled in Particle.

FieldError

HeroUI v3 FieldError — bundled in Particle.

Fieldset

HeroUI v3 Fieldset — bundled in Particle.

Form

HeroUI v3 Form — bundled in Particle.

Header

HeroUI v3 Header — bundled in Particle.

Input

HeroUI v3 Input — bundled in Particle.

InputGroup

HeroUI v3 InputGroup — bundled in Particle.

InputOtp

HeroUI v3 InputOtp — bundled in Particle.

Kbd

HeroUI v3 Kbd — bundled in Particle.

Label

HeroUI v3 Label — bundled in Particle.

Link

HeroUI v3 Link — bundled in Particle.

ListBox

HeroUI v3 ListBox — bundled in Particle.

ListBoxItem

HeroUI v3 ListBoxItem — bundled in Particle.

ListBoxSection

HeroUI v3 ListBoxSection — bundled in Particle.

Menu

HeroUI v3 Menu — bundled in Particle.

MenuItem

HeroUI v3 MenuItem — bundled in Particle.

MenuSection

HeroUI v3 MenuSection — bundled in Particle.

Meter

HeroUI v3 Meter — bundled in Particle.

Modal

HeroUI v3 Modal — bundled in Particle.

NumberField

HeroUI v3 NumberField — bundled in Particle.

Pagination

HeroUI v3 Pagination — bundled in Particle.

Popover

HeroUI v3 Popover — bundled in Particle.

ProgressBar

HeroUI v3 ProgressBar — bundled in Particle.

ProgressCircle

HeroUI v3 ProgressCircle — bundled in Particle.

Rac

HeroUI v3 Rac — bundled in Particle.

Radio

HeroUI v3 Radio — bundled in Particle.

RadioGroup

HeroUI v3 RadioGroup — bundled in Particle.

RangeCalendar

HeroUI v3 RangeCalendar — bundled in Particle.

ScrollShadow

HeroUI v3 ScrollShadow — bundled in Particle.

SearchField

HeroUI v3 SearchField — bundled in Particle.

Select

HeroUI v3 Select — bundled in Particle.

Separator

HeroUI v3 Separator — bundled in Particle.

Skeleton

HeroUI v3 Skeleton — bundled in Particle.

Slider

HeroUI v3 Slider — bundled in Particle.

Spinner

HeroUI v3 Spinner — bundled in Particle.

Surface

HeroUI v3 Surface — bundled in Particle.

Switch

HeroUI v3 Switch — bundled in Particle.

SwitchGroup

HeroUI v3 SwitchGroup — bundled in Particle.

Table

HeroUI v3 Table — bundled in Particle.

Tabs

HeroUI v3 Tabs — bundled in Particle.

Tag

HeroUI v3 Tag — bundled in Particle.

TagGroup

HeroUI v3 TagGroup — bundled in Particle.

Text

HeroUI v3 Text — bundled in Particle.

Textarea

HeroUI v3 Textarea — bundled in Particle.

Textfield

HeroUI v3 Textfield — bundled in Particle.

TimeField

HeroUI v3 TimeField — bundled in Particle.

Toast

HeroUI v3 Toast — bundled in Particle.

ToggleButton

HeroUI v3 ToggleButton — bundled in Particle.

ToggleButtonGroup

HeroUI v3 ToggleButtonGroup — bundled in Particle.

Toolbar

HeroUI v3 Toolbar — bundled in Particle.

Tooltip

HeroUI v3 Tooltip — bundled in Particle.

HeroUI (pro)

47Bundled HeroUI Pro components

ActionBar

HeroUI Pro ActionBar — bundled in Particle.

AppLayout

HeroUI Pro AppLayout — bundled in Particle.

AreaChart

HeroUI Pro AreaChart — bundled in Particle.

BarChart

HeroUI Pro BarChart — bundled in Particle.

Carousel

HeroUI Pro Carousel — bundled in Particle.

CellColorPicker

HeroUI Pro CellColorPicker — bundled in Particle.

CellSelect

HeroUI Pro CellSelect — bundled in Particle.

CellSlider

HeroUI Pro CellSlider — bundled in Particle.

CellSwitch

HeroUI Pro CellSwitch — bundled in Particle.

ChartTooltip

HeroUI Pro ChartTooltip — bundled in Particle.

CheckboxButtonGroup

HeroUI Pro CheckboxButtonGroup — bundled in Particle.

Command

HeroUI Pro Command — bundled in Particle.

ComposedChart

HeroUI Pro ComposedChart — bundled in Particle.

ContextMenu

HeroUI Pro ContextMenu — bundled in Particle.

DataGrid

HeroUI Pro DataGrid — bundled in Particle.

DropZone

HeroUI Pro DropZone — bundled in Particle.

EmojiPicker

HeroUI Pro EmojiPicker — bundled in Particle.

EmojiReactionButton

HeroUI Pro EmojiReactionButton — bundled in Particle.

EmptyState

HeroUI Pro EmptyState — bundled in Particle.

FileTree

HeroUI Pro FileTree — bundled in Particle.

FloatingToc

HeroUI Pro FloatingToc — bundled in Particle.

HoverCard

HeroUI Pro HoverCard — bundled in Particle.

InlineSelect

HeroUI Pro InlineSelect — bundled in Particle.

ItemCard

HeroUI Pro ItemCard — bundled in Particle.

ItemCardGroup

HeroUI Pro ItemCardGroup — bundled in Particle.

Kanban

HeroUI Pro Kanban — bundled in Particle.

Kpi

HeroUI Pro Kpi — bundled in Particle.

KpiGroup

HeroUI Pro KpiGroup — bundled in Particle.

LineChart

HeroUI Pro LineChart — bundled in Particle.

ListView

HeroUI Pro ListView — bundled in Particle.

NativeSelect

HeroUI Pro NativeSelect — bundled in Particle.

Navbar

HeroUI Pro Navbar — bundled in Particle.

NumberStepper

HeroUI Pro NumberStepper — bundled in Particle.

NumberValue

HeroUI Pro NumberValue — bundled in Particle.

PieChart

HeroUI Pro PieChart — bundled in Particle.

PressableFeedback

HeroUI Pro PressableFeedback — bundled in Particle.

RadarChart

HeroUI Pro RadarChart — bundled in Particle.

RadialChart

HeroUI Pro RadialChart — bundled in Particle.

RadioButtonGroup

HeroUI Pro RadioButtonGroup — bundled in Particle.

Rating

HeroUI Pro Rating — bundled in Particle.

Resizable

HeroUI Pro Resizable — bundled in Particle.

Segment

HeroUI Pro Segment — bundled in Particle.

Sheet

HeroUI Pro Sheet — bundled in Particle.

Sidebar

HeroUI Pro Sidebar — bundled in Particle.

Stepper

HeroUI Pro Stepper — bundled in Particle.

TrendChip

HeroUI Pro TrendChip — bundled in Particle.

Widget

HeroUI Pro Widget — bundled in Particle.

6
Atoms
5
Molecules
3
Pages
85
HeroUI (free)
47
HeroUI (pro)
6
Themes