# Specimen Frame

> A live specimen above a link to its page, in a grid ruled by hairlines. The frame tints on hover and while focus is inside it.

Source: https://ritla.app/ui/specimen-frame

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add specimen-frame
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/specimen-frame
```

Dependencies: `@phosphor-icons/react`

## Usage

```tsx
import { SpecimenFrame, SpecimenGrid } from "@/components/ui/specimen-frame";

<SpecimenGrid>
  <SpecimenFrame title="Phone number" href="/docs/components/phone-input">
    <PhoneInput label="Phone number" defaultCountry="SA" />
  </SpecimenFrame>
</SpecimenGrid>
```

## Examples

### Two columns, an odd number of frames

With `columns={2}`: the rules between frames stay hairlines, and the empty slot draws nothing.

Live preview: https://ritla.app/_kanz/preview/ltr/specimen-frame-two-columns

## API reference

### `SpecimenGrid`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | `2 \| 3` | `3` | Columns from `lg`. One on a phone, two from `md`. |
| `children` | `ReactNode` | None | `SpecimenFrame`s. |

### `SpecimenFrame`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` | None | The component's name, in the footer link. |
| `href` | `string` | None | Where the link goes: the component's page. |
| `render` | `ReactElement` | None | A router link (`<Link>`) with the footer's look, in place of `href`. |
| `children` | `ReactNode` | None | The live specimen. |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Tab`: Through the specimen's controls, then to the frame's link.

ARIA:

- The link carries the component's name, so a screen reader's link list reads “Phone number”, not “See more”.
- The arrow is decorative and hidden from screen readers.

## Arabic and RTL notes

Mirrors:

- Frames start on the right; each frame's rule is on its left.
- The link's arrow points left.

Does not mirror:

- The specimen itself: each follows its own rules, so a phone field stays left to right.

Numerals: The frame writes no numbers itself; the specimens follow the numerals setting.

Arabic typography: The link is `body-14` Medium.