> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Empty states and spacers

> Zero-size placeholders, flexible spacers, and divider lines

export const PlatformStatuses = ({statuses}) => {
  const StatusBadge = ({status, label}) => {
    const styles = {
      green: {
        backgroundColor: '#dcfce7',
        color: '#166534'
      },
      orange: {
        backgroundColor: '#fed7aa',
        color: '#9a3412'
      },
      red: {
        backgroundColor: '#fecaca',
        color: '#991b1b'
      },
      gray: {
        backgroundColor: '#f3f4f6',
        color: '#4b5563'
      }
    };
    const baseStyle = {
      display: 'inline-flex',
      alignItems: 'center',
      padding: '0.125rem 0.625rem',
      borderRadius: '9999px',
      fontSize: '0.875rem',
      fontWeight: '500'
    };
    const colorStyle = styles[status] || styles.green;
    return <span style={{
      ...baseStyle,
      ...colorStyle
    }}>
        {label || status}
      </span>;
  };
  const STATUS_CONFIG = {
    supported: {
      label: "Supported",
      color: "green"
    },
    partial: {
      label: "Partial",
      color: "orange"
    },
    "not-implemented": {
      label: "Not Implemented",
      color: "gray"
    }
  };
  const renderCard = (platform, value) => {
    if (!value) return null;
    const {status, note} = typeof value === "string" ? {
      status: value
    } : value;
    const config = STATUS_CONFIG[status];
    if (!config) return null;
    const titleMap = {
      ios: "SwiftUI",
      android: "Jetpack Compose",
      web: "Web"
    };
    return <Card key={platform} title={titleMap[platform] || platform}>
          <StatusBadge status={config.color} label={config.label} />
          {note && <div style={{
      marginTop: '0.5rem',
      fontSize: '0.875rem',
      color: '#6b7280'
    }}>
              {note}
            </div>}
      </Card>;
  };
  if (statuses == null) {
    return null;
  }
  return <Columns cols="3">
      {Object.entries(statuses).map(([platform, value]) => renderCard(platform, value))}
    </Columns>;
};

export const ComposeJS = ({code, name, height}) => {
  const encodedCode = useMemo(() => {
    if (!code) return "";
    try {
      return btoa(code);
    } catch (e) {
      console.error("Failed to encode code", e);
      return "";
    }
  }, [code]);
  if (!encodedCode) {
    return null;
  }
  return <iframe src={`https://www.metabind.ai/embed?code=${encodedCode}&name=${name ?? 'Example'}`} loading="lazy" style={{
    width: "100%",
    height: height || '350px',
    border: "1px solid #e5e7eb",
    borderRadius: "var(--rounded-2xl,1rem)",
    overflow: "hidden"
  }} title="ComposeJS Preview" />;
};

These three components produce no content of their own — they exist to shape the space around other components. `Empty` renders nothing and takes no space, useful as the else-branch of a conditional. `Spacer` expands to fill available space along the major axis of its parent stack. `Divider` draws a thin separator line, adapting its orientation to the parent stack.

## Empty

An empty component that renders nothing.

```typescript theme={null}
Empty(): Component;
```

Empty takes no parameters. It produces a component that renders nothing and occupies no space.

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: "not-implemented",
web: { status: "supported" },
}}
/>

**Conditional rendering**

Use Empty as the else-branch when conditionally showing content:

```typescript theme={null}
showContent ? Text("Hello") : Empty()
```

**Placeholder in layouts**

```typescript theme={null}
VStack([
    Text("Title"),
    showSubtitle ? Text("Subtitle") : Empty()
])
```

## Spacer

A flexible space that expands along the major axis of its parent stack.

```typescript theme={null}
Spacer(props?: { minLength: number }): Component;
```

<ParamField path="props" type="object" optional>
  Configuration options for the spacer.

  <Expandable title="properties">
    <ParamField path="minLength" type="number" optional>
      The minimum length of the spacer in points. The spacer will not shrink below this size.
    </ParamField>
  </Expandable>
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "supported" },
web: { status: "supported" },
}}
/>

**Push items apart in an HStack**

```typescript theme={null}
HStack([
    Text("Leading"),
    Spacer(),
    Text("Trailing")
])
```

**Push content to the top**

```typescript theme={null}
VStack([
    Text("Top"),
    Spacer()
])
    .frame({ maxHeight: ".infinity" })
```

**With minimum length**

```typescript theme={null}
HStack([
    Text("Left"),
    Spacer({ minLength: 24 }),
    Text("Right")
])
```

<Note>
  In a [VStack](/bindjs/components/VStack), Spacer expands vertically. In an [HStack](/bindjs/components/HStack), it expands horizontally. Multiple Spacers in the same stack share the available space equally.
</Note>

## Divider

A thin line separator that adapts its orientation to the parent stack.

```typescript theme={null}
Divider(): Component;
```

Divider takes no parameters. It renders a horizontal line in a [VStack](/bindjs/components/VStack) and a vertical line in an [HStack](/bindjs/components/HStack).

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "supported" },
web: { status: "supported" },
}}
/>

**In a VStack**

```typescript theme={null}
VStack([
    Text("Above"),
    Divider(),
    Text("Below")
])
```

**In an HStack**

```typescript theme={null}
HStack([
    Text("Left"),
    Divider(),
    Text("Right")
])
    .frame({ height: 40 })
```

**Separating list items**

```typescript theme={null}
VStack({ spacing: 0 }, [
    ForEach(items, (item, index) =>
        Group([
            Text(item.name).padding(12),
            index < items.length - 1 ? Divider() : Empty()
        ])
    )
])
```

## See also

* [VStack](/bindjs/components/VStack) — vertical stack that hosts spacers and dividers
* [HStack](/bindjs/components/HStack) — horizontal stack that hosts spacers and dividers
* [Group](/bindjs/components/Group) — group components without adding layout
* [ForEach](/bindjs/components/ForEach) — iterate over data to produce children