sigil-component

Sigil Component

Create and modify React components that consume Sigil design tokens via CSS custom properties.

When to Use

• User asks to create a new Sigil UI component
• User asks to modify an existing component in packages/components/
• User says "add a component", "create component", "build a button/card/input"
• User asks to style a component using Sigil tokens
• User wants to add a component to the CLI registry

How to Use

1. Understand the component structure

Every Sigil component lives in packages/components/src/ and follows this pattern:

import { forwardRef, type ComponentPropsWithoutRef } from "react";
import { clsx } from "clsx";

type ButtonProps = ComponentPropsWithoutRef<"button"> & {
  variant?: "default" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "default", size = "md", children, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={clsx(
          "sigil-button",
          `sigil-button--${variant}`,
          `sigil-button--${size}`,
          className,
        )}
        {...props}
      >
        {children}
      </button>
    );
  },
);

Button.displayName = "Button";

2. Token consumption rules

Components consume tokens exclusively through CSS custom properties. Never hardcode colors, spacing, or typography values.

.sigil-button {
  font-family: var(--s-font-body);
  background: var(--s-primary);
  color: var(--s-text-light);
  border-radius: var(--s-radius-md);
  padding: var(--s-spacing-2) var(--s-spacing-4);
  box-shadow: var(--s-shadow-sm);
  transition-duration: var(--s-duration-fast);
  transition-timing-function: var(--s-easing-default);
}

3. Register in CLI

After creating a component, add it to packages/cli/src/utils/registry.ts:

"my-component": {
  name: "my-component",
  files: ["my-component.tsx"],
  dependencies: [],          // npm deps like @radix-ui/*
  devDependencies: [],
  registryDependencies: [],  // other sigil components this depends on
},