# TickNav

> A navigation list on a ruler of tick marks: every line the pointer crosses plucks like a string, neighbouring lines and ticks stretch and light up on springs, and an optional preview card follows the pointer.

- Package: `fancy-ui-react` (React 18/19 + Tailwind CSS v4)
- Category: Navigation
- Tags: nav, sidebar, ruler, ticks, proximity, spring, preview, hover
- Types: `TickNavProps`, `TickNavItem`
- Docs: https://fancy-ui.rama.app/docs/components/tick-nav
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/react/src/components/tick-nav

## Import

```tsx
import { TickNav } from 'fancy-ui-react';
```

Setup (once per project): `npm install fancy-ui-react`, then put these lines in your main CSS file (the stylesheet import goes right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-react/tailwind.css";
```

and import the component styles once in the app entry: `import "fancy-ui-react/styles.css";`. Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in React; when one differs from the Svelte name, the Svelte name follows in parentheses. `class` becomes `className`, a callback takes the name the React port declares (`onclick` becomes `onClick`), snippets become `ReactNode` props (render functions when they take arguments) and the default snippet is `children`. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/react#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `TickNavItem[]` | — | The rows, top to bottom: `{ id, label, href?, badge?, disabled? }`. A row with `href` renders as a link, otherwise as a button. |
| `value` | `string` | — | Id of the current item. Bindable. |
| `onValueChange` | `(id: string) => void` | — | Called with the id of an item that is activated and not already current. |
| `preview` | `Snippet<[TickNavItem]>` | — | Content of the card that follows the pointer while a row is hovered (or sits beside a keyboard-focused row). Leave it out and no card is rendered. |
| `reach` | `number` | `4` | Rows over which the neighbours of the hovered row still react. |
| `minorTicks` | `number` | `2` | Ruler ticks drawn between two rows. |
| `variant` | `"default" \| "neon"` | `"default"` | Neon turns the lines into glowing tubes: proximity raises the glow, a beam of light rides every pluck, labels glow on hover, and the current line breathes. Made for dark surfaces. |
| `hdr` | `boolean` | `true` | Neon only: on a display that reports HDR, draws the light in a WebGPU canvas with extended tone mapping, so the tubes reach SDR white and the beam peaks around 1000 nits. Elsewhere the CSS glow carries the effect alone. |
| `ariaLabel` | `string` | `"Navigation"` | Accessible name of the nav landmark. |
| `sound` | `boolean` | `false` | Plays a cue for every line a mouse or pen plucks (hover for an item, a softer tick for a ruler tick), once the user has enabled sound |
| `className` (Svelte `class`) | `string` | — | Additional CSS classes on the nav. |

## Example

No React example is published for this component yet: start from the import above and the props table. The full examples are Svelte-only, on https://fancy-ui.rama.app/docs/components/tick-nav.md.