Color Swatch
A selectable color sample.
Preview
Loading...
import { ColorSwatch } from "@/components/ui/ColorSwatch";
export function ColorSwatchDemo() {
return (
<div className="flex items-center gap-0.5">
<ColorSwatch color="#964CE1" label="Violet" selected />
<ColorSwatch color="#3D63DD" label="Blue" />
<ColorSwatch color="#30A46C" label="Green" />
</div>
);
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/color-swatchManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the ColorSwatch component into your components/ui/ColorSwatch.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
function ColorSwatch({
className,
color,
label,
selected,
...props
}: React.ComponentProps<"button"> & {
color: string;
label: string;
selected?: boolean;
}) {
return (
<button
type="button"
aria-label={label}
aria-pressed={selected}
data-slot="color-swatch"
className={cn(
"inline-flex size-3 items-center justify-center rounded-full border border-gray-7 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-8 aria-pressed:ring-2 aria-pressed:ring-accent-9",
className,
)}
style={{ backgroundColor: color }}
{...props}
/>
);
}
export { ColorSwatch };