React Guide

This guide walks you through setting up Servly in an existing React project.

Setup

Install the CLI and React runtime:

npm install @servly/cli @servly/runtime-react

Generate Components

servly distribute --framework react --output src/components/servly

This generates typed React components from your CIF manifests:

src/components/servly/
├── Button.tsx
├── Card.tsx
├── Input.tsx
└── index.ts

Usage

import { Button, Card } from "./components/servly";

export function App() {
  return (
    <Card>
      <h2>Hello Servly</h2>
      <Button variant="primary" size="md">
        Get Started
      </Button>
    </Card>
  );
}

TypeScript Support

All generated components include full type definitions. Props are typed based on your CIF spec:

// Auto-generated — do not edit
interface ButtonProps {
  variant?: "primary" | "secondary" | "ghost";
  size?: "sm" | "md" | "lg";
  children?: React.ReactNode;
}