React · Tailwind · SAIL

React components,
fluent in SAIL.

Every prop mirrors Appian SAIL exactly — size="STANDARD", color="ACCENT", uppercase values included. Prototype in React; hand your SAIL developer something they already recognize.

Download Template View Components
ButtonWidget.tsx
<ButtonWidget
  size="STANDARD"
  style="SOLID"
  color="ACCENT"
/>
renders as
px-4 py-2.5 text-base
rounded-sm · #2322F0
How it works

One prop set, two languages.

Sailwind's two-layer architecture keeps the SAIL API exact and uppercase, while an internal mapping layer translates each value into real Tailwind classes. You never see the seam.

SAIL API — what you write
<TagField size="STANDARD" tags={[{ text: "URGENT", backgroundColor: "#FED7DE", textColor: "#9F0019" }]} />
Rendered — what ships
URGENT
SAIL API — what you write
<ToggleField choiceLabel="Enable Notifications" value={true} />
Rendered — what ships
Enable Notifications
Component library

Test drive everything in Storybook.

From single buttons to a full record view template, every component ships with SAIL-exact props, the same color system, and a Storybook story you can try live.

Save Cancel Skip

Actions

Buttons and toggles for every solid, outline, and ghost state.

ButtonWidgetButtonArrayLayoutButtonToggle

Forms & input

Text, dropdowns, checkboxes, radios, sliders, and toggles.

TextFieldDropdownCheckboxRadioButtonSliderToggle
OverviewDetailsHistory

Layout & navigation

Cards, tabs, site nav, admin nav, and the application header.

CardLayoutTabsFieldSiteNavSideNavAdminApplicationHeader
3 of 5 done

Feedback & status

Banners, progress bars, milestones, tags, and stamps.

MessageBannerProgressBarMilestoneTagFieldStamp

Data & content

Read-only grids, record views, rich text, headings, and images.

ReadOnlyGridRecordViewRichTextDisplayFieldHeadingField
How do I file a claim? Let's start with your policy number.

Conversational

Chat threads and dialogs for AI-assisted and guided flows.

ChatDialog
Browse every component in Storybook
Design tokens

Unified design vocabulary.

Every color, radius, and spacing value in Sailwind traces back to one tokens.json file — the same source that generates this ribbon and the CSS custom properties behind every component.

red
burnt-orange
orange
amber
yellow
lime
green
teal
cyan
sky
blue
violet
purple
pink
gray
Spacing scale
4
8
16
24
32
48
EVEN_LESS → LESS → STANDARD → MORE → EVEN_MORE → …
Type scale
EXTRA_LARGE LARGE MEDIUM — body emphasis STANDARD — default body SMALL — captions & labels
15 families × 10 steps = 150 color tokens tokens/tokens.json → generate:css → @theme
Get started

Download the template. Describe what you want.

The sailwind-starter template comes pre-configured for AI-assisted development — steering files, custom agents, and project context included. Just tell your AI what to build.

01

Download the template

sailwind-starter.zip
Download
02

Describe what you want to build

"Create a page called vendor-registration
with a form for company name, contact,
email, and a submit button."
03

Iterate with AI

"Add a search bar to the home page that
filters the page list as you type."

Built for Kiro IDE & CLI

The template includes a pre-configured "sailor" agent, project steering files, and skills for environment setup, security audits, sharing, and even deploying to Appian — all ready out of the box.

Configure Environment Security Audit Share Link Deploy to Appian Generate Appian App + more

Alternate: add the package to an existing project

pnpm add @pglevy/sailwind

See every component in one place.

Live, interactive examples for all 27 component families — try every size, style, and color before you write a line.

View Components