CIF Specification

The Component Interchange Format (CIF) is the core of Servly’s interoperability. It defines a JSON-based schema for describing UI components in a framework-agnostic way.

Overview

CIF captures:

• Component structure — layout tree, slots, and composition patterns
• Props interface — typed inputs with defaults, validation, and documentation
• Design tokens — colors, spacing, typography, and other design decisions
• Variants — responsive breakpoints, states, and conditional rendering

Schema

{
  "$schema": "https://open.servly.app/schemas/cif/v1.json",
  "name": "Button",
  "version": "1.0.0",
  "props": {
    "variant": {
      "type": "enum",
      "values": ["primary", "secondary", "ghost"],
      "default": "primary"
    },
    "size": {
      "type": "enum",
      "values": ["sm", "md", "lg"],
      "default": "md"
    },
    "children": {
      "type": "slot"
    }
  },
  "tokens": {
    "border-radius": "var(--radius)",
    "font-family": "var(--font-sans)"
  }
}

Design Principles

1. Framework-agnostic — No assumptions about rendering runtime
2. Human-readable — JSON that designers and developers can both understand
3. Versionable — Semantic versioning at the component level
4. Extensible — Custom fields for framework-specific hints