Theme Default

Components

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.

Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

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

npx ritla add specimen-frame

Also works with shadcn: npx shadcn@latest add @ritla/specimen-frame

Dependencies it brings: @phosphor-icons/react

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

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.

Get the code ›

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 are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`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.