Pin List

Cards 108

About

Here is animated Pin List component

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

Code

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

Usage.tsx

// demo.tsx
'use client';

import * as React from 'react';
import { PinList, type PinListItem } from '@/components/ui/pin-list';
import { GitCommit, AlertTriangle, Box, KeyRound, Regex } from 'lucide-react';
import { cn } from "@/lib/utils";

const ITEMS: PinListItem[] = [
  {
    id: 1,
    name: 'Commit Zone',
    info: 'Code updates · Closes 9:00 PM',
    icon: GitCommit,
    pinned: true,
  },
  {
    id: 2,
    name: '404 Room',
    info: 'Fixing errors · Open 24 hours',
    icon: AlertTriangle,
    pinned: true,
  },
  {
    id: 3,
    name: 'NPM Stop',
    info: 'Install stuff · Closes 8:00 PM',
    icon: Box,
    pinned: false,
  },
  {
    id: 4,
    name: 'Token Lock',
    info: 'Login stuff · Open 24 hours',
    icon: KeyRound,
    pinned: false,
  },
  {
    id: 5,
    name: 'Regex Zone',
    info: 'Find words · Closes 9:00 PM',
    icon: Regex,
    pinned: false,
  },
];

const DemoOne = () => {
  return (
    <div className={cn("flex w-full min-h-screen justify-center items-start pt-10 bg-neutral-50 dark:bg-neutral-900")}>
      <PinList items={ITEMS} />
    </div>
  );
};

export default DemoOne;