watermelon-studio.it valid

rind-ui

Headless React components: behaviour, accessibility and state, styled through data-* attributes.

Their llms.txt

The beginning of the file, from our validated copy saved 2026-10-25T13:32:30.814Z. Cached copy · Source on watermelon-studio.it

# rind-ui

> Headless React components: behaviour, accessibility and state, styled through data-* attributes.

Use rind-ui for React UI that must work with keyboard and screen readers when you own the styles. Every component ships a test driver (Testing Library and Playwright), so an agent can verify what it builds.

## Quick start

```sh
pnpm add @rind-ui/react            # React 19+
pnpm add -D @rind-ui/testing       # drivers, for tests
```

```tsx
import { Switch } from "@rind-ui/react"

<Switch.Root>
  <Switch.Control><Switch.Thumb /></Switch.Control>
  <Switch.Label>Dark mode</Switch.Label>
</Switch.Root>
```

```css
[data-scope="switch"][data-part="control"][data-state="checked"] { background: black; }
[data-focus-visible] { outline: 2px solid hotpink; }
```

```ts
import { getSwitch } from "@rind-ui/testing"
const dark = getSwitch(screen, { name: "Dark mode" })
await dark.toggle()
expect(await dark.isChecked()).toBe(true)
```

Rules: compose the documented parts; never re-implement focus, keyboard or ARIA behaviour; give every control and group an accessible name; style `data-*` attributes (focus with `[data-focus-visible]`). Each component page below lists its parts, props, attributes, keyboard and driver.

## Guides

- [Announcements](https://rind.watermelon-studio.it/docs/announcements.md): Some changes have no focus move to carry them — "3 results", "Copied", a streamed answer. Components announce them through the environment's `Announcer`; they never render their own live region.
- [Autosize](https://rind.watermelon-studio.it/docs/autosize.md): A textarea that takes the height of its content, used by Text Field's `autosize` and later by Prompt Input and Editable. Native first, measured only where the browser cannot do it.
- [Collections](https://rind.watermelon-studio.it/docs/collections.md): Listbox, Select, Combobox, Menu, Tabs, Tree View and every other component that shows a set of items share one collection layer in `@rind-ui/core`: a key-based model of the items, selection, navigation, typeahead and the props of the collection parts. A component spreads these pieces into its machine; it never re-implements them.
- [Colour model](https://rind.watermelon-studio.it/docs/color-model.md): The [Color Picker](https://raw.githubusercontent.com/WatermelonBros/rind-ui/main/docs/components/color-picker.md) and every one of its parts share one model, in `@rind-ui/core`: a colour is plain data — `{ space, channels, alpha }` in `rgb`, `hsl` or `hsb` — and every operation is a function, so a colour survives `structuredClone`, JSON and a server render.
- [control-label](https://rind.watermelon-studio.it/docs/control-label.md): The shared Label and Description of a labelable control (Checkbox, Switch, group items, radios).
- [Implementing field-control](https://rind.watermelon-studio.it/docs/field-control.md): How a form control works inside a Field. Every rind-ui form control (Text Field, Checkbox, Select, …) does this, and your own control ca
…

Related sites

Explore similar publishers →

Similar publisher descriptions and documentation. Similarity does not imply affiliation or equivalent capabilities.

Machine-readable: GET /v1/resolve?q=watermelon-studio.it · GET /v1/domain/watermelon-studio.it · this page as Accept: application/json or text/markdown · MCP lookup_domain

Automatically discovered from public files. Inclusion does not imply endorsement or publisher participation.

Claim my listing on Agent Web Map for watermelon-studio.it:
1. POST https://agentwebmap.com/v1/sites/watermelon-studio.it/claims and keep claim_id and claim_secret private.
2. Publish the verification line "AgentWebMap verification: <token>" (token from step 1) in https://watermelon-studio.it/llms.txt, or use the DNS, meta-tag or well-known method the response describes. This only verifies the listing; your website and domain remain yours.
3. POST https://agentwebmap.com/v1/sites/watermelon-studio.it/verify with {"claim_id": "...", "claim_secret": "..."}.
4. Save the api_key from the answer; it manages the listing (PATCH https://agentwebmap.com/v1/sites/watermelon-studio.it).
MCP equivalent: tools begin_ownership_claim, then verify_domain, at https://agentwebmap.com/mcp. Docs: https://agentwebmap.com/docs#verify

Corrections or removal requests: contact the directory.