@spryinnovations/ui

38 production-ready React UI components for the Spry Innovations design system.

Install

npm install @spryinnovations/ui @spryinnovations/theme @spryinnovations/tokens

Setup

/* Your CSS entry point */
@import "@spryinnovations/theme/tailwind.css";
@source "./src/**/*.{ts,tsx}";

// main.tsx
import { SpryProvider } from "@spryinnovations/theme/react";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <SpryProvider><App /></SpryProvider>
);

Usage

import { Button, Input, Badge, Avatar, Slider, Rate } from "@spryinnovations/ui";

// Button — 5 variants, 3 sizes, 3 shapes
<Button variant="solid" size="md">Save changes</Button>
<Button variant="outline" shape="rounded">Cancel</Button>
<Button state="loading">Saving…</Button>

// Input — with label, states, icons
<Input label="Email" type="email" state="error" errorText="Invalid email" />

// Badge — error / warning / success / info
<Badge variant="error" count={99} />
<Badge variant="success" dot />

// Avatar — icon / picture / text
<Avatar type="text" name="Avery Chen" status="online" />

// Slider / RangeSlider
<Slider value={40} showLabel showValue onChange={setVal} />
<RangeSlider value={[20, 80]} showLabel showValue />

// Rate (stars)
<Rate count={5} value={3.5} onChange={setRating} />

See the full component list and the docs site for all variants.