About
A clickable list row for presenting a tool, resource, or action item with an icon or letter tile, a title, optional meta text, and a trailing action label.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tool Row to your project and fits it to your theme.
Code
How Tool Row is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { ToolRow } from "@/components/ui/tool-row";
export default function ToolRowSurfaceVariants() {
return (
<div
className="w-full max-w-md mx-auto flex flex-col gap-3 p-4"
style={{ backgroundColor: "var(--color-paper)" }}
>
<ToolRow
surface="light"
tile="S"
title="Search files"
meta="Find anything in seconds"
action="Open"
/>
<ToolRow
surface="selected"
tile="I"
title="Image converter"
meta="Currently selected"
action="Open"
actionAccent
/>
<ToolRow
surface="dark"
tile="C"
title="Code formatter"
meta="Runs on save"
action="Configure"
/>
<ToolRow
surface="gap"
tile="+"
title="Add a tool"
meta="Drag a tool here to pin it"
action="Browse"
/>
<ToolRow
surface="transparent"
tile="N"
title="Notes"
meta="Last edited 2 minutes ago"
action="View"
/>
</div>
);
}
More by enoughtools
View all
Conversation Bubble
Sidebar
Group Label
Chart
Callout