# CommandGrid

A compact command overview for CLI-heavy pages. Use `CommandGrid` with one or more `CommandCard` children.

## API

### CommandGrid

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | `CommandCard` elements. |

### CommandCard

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `command` | `string` | — | CLI command shown in monospace. |
| `title` | `string` | — | Human-readable command name. |
| `description` | `string` | — | Short task description. |
| `href` | `string` | — | Optional link target. |
| `flags` | `string[]` | `[]` | Common flags shown as badges. |

## Example

```mdx
<CommandGrid>
  <CommandCard command="folioh init" title="Initialize" description="Create docs.yaml." />
  <CommandCard command="folioh build" title="Build" description="Generate the static site." flags={["--clean", "--verbose"]} />
</CommandGrid>
```

- **Initialize**: Create docs.yaml from project metadata.

- **Build**: Generate MDX, search, and static output.