# nabs-ui-cards

Reusable React card flow control for the Nabs UI library.

## Usage

```tsx
import { Cards } from "@net-advantage/nabs-ui-cards/Cards";
import { Button } from "@net-advantage/nabs-ui-buttons/Button";

export function Example() {
  return (
    <Cards
      layout="N"
      columns={3}
      items={[
        {
          id: "starter",
          header: <strong>Starter</strong>,
          content: <p>Good for smaller teams and simple projects.</p>,
          actions: <Button variant="secondary">Select</Button>,
        },
      ]}
    />
  );
}
```

## Props

- `layout` controls the card flow. `N` uses the normal row-major order and `Z` uses a zig-zag flow.
- `columns` controls how many cards are shown horizontally.
- Each item supports `header`, `content`, and `actions` slots.

The package exports `Cards`, `CardItem`, `CardLayout`, and `CardsProps` from the package entry point.