# PortfolioIndex

Tabbed collections with a supporting editorial column.

- Group: Website
- Import: `import { PortfolioIndex } from '@misoto22/folio/website'`
- Page: https://ui.misoto22.com/components/portfolio-index/

## When to reach for it

Group related collections under a named tab strip with keyboard selection.

## Best practices

### Do

- Supply localized labels, descriptive links and meaningful image alternatives.

### Don’t

- Do not put service credentials, routing logic or backend models inside presentation components.

## PortfolioIndex

A portfolio index whose categories and context follow the selected tab.

### Props

- `label` (required) — `string`.
- `items` (required) — `PortfolioIndexItem[]`.
- `aside` — `ReactNode`.
- `defaultValue` — `string`.

## Example — related collections

```tsx
import { Text } from '@misoto22/folio'
import { PortfolioIndex, PortfolioRecord } from '@misoto22/folio/website'

<PortfolioIndex label="Selected work" items={[
  { value: 'writing', label: 'Writing', count: 1,
    content: <PortfolioRecord title="The value of a small tool" description="An essay about useful constraints." context="Essay" />,
    aside: <Text size="sm">Notes on design, systems and everyday practice.</Text> },
  { value: 'projects', label: 'Projects', count: 1,
    content: <PortfolioRecord title="Reading room" description="A searchable index for a shared library." context="Product" />,
    aside: <Text size="sm">Selected work from an independent studio.</Text> },
]} />
```