About
A clickable list item that renders a Lens Protocol account's avatar, display name, and handle, with a loading skeleton and optional selection/checkmark state.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Account List Item to your project and fits it to your theme.
Code
How Account List Item is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import LensAccountListItem from "@/components/ui/account-list-item";
import type { Account } from "@lens-protocol/react";
const mockAccount = {
address: "0xA77f9f69Da9dafBC1ef31D1fCd79D04dF607e983",
username: { localName: "grover" },
metadata: {
name: "Me, Grover",
picture:
"https://cdn.21st.dev/assets/localized/5250a89335180d0f39c4caaebb34502cfe1dbe8a7632c70ee5c3b91bffaf8d84.jpg",
},
} as unknown as Account;
export default function AccountListItemDemo() {
return (
<div className="w-full max-w-sm border rounded-md">
<LensAccountListItem
account={mockAccount}
onAccountSelected={(account) =>
console.log("Selected account:", account)
}
showChevron={false}
/>
</div>
);
}
Dependencies
More by lensblocks
View all
Paginated List