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
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