Azalea Health design system v5.0.2

Azalea Kit UI

Accessible web components, design tokens and guidance for building every Azalea Health product, from the EHR to the patient portal.

Get started

Browse 80 components

npm install git@bitbucket.org:azaleahealth/azalea-kit-ui.git

Confirmed

Annual wellness visit · Tuesday at 9:30 AM

Insurance on file

Credit or debit card

Pay at the front desk

Text me appointment reminders

Reschedule

Check in

Live components, not a screenshot. Try them in dark mode from the top bar.

Start building

Four pages take a new app from install to on-brand.

Install the package
Add Azalea Kit UI with npm, load a theme and import the components you use.
Use the components
They are custom elements, so they take attributes, properties and events like any other HTML element. Setup guides for Vue and Laravel.
Build forms
Form controls are form-associated, so FormData, validation and reset work as they do for native inputs.
Make it yours
Restyle through design tokens and CSS parts, and lay out pages with the utility classes.

Built for clinical software

Accessible, and checked on every build

Every component’s demos are scanned against WCAG 2.1 AA in CI, and a new violation fails the build.
Accessibility checklist
One library, any stack

Standard custom elements built on Lit. The same tags work in Laravel Blade, Vue and plain HTML.
How components work
Sized for who is reading

Compact density for clinicians, comfortable for patients and spacious for kiosks, each in light and dark.
Density tiers
Made for health data

Form controls never ask the browser to remember values on a shared workstation, and FHIR components render names, addresses and questionnaires.
FHIR types

Components

80 components in 9 groups. Each page has live demos, import paths and the full API.

Actions

Buttons, alone or grouped, for the actions people take.

Layout and structure

Page layout, cards, headers, tables and the containers that arrange a screen.

Selection and input

Form controls, from text and dates to masked phone, SSN and ZIP code fields.

Images and icons

Avatars, the Azalea logo and the self-hosted icon set.

Feedback indicators

Badges, banners, progress bars, skeletons and spinners that report status.

Typography

Type roles ship as utility classes in every theme, so most text needs no component.

Text deprecated

App navigation, menus, tabs, breadcrumbs, pagination and trees.

Overlays

Dialogs, popovers and tooltips that sit above the page.

Utilities

Formatters, observers and FHIR renderers for names, addresses, quantities and questionnaires.

Foundations

The tokens every component is built from. Use them in your own CSS and your screens match the library.

Color
Brand colors, palette ramps and semantic tokens.
Typography
Type roles that pair each size with its line height.
Spacing
One scale for padding, margins and gaps.
Icons
A self-hosted set, bundled with the library.

More tokens: Border Shadow Transition Z-index

What’s new

Version 5.0.2.

Contribute

Read the changelog