Grid

Component

About

Display elements in a grid layout.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Grid to your project and fits it to your theme.

Code

How Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Grid } from "@/components/ui/grid";

export default function DefaultDemo() {
  return (
      <div className="flex flex-col gap-2 w-3/4">
        <Grid.System debug guideWidth={1} unstable_useContainer>
          <Grid columns={5} height="preserve-aspect-ratio" rows={2} />
        </Grid.System>
      </div>
  );
}