React component library for rapid prototyping of Appian applications with SAIL-compatible syntax.

Sailwind enables UX designers to rapidly prototype Appian applications using React and LLMs (like Claude) before committing to SAIL development. Components look like Appian, use exact SAIL parameter names, and translate directly to production code.

• SAIL-Exact Parameters - Use UPPERCASE values matching SAIL: size="STANDARD" not size="standard"
• Backwards Compatible - React code translates almost directly to SAIL
• LLM-Friendly - Clear patterns for AI-assisted development
• Accessible - All components meet WCAG 2.1 AA standards
• Production-Ready Foundation - Built on Radix UI primitives + Tailwind CSS

1. Click "Use this template" button above
2. Clone your new repository
3. Install dependencies: npm install
4. Start development server: npm run dev
5. Open http://localhost:5173 to see the component library and examples

git clone https://github.com/pglevy/sailwind.git
cd sailwind
npm install
npm run dev

1. Browse examples at /#/examples/taskdashboard to see what's possible
2. Explore components at /#/components to understand available building blocks
3. Create new pages by adding .tsx files to src/pages/ - they'll automatically become routes
4. Import components using exact SAIL parameter names:

// src/pages/my-prototype.tsx
import { CardLayout, HeadingField, TagField, ButtonArrayLayout } from '../components'

export default function MyPrototype() {
  return (
    <CardLayout padding="STANDARD">
      <HeadingField text="My Prototype" size="LARGE" />
      <TagField 
        tags={[{ text: "DRAFT", backgroundColor: "ACCENT" }]}
        size="STANDARD" 
      />
      <ButtonArrayLayout
        buttons={[
          { label: "Save", style: "SOLID", color: "ACCENT" },
          { label: "Cancel", style: "OUTLINE", color: "SECONDARY" }
        ]}
        align="END"
      />
    </CardLayout>
  )
}

4. Navigate to /#/my-prototype to see your page
5. Translate to SAIL when ready for production using the exact same parameter names

• Check out src/pages/examples/ for complete interface examples
• Read the component documentation below for detailed usage
• Use the table of contents on the home page to navigate between examples

React Prototype:

<TagField
  size="STANDARD"
  tags={[
    { text: "URGENT", backgroundColor: "#FED7DE", textColor: "#9F0019" }
  ]}
/>

SAIL Production:

a!tagField(
  size: "STANDARD",
  tags: {
    a!tagItem(text: "URGENT", backgroundColor: "#FED7DE", textColor: "#9F0019")
  }
)

• Base: Radix UI (unstyled, accessible primitives)
• Styling: Tailwind CSS with Aurora color palette
• Language: TypeScript (enforces SAIL conventions)

Sailwind uses a clear separation:

1. Layer 1: SAIL API - Component props use SAIL parameter names (UPPERCASE values)
2. Layer 2: Implementation - Standard Tailwind classes for styling

Sailwind uses Lucide React for icons with simplified names that map to SAIL:

Sailwind uses standard Tailwind classes internally while maintaining SAIL-exact component APIs:

• SMALL → text-xs (12px)
• STANDARD → text-base (16px)
• MEDIUM → text-lg (18px)
• LARGE → text-2xl (24px)

• NONE → p-0 / m-0 (0)
• EVEN_LESS → p-1 / m-1 (4px)
• LESS → p-2 / m-2 (8px)
• STANDARD → p-4 / m-4 (16px)
• MORE → p-6 / m-6 (24px)
• EVEN_MORE → p-8 / m-8 (32px)

All colors use consistent Tailwind steps: 50, 100, 200, 500, 700, 900

Available colors: red, orange, yellow, green, teal, sky, blue, purple, pink, gray

Usage:

// Light backgrounds
<div className="bg-blue-100 text-blue-700">Tag</div>

// Primary actions
<button className="bg-blue-500 hover:bg-blue-700">Submit</button>

// Text hierarchy
<h1 className="text-gray-900">Heading</h1>
<p className="text-gray-700">Body</p>

• npm run dev - Start development server with HMR
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

sailwind/
├── src/
│   ├── components/         # SAIL components (Button, Tag, Card, etc.)
│   ├── types/             # Shared TypeScript types (SAILSize, SAILAlign, etc.)
│   ├── index.css          # Tailwind v4 theme configuration
│   └── App.tsx            # Demo/playground
├── TAILWIND-SAIL-MAPPING.md  # Complete styling reference
├── CLAUDE.md              # LLM instructions
└── package.json

• TAILWIND-SAIL-MAPPING.md - Complete reference for Tailwind to SAIL mappings
• CLAUDE.md - Instructions for LLM-assisted development
• SAIL Official Docs - Appian SAIL reference

• Radix UI - https://www.radix-ui.com/
• Tailwind CSS - https://tailwindcss.com/
• Aurora Design System - Color palette and branding

This is a proof-of-concept for rapid Appian prototyping. Contributions welcome!

1. Use exact SAIL parameter names (UPPERCASE values)
2. Follow Item + Field component pattern
3. Include SAIL translation examples in documentation
4. Ensure WCAG 2.1 AA accessibility compliance
5. Use standard Tailwind classes internally

TBD

Status: Active development - 20 components implemented (15 SAIL + 5 "New SAIL") including form inputs, selections, toggles, sliders, tabs, dialogs, and display components