# Digitexa UI > Open-source, copy-paste React components for dense, warm desktop interfaces (Next.js, Tailwind CSS v4, Radix). Components are installed as source files with the `dx` CLI and styled only with semantic --dx-* tokens. ## radio-group Radio buttons and selectable cards (RadioCard) for visual choices. Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add radio-group` Also adds: utils, theme npm: @radix-ui/react-radio-group@^1.5.1 lucide-react@^1.61.0 ```tsx import { RadioGroup, RadioGroupItem, RadioCard } from "@/components/ui/radio-group"; ``` ### Example ```tsx import { ArrowRightIcon, LayoutGridIcon, ListIcon } from "lucide-react"; import { Label } from "@/components/ui/label"; import { RadioCard, RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; export default function Demo() { return (

{[ ["day", "Every day"], ["week", "Every week"], ["never", "Never"], ].map(([value, label]) => (

{label}

))} {[ ["board", "Board", LayoutGridIcon], ["list", "List", ListIcon], ["timeline", "Timeline", ArrowRightIcon], ].map(([value, label, Icon]) => { const I = Icon as typeof ListIcon; return ( {label as string} ); })}

); } ``` ### Source: ui/radio-group.tsx ```tsx "use client"; import * as React from "react"; import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; import { CheckIcon } from "lucide-react"; import { cn } from "@/lib/utils"; function RadioGroup({ className, ...props }: React.ComponentProps) { return ; } /** Classic radio dot; pair with . */ function RadioGroupItem({ className, ...props }: React.ComponentProps) { return ( ); } /** A whole card is the radio: …preview…. Shows a check when selected. */ function RadioCard({ className, children, ...props }: React.ComponentProps) { return ( {children} ); } export { RadioGroup, RadioGroupItem, RadioCard }; ```

Radio group

Installation

Usage

Radio group

Installation

Usage