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.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<HfModes value="code" name="mode" />
Installation
pnpm dlx shadcn@latest add @lumesec/hf-modesFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/hf-modes.jsonUsage
import { HfModes } from "@/components/lumesec/hf-modes";
export function Example() {
return (
<HfModes name="mode" value="code" />
);
}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
valueReact propvalueTypechat | code | ultracodeDefaultcodeSelected mode. Observed and reflected. An unknown value on connect selects code; unknown values set later are ignored.
nameReact propnameTypestringForm field name.
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
changeReact proponChangeDetail{ value: string }Fires when the user selects a different card. Not fired for programmatic changes.
Properties
valueTypestringSelected 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"witharia-label="Mode". - Each card is a native button with
role="radio"andaria-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.
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
Newbadge on Ultracode are built in and cannot be configured. - Cards sit in an auto-fit grid with a 150px minimum column width.
Related
Was this page helpful?