# Mode picker
> Three mode cards (Chat, Code, Ultracode) on one canvas; the selected card gets an aurora and a comet on its border. Form-associated.
- Element: `<hf-modes>`
- React: `import { HfModes } from "@/components/lumesec/hf-modes"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-modes.json
- Page: https://elements.lumesec.ai/components/pixel-hd/modes



Live preview: https://elements.lumesec.ai/view/hf-modes

```html
<hf-modes name="mode" value="code"></hf-modes>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/hf-modes
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-modes.json
```

## Usage

React:

```tsx
import { HfModes } from "@/components/lumesec/hf-modes";

export function Example() {
  return (
    <HfModes name="mode" value="code" />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-modes.js"></script>

<hf-modes name="mode" value="code"></hf-modes>
```

## Behaviour

Three option cards on one canvas. The selected card gets an aurora and a comet that runs around its border; Ultracode switches the aurora to a full spectrum, adds twinkles and bursts when picked.

## API reference

### Attributes

| Attribute | React prop | Type                        | Default | Description                                                                                                              |
| --------- | ---------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |
| `value`   | `value`    | `chat \| code \| ultracode` | `code`  | Selected mode. Observed and reflected. An unknown value on connect selects `code`; unknown values set later are ignored. |
| `name`    | `name`     | `string`                    | —       | Form field name.                                                                                                         |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail              | Description                                                                       |
| -------- | ---------- | ------------------- | --------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ value: string }` | Fires when the user selects a different card. Not fired for programmatic changes. |

### Properties

| Property | Type     | Description                                        |
| -------- | -------- | -------------------------------------------------- |
| `value`  | `string` | Selected mode id. Setting it writes the attribute. |

## Keyboard

| Keys                   | Action                                        |
| ---------------------- | --------------------------------------------- |
| ArrowRight / ArrowDown | Select and focus the next card, wrapping.     |
| ArrowLeft / ArrowUp    | Select and focus the previous card, wrapping. |

## Accessibility

* The grid has `role="radiogroup"` with `aria-label="Mode"`.
* Each card is a native button with `role="radio"` and `aria-checked`; only the selected card is in the tab order.
* Card titles and descriptions are text; the canvas only draws decoration.
* Submits the selected mode id under `name`. No validation; form reset does not change the value.
* Reduced motion: the selection switches without fading, the border comet is off, the aurora and twinkles are drawn once without moving, and picking Ultracode throws no sparks.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--foreground`, `--lumesec`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-muted` and `--ui-raised`.

## Notes

* The three modes, their descriptions and the `New` badge on Ultracode are built in and cannot be configured.
* Cards sit in an auto-fit grid with a 150px minimum column width.