Material Finish Study

Compare three surface finishes and drag a sample to inspect its angle.

Dependencies: No extra packages
Size: 52 lines
Controls: 1 controls

example.tsx

1import { MaterialFinishStudy } from "@/components/onycx/material-finish-study";23export default function Example() {4  return (5    <MaterialFinishStudy6      heading={"Material in motion"}7    />8  );9}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/material-finish-study.json

1 · Dependencies

None beyond React and Tailwind.

2 · Copy the source

components/onycx/material-finish-study.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the material-finish-study.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
heading	string	—	Heading for this example.
finishes	Finish[]	—	Named finishes with CSS gradients. Drag the sample or use the angle slider.