Components

Detail Explorer

A list of rules beside a stage that shows one specimen two ways, before the rule and after it, with the verdict and the fix in code.

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 detail-explorer

Also works with shadcn: npx shadcn@latest add @ritla/detail-explorer

Dependencies it brings: @base-ui/react, @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 { DetailExplorer } from "@/components/ui/detail-explorer";

<DetailExplorer
  chip='dir="rtl" lang="ar"'
  items={[
    {
      value: "phone",
      title: "Phone numbers",
      verdict: { before: "The digit groups swap places", after: "One number, in order" },
      fix: "unicode-bidi: isolate",
      render: (state) => (
        <p dir="rtl" lang="ar">
          اتصل بنا على {state === "before" ? "+966 55 123 4567" : <bdi dir="ltr">+966 55 123 4567</bdi>}
        </p>
      ),
    },
  ]}
/>

Examples

A tour that plays itself

With autoPlay the explorer walks its items by itself while it is on screen: “before”, then “after”, then the next. Picking a tab or a state stops it for good, its button pauses and resumes it, and it never runs when the reader asks for reduced motion.

Get the code ›

API reference

DetailExplorer

Prop	Type	Default	Description
`items`	`DetailExplorerItem[]`	None	The rules: `value`, `title`, `description`, `caption`, `verdict`, `fix` and `render(state)`.
`chip`	`string`	None	A code chip at the stage's start: the setting every specimen shares.
`value / defaultValue / onValueChange`	`string`	None	The selected item, controlled or not.
`copy`	`{ list, states, before, after, pause, play }`	None	The list's and switch's names, the two states' labels and the tour button's labels; the default follows the page language.
`autoPlay`	`boolean`	`false`	A tour through the items, with a pause button.
`interval`	`number`	`4600`	One item's time in the tour, in ms.

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`	To the selected tab, then the Before / After switch, then the tour button.
`ArrowDownArrowUp`	Between tabs when they are a column (from `md`).
`ArrowLeftArrowRight`	Between tabs when they are a row on a phone, in reading order: in Arabic, ArrowLeft is next.

ARIA

The list is named tabs (“Details”), and the stage is their panel.
Before and After are a named radio group (“Rendering”).
The verdict is a polite live region, read when the state changes.
The tour button says what it will do: “Pause the tour” or “Play the tour”.

Arabic and RTL notes

Mirrors

The list on the right, the stage on the left; the selected tab's arrow points left.
The tour's bar fills from the right.

Does not mirror

The code in the chip and the fix stays left to right.
The specimens themselves: each carries its own dir and lang.

Numerals: The explorer writes no numbers itself; the specimens' numbers are as you write them.
Arabic typography: Tab titles body-16 Medium and descriptions body-14; the verdict body-14 Medium; code body-12 monospace.
Mixed-direction text: Every “before” in the example is what the browser really draws without the rule: digits after Arabic letters become Arabic numbers in the bidi algorithm, so an un-isolated phone number's groups run right to left.