About
A list of rows with an optional heading, each row carrying a leading icon or avatar, a title with description, trailing meta, and actions, with built-in link/button/plain row semantics and a 'Show more' pagination footer.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds List to your project and fits it to your theme.
Code
How List is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import List, { ListItem } from "@/components/ui/list";
const tasks = [
{
name: "Draft release notes",
line: "Summarize what shipped this week",
word: "Open",
when: "1d",
},
{
name: "Review pull request #482",
line: "Migration script for the billing table",
word: "In review",
when: "3h",
current: true,
},
{
name: "Rotate API keys",
line: "Quarterly security rotation",
word: "Scheduled",
when: "—",
},
];
export default function ListBorderedDemo() {
return (
<div
style={{
width: "100%",
maxWidth: 480,
background: "var(--ggarry-bg-surface)",
color: "var(--ggarry-text-default)",
padding: 16,
}}
>
<List
variant="bordered"
label="Tasks"
count={`${tasks.length} of ${tasks.length}`}
>
{tasks.map((task) => (
<ListItem
key={task.name}
title={task.name}
description={task.line}
onSelect={() => {}}
current={task.current}
meta={
<>
<span>{task.word}</span>
<span>{task.when}</span>
</>
}
/>
))}
</List>
</div>
);
}
More by keshon
View all
Thinking
Lanes
Key Value List
Status Dot
Spinner
Note
Split