shadcn-framerlisted
Install: claude install-skill aiskillstore/marketplace
# ShadCN + Framer Motion
## ShadCN Setup
```bash
pnpm dlx shadcn@latest init
pnpm dlx shadcn@latest add button card dialog
```
## Component Usage
```typescript
import { Button } from '@/components/ui/button';
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from '@/components/ui/card';
export function UserCard({ user }: { user: User }) {
return (
<Card>
<CardHeader>
<CardTitle>{user.name}</CardTitle>
<CardDescription>{user.email}</CardDescription>
</CardHeader>
<CardContent>
<p>{user.bio}</p>
</CardContent>
<CardFooter>
<Button>View Profile</Button>
</CardFooter>
</Card>
);
}
```
## Framer Motion Basics
```typescript
'use client';
import { motion } from 'framer-motion';
export function FadeIn({ children }: { children: React.ReactNode }) {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
{children}
</motion.div>
);
}
```
## Animated List
```typescript
'use client';
import { motion, AnimatePresence } from 'framer-motion';
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 },
},
};
const item = {
hidden: { opacity: 0, x: -20 },
show: { opacity: 1, x: 0 },
};
export function AnimatedList({ items }: { items: Item[] }) {
return (
<motion.ul variants={container} initia