āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/preetecool/roi-ui/ui/like-button ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
npx shadcn@latest add @roiui/like-button
npx shadcn@latest add @roiui/like-button-tailwind
pnpm dlx shadcn@latest add @roiui/like-button
pnpm dlx shadcn@latest add @roiui/like-button-tailwind
<CodeBlock
filename="anatomy"
language="tsx"
code={<LikeButton /> } />
<PropTable data={[ { prop: "isPlaying", type: "boolean", default: "false", description: "Whether to auto-play the like animation continuously every 3 seconds", }, { prop: "onClick", type: "function", description: "Callback function called when the button is clicked", }, { prop: "className", type: "string", description: "Additional CSS classes to apply to the like button container", }, { prop: "particleCount", type: "number", default: "6", description: "Number of particles to generate on animation. Particles are distributed evenly across a 120Ā° spread", }, { prop: "colors", type: "string[]", default: '["var(--foreground)"]', description: "Array of color values for particles. Can be any valid CSS color (hex, rgb, CSS variables, etc.)", }, { prop: "colorMode", type: '"alternating" | "random"', default: '"alternating"', description: "How colors are applied to particles. 'alternating' cycles through the color array sequentially, 'random' picks a random color for each particle", }, ]} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā