# Schema Repeater
URL: /docs/web/components/schema-repeater

Schema Repeater component with multiple variants and sizes.

**Demo:**

```tsx
'use client';

import { useCallback, useState } from 'react';

import { SchemaRepeater } from '@docyrus/ui/components/schema-repeater';
import { Input } from '@docyrus/ui/primitives/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';

interface FilterRule {
  id: string;
  field: string;
  operator: string;
  value: string;
}

const FIELD_OPTIONS = [
  { value: 'name', label: 'Name' },
  { value: 'email', label: 'Email' },
  { value: 'status', label: 'Status' },
  { value: 'role', label: 'Role' },
  { value: 'created', label: 'Created At' }
];

const OPERATOR_OPTIONS = [
  { value: 'equals', label: 'equals' },
  { value: 'contains', label: 'contains' },
  { value: 'starts_with', label: 'starts with' },
  { value: 'ends_with', label: 'ends with' },
  { value: 'is_empty', label: 'is empty' }
];

let counter = 0;

export function SchemaRepeaterDemo() {
  const [rules, setRules] = useState
              
                ))}
              
            
            
              
                ))}
              
            
            <Input
              value={item.value}
              onChange={e => update({ value: e.target.value })}
              placeholder="Value..."
              className="h-8 flex-1 text-sm" />
          </div>
        )} />
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-schema-repeater
```

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import {
  SchemaRepeater
} from "@docyrus/ui/components/schema-repeater";

```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `className` | `string` | — |