Components
Loading preview...
Here is animated Pin List component
@animate-ui
npx shadcn@latest add https://21st.dev/r/skyleen77/pin-list// 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;