API Access

Semantic UI Component API for AI-Powered Development

Authentication

x-api-key: your_api_key_here

Integration Examples

// .env
API_KEY=your_api_key_here

// app/api/components/route.ts
import { NextResponse } from 'next/server'

if (!process.env.API_KEY) {
  throw new Error('API_KEY is not defined')
}

export async function POST(req: Request) {
  const body = await req.json()
  const response = await fetch('https://21st.dev/api/search', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': process.env.API_KEY
    },
    body: JSON.stringify(body)
  })

  const data = await response.json()
  return NextResponse.json(data)
}

// app/components/search.tsx
'use client'

export async function searchComponents(query: string) {
  const res = await fetch('/api/components', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ search: query })
  })
  
  if (!res.ok) {
    throw new Error('Failed to search components')
  }
  
  return res.json()
}

Request Format

{
  "search": "hero section",  // Required: search query
  "page": 1,                // Optional: page number (default: 1)
  "per_page": 20           // Optional: results per page (default: 20)
}

Response Format

{
  "results": [{
    "name": "Default",
    "preview_url": "https://cdn.21st.dev/...",
    "video_url": "https://cdn.21st.dev/...",
    "component_data": {
      "name": "Animated hero",
      "description": "Animated hero with text and two shadcn/ui buttons",
      "code": "https://cdn.21st.dev/...",
      "install_command": "pnpm dlx shadcn@latest add "https://21st.dev/r/...""
    },
    "component_user_data": {
      "name": "serafim",
      "username": "serafimcloud", 
      "image_url": "https://img.clerk.com/..."
    },
    "usage_count": 1621
  }],
  "metadata": {
    "plan": "free",
    "requests_remaining": 80,
    "pagination": {
      "total": 45,          // Total number of results
      "page": 1,            // Current page
      "per_page": 20,       // Results per page
      "total_pages": 3      // Total number of pages
    }
  }
}