Highlight Grid | Vengeance UI

Installation

Run the following command

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/highlight-grid.json

Usage

code

1import { HighlightGrid } from "@/components/ui/highlight-grid"
2
3export function HighlightGridDemo() {
4  return (
5    <HighlightGrid
6      rows={[
7        [{ label: "html" }, { label: "css" }, { label: "javascript" }],
8        [{ label: "react" }, { label: "next.js" }, { label: "three.js" }],
9      ]}
10    />
11  )
12}

Props

Prop Name	Type	Default	Description
rows	`HighlightItem[][]`	`Sample set`	Rows of cells; each row can hold a different number of { label, color? } cells. Labels render wrapped in parentheses.
colors	`string[]`	`8-colour palette`	Palette cycled for cells without an explicit color.
transitionDuration	`number`	`250`	Highlight transition duration in ms.
highlightFirst	`boolean`	`true`	Park the highlight on the first cell on mount.
className	`string`	`-`	Additional classes for the root element.