Components
Loading preview...
A simple component with the radio logic Vue version: https://namer-ui-for-vue.netlify.app/
@Northstrix
npx shadcn@latest add https://21st.dev/r/maxim.bort.devel/radio-groupimport React, { useState } from 'react';
import { RadioGroup } from "@/components/ui/radio-group";
import { Home, Settings, Info } from 'lucide-react';
export const DemoLTR = () => {
const [selected, setSelected] = useState('home');
return (
<div className="min-h-[240px] p-8 flex flex-col items-center rounded-[12px] gap-4 max-w-[460px] mx-auto">
<RadioGroup
options={[
{ value: 'home', label: 'Home', icon: Home },
{ value: 'settings', label: 'Settings', icon: Settings },
{ value: 'about', label: 'About', icon: Info },
]}
value={selected}
onChange={setSelected}
fontSize="1.08rem"
fontWeight={400}
borderRadius="8px"
gap="14px"
bgDefault="var(--radio-group-bg-default)"
fgDefault="var(--radio-group-fg-default)"
bgActive="var(--radio-group-bg-active)"
fgActive="var(--radio-group-fg-active)"
bgHover="var(--radio-group-bg-hover)"
fgHover="var(--radio-group-fg-hover)"
padding="0 48px"
/>
<div className="mt-3 text-[15px] text-[#888]">
Selected: <b>{selected}</b>
</div>
</div>
);
};
export const DemoRTL = () => {
const [selected, setSelected] = useState('home');
return (
<div className="min-h-[240px] p-8 flex flex-col items-center rounded-[12px] gap-4 max-w-[424px] mx-auto">
<RadioGroup
options={[
{ value: 'home', label: 'בית', icon: Home },
{ value: 'settings', label: 'הגדרות', icon: Settings },
{ value: 'about', label: 'אודות', icon: Info },
]}
value={selected}
onChange={setSelected}
fontSize="1.08rem"
fontWeight={400}
borderRadius="100px"
gap="14px"
bgDefault="var(--radio-group-bg-default)"
fgDefault="var(--radio-group-fg-default)"
bgActive="var(--radio-group-bg-active)"
fgActive="var(--radio-group-fg-active)"
bgHover="var(--radio-group-bg-hover)"
fgHover="var(--radio-group-fg-hover)"
padding="0 48px"
rtl
/>
<div className="mt-3 text-[15px] text-[#888]">
Selected: <b>{selected}</b>
</div>
</div>
);
};