21st-dev-componentslisted
Install: claude install-skill aakash1552005/universal-agent-skills
# 21st.dev & Magic UI Component Engineering
Integrate cutting-edge, award-winning UI components, animated effects, glassmorphism headers, particle backgrounds, interactive bento grids, and micro-interactions from 21st.dev and Magic UI.
## When to Use This Skill
- Building interactive landing pages, dashboards, SaaS applications, and portfolio sites.
- Implementing Framer Motion animations, Tailwind CSS dynamic utilities, and modern React components.
- Adding high-conversion interactive elements (e.g., Animated Beam, Orbiting Circles, Globe, Marquee, Text Reveal, Border Beam).
## Core Integration Patterns
### 1. Magic UI CLI Installation
```bash
# Add components via shadcn/ui or 21st.dev CLI
npx 21st install <component-name>
# or Magic UI components
npx shadcn@latest add "https://magicui.design/r/<component-name>"
```
### 2. Animated Border Beam (CSS/Tailwind)
```tsx
export const BorderBeam = ({
className,
size = 200,
duration = 15,
anchor = 90,
borderWidth = 1.5,
colorFrom = "#ffaa40",
colorTo = "#9c40ff",
delay = 0,
}: {
className?: string;
size?: number;
duration?: number;
anchor?: number;
borderWidth?: number;
colorFrom?: string;
colorTo?: string;
delay?: number;
}) => {
return (
<div
style={
{
"--size": size,
"--duration": duration,
"--anchor": anchor,
"--border-width": borderWidth,
"--color-from": colorFrom,
"--color-to": colorTo,
"--delay": `-${