### shadcn CLI Block Installation Examples

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/install-blocks.md

Examples demonstrating how to add blocks using the shadcn CLI by referencing their JSON URLs.

```bash
npx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json
```

```bash
npx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json
```

--------------------------------

### Example Usage: Set API Key and Install Component

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/docs/private-registry.md

Demonstrates setting the API key as an environment variable and then installing a private component using the CLI. Also shows how to download directly with curl.

```bash
# Set your API key
export API_KEY=your_api_key_here

# Install a private component
npx @creative-tim/ui@latest add testimonials-03

# Or use curl to download directly
curl -H "Authorization: Bearer $API_KEY" \
  https://ui.creative-tim.com/r/testimonials-03.json -o testimonials-03.json
```

--------------------------------

### Creative Tim CLI Block Installation Examples

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/install-blocks.md

Examples demonstrating how to add various blocks using the Creative Tim CLI.

```bash
npx @creative-tim/ui@latest add hero-01
```

```bash
npx @creative-tim/ui@latest add ai-agent-activity-01
```

```bash
npx @creative-tim/ui@latest add agent-management-list-01
```

```bash
npx @creative-tim/ui@latest add pricing-01
```

```bash
npx @creative-tim/ui@latest add testimonials-03
```

--------------------------------

### Creative Tim CLI Add Examples

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Examples of adding various blocks using the Creative Tim CLI.

```bash
npx @creative-tim/ui@latest add hero-01
npx @creative-tim/ui@latest add ai-agent-activity-01
npx @creative-tim/ui@latest add agent-management-list-01
npx @creative-tim/ui@latest add pricing-01
```

--------------------------------

### Install Dependencies

Source: https://github.com/creativetimofficial/ui/blob/main/CONTRIBUTING.md

Install all project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Add Specific UI Blocks (Examples)

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/SKILL.md

Examples demonstrating how to add predefined blocks like 'hero-01', 'ai-agent-activity-01', and 'agent-management-list-01' using the Creative Tim CLI.

```bash
npx @creative-tim/ui@latest add hero-01
```

```bash
npx @creative-tim/ui@latest add ai-agent-activity-01
```

```bash
npx @creative-tim/ui@latest add agent-management-list-01
```

--------------------------------

### shadcn CLI Add Examples

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Examples of adding Creative Tim blocks using the shadcn CLI with their respective JSON URLs.

```bash
npx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json
npx shadcn@latest add https://www.creative-tim.com/ui/r/testimonials-03.json
```

--------------------------------

### Run UI Website

Source: https://github.com/creativetimofficial/ui/blob/main/CONTRIBUTING.md

Start the development server for the main UI website.

```bash
pnpm dev
```

--------------------------------

### Install All Components using shadcn CLI

Source: https://github.com/creativetimofficial/ui/blob/main/README.md

An alternative method to install all Creative Tim UI components using the standard shadcn/ui CLI.

```bash
npx shadcn@latest add https://creative-tim.com/ui/r/all.json
```

--------------------------------

### Install All Creative Tim UI Components with npx

Source: https://github.com/creativetimofficial/ui/blob/main/README.md

Installs all available Creative Tim UI components at once. This command also sets up shadcn/ui if it's not already configured and adds necessary dependencies.

```bash
npx @creative-tim/ui@latest add all
```

--------------------------------

### Install Component using Creative Tim UI CLI

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/(root)/index.mdx

Use this command to add a specific component to your project via the Creative Tim UI CLI. For example, to add a button component, run `npx @creative-tim/ui@latest add button`.

```bash
npx @creative-tim/ui@latest add <component>
```

```bash
npx @creative-tim/ui@latest add button
```

--------------------------------

### Install Creative Tim UI Skill Locally

Source: https://github.com/creativetimofficial/ui/blob/main/skills/README.md

Use this command to install the Creative Tim UI skill for your current project.

```bash
npx skills add creativetimofficial/ui
```

--------------------------------

### Form Card Example Integration

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/(root)/how-it-works.mdx

Demonstrates how to import and use a form card component with inputs within your React application. Ensure the component is installed before importing.

```jsx
import React from "react";

// Components
import Card from "examples/cards/Card";
import FormField from "examples/forms/FormField";
import SoftButton from "examples/buttons/SoftButton";

function FormCardExample() {
  return (
    <Card>
      <div className="p-4">
        <h5 className="mb-0">Sign Up</h5>
        <p className="text-sm mb-0">Enter your details below to create your account.</p>
        <form>
          <FormField type="text" label="Name" placeholder="e.g. John Doe" />
          <FormField type="email" label="Email Address" placeholder="you@example.com" />
          <FormField type="password" label="Password" placeholder="Must be at least 8 characters" />
          <div className="text-center">
            <SoftButton variant="gradient" color="dark" fullWidth> 
              Sign Up
            </SoftButton>
          </div>
        </form>
      </div>
    </Card>
  );
}

export default FormCardExample;
```

--------------------------------

### Install Creative Tim UI Skill Globally

Source: https://github.com/creativetimofficial/ui/blob/main/skills/README.md

Install the Creative Tim UI skill globally to make it available in all your projects.

```bash
npx skills add creativetimofficial/ui -g
```

--------------------------------

### Install Private Component using CLI

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/docs/private-registry.md

Install private components after setting up your API key via environment variables. This command uses the npx package manager.

```bash
npx @creative-tim/ui@latest add testimonials-03
```

--------------------------------

### Install Dependencies for Software Purchase Card

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/software-purchase-card.mdx

Install the lucide-react dependency manually before integrating the software purchase card component.

```bash
npm install lucide-react
```

--------------------------------

### Registry Installation Endpoints

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/(root)/registry.mdx

These endpoints are used by the CLI to fetch component metadata for installation. They return structured JSON data.

```bash
# Base UI Components
/r/button.json
/r/card.json
/r/avatar.json

# Custom Blocks
/r/testimonials-09.json
```

--------------------------------

### Install UI Component with CLI

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/(root)/debug-logs.mdx

Use this command to add a UI component to your project. Ensure you are in the project root directory.

```bash
npx @creative-tim/ui@latest add card
```

--------------------------------

### Commit Message Convention Example

Source: https://github.com/creativetimofficial/ui/blob/main/CONTRIBUTING.md

Example of a commit message following the conventional commit format.

```bash
feat(components): add new prop to the avatar component
```

--------------------------------

### Install Button Component with Creative Tim CLI

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/(root)/components.mdx

Use this command to install the button component directly using the Creative Tim UI CLI. Ensure Node.js and a Next.js project are set up.

```bash
npx @creative-tim/ui@latest add button
```

--------------------------------

### Run Workspace

Source: https://github.com/creativetimofficial/ui/blob/main/CONTRIBUTING.md

Start the development server for a specific workspace using pnpm. Replace `[WORKSPACE]` with the target workspace name.

```bash
pnpm --filter=[WORKSPACE] dev
```

--------------------------------

### Install Button Component with shadcn/ui CLI

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/(root)/components.mdx

Use this command to install the button component via the shadcn/ui CLI, pointing to the Creative Tim UI component JSON. This is useful if you already use shadcn/ui.

```bash
npx shadcn@latest add https://creative-tim.com/ui/r/button.json
```

--------------------------------

### Install Component using shadcn CLI

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/(root)/index.mdx

Alternatively, you can use the standard shadcn CLI to add components from the Creative Tim UI registry. This command points to the component's JSON definition.

```bash
npx shadcn@latest add https://creative-tim.com/ui/r/<component>.json
```

--------------------------------

### Install Creative Tim UI Skill for a Specific Agent

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/SKILL.md

Install the Creative Tim UI skill for a specific agent only, such as 'claude-code'.

```bash
npx skills add creativetimofficial/ui --agent claude-code
```

--------------------------------

### Install Creative Tim UI Component with npx

Source: https://github.com/creativetimofficial/ui/blob/main/README.md

Use this command to add components directly to your project. It's recommended for ease of use.

```bash
npx @creative-tim/ui@latest add <component-name>
```

--------------------------------

### Install Creative Tim UI Skill via CLI

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/SKILL.md

Use this command to install the Creative Tim UI skill directly from its GitHub repository into your Claude Code project.

```bash
claude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui
```

--------------------------------

### Install PRO Block with Explicit API Key

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/pro-api-key.md

Alternatively, you can pass the API key explicitly as a command-line argument when adding a PRO block.

```bash
npx @creative-tim/ui@latest add <pro-block-name> --api-key $CREATIVE_TIM_UI_API_KEY
```

--------------------------------

### Install Creative Tim UI Skill for Specific Agent

Source: https://github.com/creativetimofficial/ui/blob/main/skills/README.md

Install the Creative Tim UI skill for a particular AI agent like Claude Code or Cursor.

```bash
npx skills add creativetimofficial/ui --agent claude-code
```

```bash
npx skills add creativetimofficial/ui --agent cursor
```

--------------------------------

### Install Software Purchase Card via CLI

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/software-purchase-card.mdx

Use this command to add the software purchase card component to your project using the shadcn CLI.

```bash
npx shadcn@latest add software-purchase-card
```

--------------------------------

### Install PRO Block using Environment Variable

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/pro-api-key.md

After setting the API key via an environment variable, use this command to add a PRO block. The CLI automatically detects the environment variable.

```bash
npx @creative-tim/ui@latest add <pro-block-name>
```

--------------------------------

### Alternative Creative Tim CLI Commands

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/install-blocks.md

These are alternative named binaries for adding blocks once the package is installed globally.

```bash
npx creative-tim-ui add <block-name>
```

```bash
npx creative-tim add <block-name>
```

--------------------------------

### Software Purchase Card with Flat Rate Pricing

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/software-purchase-card.mdx

Example of using the SoftwarePurchaseCard component for a flat-rate pricing model.

```tsx
<SoftwarePurchaseCard
  softwareName="Design Tools Pro"
  startDate="2025-02-01"
  seats={25}
  pricingType="flat-rate"
  price="$999"
  onApprove={handleApprove}
  onDiscard={handleDiscard}
/>

```

--------------------------------

### Install Creative Tim UI Skill Manually

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/SKILL.md

Manually copy or symlink the Creative Tim UI skill directory into your project's .claude/skills directory for integration with Claude Code.

```bash
# Clone or copy the skills directory into your project
cp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui
```

--------------------------------

### Blog Post Card Example

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/card.mdx

A card designed for blog post previews, including an image, title, excerpt, and metadata.

```tsx
<Card className="overflow-hidden">
  <img
    src="/blog-image.jpg"
    alt="Blog post"
    className="h-48 w-full object-cover"
  />
  <CardHeader>
    <div className="text-muted-foreground flex items-center gap-2 text-sm">
      <Calendar className="h-4 w-4" />
      <span>March 15, 2025</span>
      <span>•</span>
      <span>5 min read</span>
    </div>
    <CardTitle>Getting Started with Next.js</CardTitle>
    <CardDescription>
      Learn how to build modern web applications with Next.js, React, and
      TypeScript.
    </CardDescription>
  </CardHeader>
  <CardFooter>
    <Button variant="ghost">Read More</Button>
  </CardFooter>
</Card>

```

--------------------------------

### Card with Header and Footer Example

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/card.mdx

A card featuring a title, description, and a call-to-action button.

```tsx
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>
      This is a brief description of the card content.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <p>More detailed information goes here in the card content area.</p>
  </CardContent>
  <CardFooter>
    <Button>Learn More</Button>
  </CardFooter>
</Card>

```

--------------------------------

### E-commerce Product Card Example

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/card.mdx

A card for e-commerce product listings, featuring an image, pricing, and add-to-cart functionality.

```tsx
<Card className="overflow-hidden">
  <div className="relative">
    <img
      src="/product-image.jpg"
      alt="Product"
      className="h-64 w-full object-cover"
    />
    <Badge className="absolute top-2 right-2">New</Badge>
  </div>
  <CardHeader>
    <CardTitle>Premium Wireless Headphones</CardTitle>
    <CardDescription>
      High-quality audio with active noise cancellation
    </CardDescription>
  </CardHeader>
  <CardContent>
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-1">
        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
        <Star className="h-4 w-4" />
        <span className="text-muted-foreground text-sm">(128)</span>
      </div>
      <div className="text-2xl font-bold">$299</div>
    </div>
  </CardContent>
  <CardFooter className="gap-2">
    <Button className="flex-1">
      <ShoppingCart className="mr-2 h-4 w-4" />
      Add to Cart
    </Button>
    <Button variant="outline" size="icon">
      <Heart className="h-4 w-4" />
    </Button>
  </CardFooter>
</Card>

```

--------------------------------

### Plain Card Example

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/card.mdx

A simple card displaying basic information.

```tsx
<Card>
  <CardContent className="pt-6">
    <p>
      This is a plain card with simple content. Perfect for displaying basic
      information.
    </p>
  </CardContent>
</Card>

```

--------------------------------

### Configure shadcn CLI for Private Registry

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/docs/private-registry.md

Configure the shadcn CLI's components.json file to use the Creative Tim UI private registry. This setup includes the registry URL and authentication headers.

```json
{
  "registries": {
    "@creative-tim": {
      "url": "https://ui.creative-tim.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${API_KEY}"
      }
    }
  }
}
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/creativetimofficial/ui/blob/main/CONTRIBUTING.md

Change your current directory to the cloned UI project.

```bash
cd ui
```

--------------------------------

### Initialize New Project with Creative Tim CLI

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/install-blocks.md

Use this command to initialize a new project with Creative Tim UI.

```bash
npx @creative-tim/ui@latest init
```

--------------------------------

### Add UI Block using Alternative Binary

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/SKILL.md

Demonstrates using the named binaries 'creative-tim-ui' or 'creative-tim' for adding blocks, providing an alternative to the npx command.

```bash
npx creative-tim-ui add hero-01
```

```bash
npx creative-tim add hero-01
```

--------------------------------

### Clone Repository

Source: https://github.com/creativetimofficial/ui/blob/main/CONTRIBUTING.md

Clone the UI repository to your local machine to begin development.

```bash
git clone https://github.com/creative-tim/ui.git
```

--------------------------------

### SoftwarePurchaseCard with State Management

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/software-purchase-card.mdx

Demonstrates how to use the SoftwarePurchaseCard with local component state to manage approval and discard actions. Requires `useState` hook.

```tsx
function PurchaseApproval() {
  const [status, setStatus] = useState<"pending" | "approved" | "discarded">
    ("pending")

  const handleApprove = () => {
    setStatus("approved")
    // API call to approve purchase
    approvePurchase(purchaseId)
  }

  const handleDiscard = () => {
    setStatus("discarded")
    // API call to discard purchase
    discardPurchase(purchaseId)
  }

  return (
    <SoftwarePurchaseCard
      softwareName="Marketing Automation Suite"
      startDate="2025-03-01"
      seats={75}
      pricingType="per-seat"
      price="$3,750"
      onApprove={handleApprove}
      onDiscard={handleDiscard}
    />
  )
}
```

--------------------------------

### SoftwarePurchaseCard with Loading State

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/software-purchase-card.mdx

Shows how to integrate a loading state into the SoftwarePurchaseCard for asynchronous actions like purchase approval. Uses `useState` and `async/await` for handling loading and errors.

```tsx
function PurchaseApprovalWithLoading() {
  const [loading, setLoading] = useState(false)

  const handleApprove = async () => {
    setLoading(true)
    try {
      await approvePurchaseRequest()
      toast.success("Purchase approved successfully")
    } catch (error) {
      toast.error("Failed to approve purchase")
    } finally {
      setLoading(false)
    }
  }

  return (
    <SoftwarePurchaseCard
      softwareName="Analytics Platform"
      startDate="2025-02-15"
      seats={100}
      pricingType="flat-rate"
      price="$5,000"
      onApprove={handleApprove}
      onDiscard={() => {}}
    />
  )
}
```

--------------------------------

### Download Private Component using Query Parameter

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/docs/private-registry.md

Pass your API key as a token query parameter in the URL to download a private component. This method is suitable for direct downloads.

```bash
curl https://ui.creative-tim.com/r/testimonials-03.json?token=your_api_key
```

--------------------------------

### Creative Tim CLI Aliases

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Demonstrates equivalent commands for adding a block using different aliases of the Creative Tim CLI.

```bash
npx @creative-tim/ui@latest add hero-01
npx creative-tim-ui add hero-01
npx creative-tim add hero-01
```

--------------------------------

### Implementing the 95% Rule in UI Components

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/brand-philosophy.md

Illustrates the '95% Rule' by contrasting an overly complex, hypothetical solution with a direct and simple implementation for a common UI element. Use the 'RIGHT' approach for clarity and maintainability.

```tsx
// WRONG — solves a hypothetical future problem
<DataTable
  columns={columns}
  data={data}
  sortable
  filterable
  paginated
  exportable
  selectable
  onRowClick={handleRowClick}
  onSelectionChange={handleSelection}
  renderCustomCell={(cell) => <CustomCell {...cell} />}
/>

// RIGHT — solves the actual problem in front of you
<Table>
  <TableHeader>...</TableHeader>
  <TableBody>
    {items.map((item) => (
      <TableRow key={item.id}>
        <TableCell>{item.name}</TableCell>
        <TableCell>{item.status}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>
```

--------------------------------

### Login with Creative Tim CLI using API Key

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/SKILL.md

Set your API key globally for the Creative Tim CLI by logging in.

```bash
npx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx
```

--------------------------------

### Set API Key in .env.local

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/docs/private-registry.md

Store your API key in the .env.local file for environment variable authentication. This is the recommended method.

```bash
API_KEY=your_api_key_here
```

--------------------------------

### Correct Usage of Primary Accent Color (Orange)

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/design-brand.md

Use orange for primary accents, interactive elements, CTAs, and logo marks. Examples include app icons, avatar fallbacks, type badges, and active navigation item accents.

```tsx
// Logo / app icon
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-orange-600">
  <Bot className="h-4 w-4 text-white" />
</div>

// Avatar fallback
<AvatarFallback className="bg-orange-100 text-orange-700">JD</AvatarFallback>

// Type badge
<Badge className="bg-orange-50 text-orange-700 border-orange-200">OpenClaw</Badge>

// Active nav item accent
<span className="h-1 w-5 rounded-full bg-orange-500" />
```

--------------------------------

### Set Creative Tim UI API Key in .env.local

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/SKILL.md

Add your Creative Tim API key to your local environment file to enable PRO block usage.

```bash
# .env.local
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx
```

--------------------------------

### Download Private Component using X-API-Key Header

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/docs/private-registry.md

Use curl with the X-API-Key header to download a private component. This method uses a custom header for API key authentication.

```bash
curl -H "X-API-Key: your_api_key" \
  https://ui.creative-tim.com/r/testimonials-03.json
```

--------------------------------

### Add PRO Block using shadcn CLI

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/pro-api-key.md

This command uses the shadcn CLI to add a PRO block, leveraging the `components.json` configuration for authentication.

```bash
npx shadcn@latest add https://www.creative-tim.com/ui/r/<pro-block>.json
```

--------------------------------

### Use useEffect for live date values

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/SKILL.md

Initialize state with static values and update them within `useEffect` to handle hydration safely.

```javascript
// Correct usage
const [time, setTime] = useState('Loading...');

useEffect(() => {
  setTime(new Date().toLocaleTimeString());
}, []);
```

--------------------------------

### Add PRO Block using Creative Tim CLI

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/SKILL.md

Use the Creative Tim CLI to add a PRO block to your project, passing your API key.

```bash
# Creative Tim CLI
npx @creative-tim/ui@latest add pro-block-name --api-key $CREATIVE_TIM_UI_API_KEY
```

--------------------------------

### Software Purchase Card with Usage-Based Pricing

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/software-purchase-card.mdx

Illustrates how to use the SoftwarePurchaseCard component for usage-based pricing.

```tsx
<SoftwarePurchaseCard
  softwareName="API Gateway Service"
  startDate="2025-01-20"
  seats={10}
  pricingType="usage-based"
  price="$0.05/request"
  onApprove={handleApprove}
  onDiscard={handleDiscard}
/>

```

--------------------------------

### Sidebar Navigation Implementation

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Implement a standard sidebar with a fixed width (`w-64`), background, and border. The navigation items are mapped from an array and styled based on their active state.

```tsx
<aside className="bg-muted/30 flex h-full w-64 flex-col border-r">
  {/* logo row */}
  <div className="flex items-center gap-2.5 border-b px-5 py-4">
    <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-orange-600">
      <Bot className="h-4 w-4 text-white" />
    </div>
    <span className="text-sm font-semibold">App Name</span>
  </div>
  {/* nav */}
  <nav className="flex-1 space-y-0.5 p-3">
    {NAV_ITEMS.map((item) => (
      <button
        key={item.label}
        className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors ${item.active
            ? "bg-background text-foreground shadow-sm"
            : "text-muted-foreground hover:bg-background/60 hover:text-foreground"
        }`}
      >
        <item.icon className="h-4 w-4" />
        {item.label}
      </button>
    ))}
  </nav>
</aside>
```

--------------------------------

### Download Private Component using Authorization Header

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/docs/private-registry.md

Use curl with the Authorization header to download a private component. This method requires your API key to be passed as a Bearer token.

```bash
curl -H "Authorization: Bearer your_api_key" \
  https://ui.creative-tim.com/r/testimonials-03.json
```

--------------------------------

### Reimplementing vs. Extending Button Component

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/brand-philosophy.md

Demonstrates the wrong approach of reimplementing existing components and the right approach of extending them using shadcn/ui's Button component.

```tsx
// WRONG — reimplementing what shadcn already solved
function CustomButton({ variant, children }) {
  const styles = variant === 'primary' ? 'bg-orange-500 text-white' : 'bg-gray-100'
  return <button className={styles}>{children}</button>
}

// RIGHT — extend the foundation
import { Button } from "@/registry/creative-tim/ui/button"
<Button variant="default">Save changes</Button>
```

--------------------------------

### Import Card Components

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/card.mdx

Import all necessary components for using cards in your project.

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

```

--------------------------------

### Update Component Registry

Source: https://github.com/creativetimofficial/ui/blob/main/CONTRIBUTING.md

Run this command after adding or modifying components to update the registry.

```bash
pnpm build:registry
```

--------------------------------

### Create New Branch

Source: https://github.com/creativetimofficial/ui/blob/main/CONTRIBUTING.md

Create a new branch for your feature or bug fix.

```bash
git checkout -b my-new-branch
```

--------------------------------

### Set API Key in .env.local

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/pro-api-key.md

Add this line to your .env.local file for Next.js or Vite projects. Ensure this file is never committed to version control.

```dotenv
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx
```

--------------------------------

### Use Semantic Width Utilities

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Employ semantic width utilities like `max-w-sm` or `w-64` to define element dimensions, aligning with common layout patterns and the Tailwind scale.

```tsx
// CORRECT
<div className="max-w-sm">    // 384px
<div className="max-w-md">    // 448px
<div className="max-w-lg">    // 512px
<div className="max-w-xl">    // 576px
<div className="max-w-2xl">   // 672px
<div className="w-64">        // sidebar = 256px
<div className="w-72">        // kanban column = 288px
```

--------------------------------

### Add Block using Creative Tim CLI

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/install-blocks.md

Use this command to add a specific block and its dependencies. Replace `<block-name>` with the desired block.

```bash
npx @creative-tim/ui@latest add <block-name>
```

--------------------------------

### Basic Card Structure

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Use Card, CardHeader, and CardContent for grouping content within a card. Ensure proper import of components.

```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Section Title</CardTitle>
  </CardHeader>
  <CardContent>
    {/* content */}
  </CardContent>
</Card>
```

--------------------------------

### Importing UI Components within Blocks

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Use the registry alias `@` for importing UI components within your blocks, rather than relative paths. This ensures consistency and proper resolution.

```tsx
import { Button } from "@/registry/creative-tim/ui/button"
import { Card, CardContent } from "@/registry/creative-tim/ui/card"
```

--------------------------------

### Configure components.json for API Key

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/pro-api-key.md

Add this `registries` entry to your `components.json` file to configure the Creative Tim registry with your API key. This method is recommended for teams and CI/CD.

```json
{
  "registries": {
    "@creative-tim": {
      "url": "https://www.creative-tim.com/ui/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${CREATIVE_TIM_UI_API_KEY}"
      }
    }
  }
}
```

--------------------------------

### Simplify Component Structure in React

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/brand-philosophy.md

Demonstrates the principle of keeping component structures as flat as possible by removing unnecessary wrappers. Use this pattern to avoid cognitive and technical overhead.

```tsx
// WRONG — wrapping for the sake of wrapping
<SectionWrapper>
  <ContentContainer>
    <InnerContent>
      <Card>...</Card>
    </InnerContent>
  </ContentContainer>
</SectionWrapper>

// RIGHT — as flat as the problem allows
<Card>...</Card>
```

--------------------------------

### Basic Software Purchase Card Usage

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/software-purchase-card.mdx

Demonstrates the basic usage of the SoftwarePurchaseCard component with per-seat pricing.

```tsx
<SoftwarePurchaseCard
  softwareName="Enterprise Cloud Suite"
  startDate="2025-01-15"
  seats={50}
  pricingType="per-seat"
  price="$2,500"
  onApprove={() => console.log("Approved")}
  onDiscard={() => console.log("Discarded")}
/>

```

--------------------------------

### Import Software Purchase Card Component

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/software-purchase-card.mdx

Import the SoftwarePurchaseCard component into your project files to use it.

```tsx
import { SoftwarePurchaseCard } from "@/components/cards/software-purchase"

```

--------------------------------

### Environment Variable for API Key

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Set your Creative Tim API key in the .env.local file. This file should not be committed to version control.

```bash
# .env.local (never commit this)
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx
```

--------------------------------

### SoftwarePurchaseCard in a List

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/software-purchase-card.mdx

Illustrates rendering multiple SoftwarePurchaseCard components within a list, typically for displaying multiple purchase requests. Uses `map` function to iterate over an array of request data.

```tsx
function PurchaseRequestList() {
  const requests = [
    {
      id: 1,
      softwareName: "CRM Software",
      startDate: "2025-01-15",
      seats: 50,
      pricingType: "per-seat" as const,
      price: "$2,500",
    },
    {
      id: 2,
      softwareName: "Project Management Tool",
      startDate: "2025-02-01",
      seats: 30,
      pricingType: "flat-rate" as const,
      price: "$999",
    },
  ]

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {requests.map((request) => (
        <SoftwarePurchaseCard
          key={request.id}
          {...request}
          onApprove={() => handleApprove(request.id)}
          onDiscard={() => handleDiscard(request.id)}
        />
      ))}
    </div>
  )
}
```

--------------------------------

### Set API Key Inline (One-off Command)

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/pro-api-key.md

Use this command to set the API key for a single command execution. Useful for one-off tasks.

```bash
CREATIVE_TIM_UI_API_KEY=pk_live_your_key npx @creative-tim/ui@latest add <block>
```

--------------------------------

### Add Block using shadcn CLI

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/install-blocks.md

Use this command to add a block by providing its JSON URL to the shadcn CLI. Replace `<block-name>` with the desired block.

```bash
npx shadcn@latest add https://www.creative-tim.com/ui/r/<block-name>.json
```

--------------------------------

### Sidebar Navigation Layout

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/component-patterns.md

Implement sidebar navigation with a fixed width (`w-64`), muted background (`bg-muted/30`), and a right border (`border-r`). Includes a header with an app name and a navigation menu.

```tsx
<aside className="bg-muted/30 flex h-full w-64 flex-col border-r">
  <div className="flex items-center gap-2.5 border-b px-5 py-4">
    <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-orange-600">
      <Bot className="h-4 w-4 text-white" />
    </div>
    <span className="text-sm font-semibold">App Name</span>
  </div>
  <nav className="flex-1 space-y-0.5 p-3">
    {NAV_ITEMS.map((item) => (
      <button
        key={item.label}
        className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors ${item.active
            ? "bg-background text-foreground shadow-sm"
            : "text-muted-foreground hover:bg-background/60 hover:text-foreground"}`}
      >
        <item.icon className="h-4 w-4" />
        {item.label}
      </button>
    ))}
  </nav>
</aside>
```

--------------------------------

### Set API Key via Environment Variable (macOS/Linux)

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/pro-api-key.md

Use this command to set the API key for your current shell session on macOS or Linux. This is recommended for development.

```bash
# macOS/Linux
export CREATIVE_TIM_UI_API_KEY=pk_live_your_key
```

--------------------------------

### Use Responsive Breakpoints Correctly

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Apply responsive design using Tailwind's predefined breakpoints (e.g., `md:`, `lg:`). Avoid custom media queries within class names.

```tsx
// CORRECT
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

// WRONG — custom media query
<div className="[@media(min-width:640px)]:grid-cols-2">
```

--------------------------------

### Basic Card Structure

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/component-patterns.md

Use this pattern for standard content grouping. It requires Card, CardHeader, CardContent, and CardTitle components.

```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle className="text-sm font-medium">Section Title</CardTitle>
  </CardHeader>
  <CardContent>
    {/* content */}
  </CardContent>
</Card>
```

--------------------------------

### Use text-sm for Readable Body Content

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Apply the `text-sm` class to all body text that users are expected to read for optimal readability. This includes names, descriptions, and timestamps.

```tsx
// CORRECT
<TableCell className="text-sm font-medium">{agent.name}</TableCell>
<p className="text-sm text-muted-foreground">{description}</p>
<span className="text-sm">{agent.lastActive}</span>
```

```tsx
// WRONG — text-xs for readable body content is too small
<TableCell className="text-xs">{agent.name}</TableCell>
<p className="text-xs text-muted-foreground">{description}</p>
```

--------------------------------

### Rebuilding the Registry

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Command to rebuild the UI registry after adding new blocks. This process regenerates essential JSON files and index files used by the system.

```bash
pnpm --filter www registry:build
```

--------------------------------

### Testimonials Block Integration

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/(root)/how-it-works.mdx

Showcases the integration of a pre-built testimonial block, combining multiple components for displaying customer stories. This block features rich typography and layout elements.

```jsx
import React from "react";

// Components
import Card from "examples/cards/Card";
import SoftAvatar from "examples/avatars/SoftAvatar";
import SoftTypography from "examples/SoftTypography";
import SoftButton from "examples/buttons/SoftButton";

function TestimonialsBlock() {
  return (
    <Card className="p-4">
      <div className="text-center">
        <SoftTypography variant="h5" color="dark" fontWeight="bold">
          What our users say
        </SoftTypography>
        <SoftTypography variant="body2" color="secondary" className="mb-4">
          Discover how our clients are leveraging our services to achieve their goals.
        </SoftTypography>
        <SoftAvatar
          alt="User Avatar"
          src="https://demos.creative-tim.com/soft-ui-dashboard-react/static/media/team-1.3e574517.jpg"
          size="xl"
          className="mx-auto mb-2"
        />
        <SoftTypography variant="h6" color="dark" fontWeight="medium">
          Alice Smith
        </SoftTypography>
        <SoftTypography variant="caption" color="secondary">
          CEO at Example Corp
        </SoftTypography>
        <blockquote className="mt-4">
          <SoftTypography variant="body1" color="secondary">
            "This is an amazing product! It has transformed our workflow and boosted our productivity. Highly recommended!"
          </SoftTypography>
        </blockquote>
        <SoftButton variant="outlined" color="info" size="sm" className="mt-4">
          Read More
        </SoftButton>
      </div>
    </Card>
  );
}

export default TestimonialsBlock;
```

--------------------------------

### Avoid Inline Styles

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Prefer using utility classes for styling over inline styles. This promotes consistency and maintainability.

```tsx
// WRONG
<div style={{ color: '#ff6b35', padding: '16px' }}>

// CORRECT
<div className="text-orange-500 p-4">
```

--------------------------------

### Registry Entry Configuration

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Defines a new UI block within the registry. Ensure `registryDependencies` uses short names and specify file paths for the component and its page wrapper.

```typescript
{
  name: "my-block-01",
  type: "registry:block",
  categories: ["my-category"],
  meta: {
    isFree: true,
    label: "My Block",
    createdAt: "2026-03-14",
  },
  registryDependencies: ["button", "card", "badge"],  // SHORT NAMES ONLY
  files: [
    {
      path: "registry/creative-tim/blocks/my-block-01.tsx",
      type: "registry:component",
    },
    {
      path: "registry/creative-tim/blocks/my-block-01/page.tsx",
      type: "registry:page",
      target: "app/blocks/my-block-01/page.tsx",
    },
  ],
}
```

--------------------------------

### Badge Variants and Styling

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Demonstrates styling for status badges with a dot indicator and type badges using the `Badge` component. Ensure correct class names for background, text, and border colors.

```tsx
// Status badge (with dot)
<div className="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium bg-emerald-50 text-emerald-700 border-emerald-200">
  <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
  Active
</div>

// Type badge
<Badge variant="outline" className="text-xs font-medium bg-orange-50 text-orange-700 border-orange-200">
  OpenClaw
</Badge>
```

--------------------------------

### Page Wrapper for UI Blocks

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

A simple page wrapper component that renders a specific UI block. This is part of the standard file structure for new blocks.

```tsx
import BlockName from "@/registry/creative-tim/blocks/<name>"
export default function Page() {
  return <BlockName />
}
```

--------------------------------

### Use Semantic Tailwind Utilities

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/tailwind-rules.md

Shows the correct way to use semantic utility classes in Tailwind CSS for dimensions, spacing, and responsive design. This ensures consistency with the project's predefined scales.

```tsx
<div className="h-96 w-72 max-w-sm">          // h-96=384px, w-72=288px
<div className="gap-3.5 p-4 text-xs">          // gap-3.5=14px, p-4=16px
<div className="sm:grid-cols-2">
```

--------------------------------

### Configure TypeScript Path Mapping

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/(root)/debug-logs.mdx

Ensure your tsconfig.json includes the correct path mapping for the '@/' alias. This is crucial for resolving module import errors.

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

--------------------------------

### Table Action Button

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/component-patterns.md

Use small ghost buttons (`variant="ghost"`, `size="sm"`) for row-level actions within tables. This keeps the UI clean and actions accessible.

```tsx
<Button variant="ghost" size="sm" className="h-6 px-2 text-xs">
  <Eye className="mr-1 h-3 w-3" />
  View
</Button>
```

--------------------------------

### CardDescription Component

Source: https://github.com/creativetimofficial/ui/blob/main/apps/www/content/docs/components/card.mdx

Component for displaying descriptive text within the card. It accepts additional CSS classes and React nodes for the description.

```APIDOC
## CardDescription

### Description
The card description component.

### Props
#### Parameters
- **className** (string) - Optional - Additional CSS classes
- **children** (ReactNode) - Optional - Description text
```

--------------------------------

### Corrected useState Initialization for Dates

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/AGENTS.md

Use static strings for initial server-side rendering (SSR) state and initialize live timestamps within `useEffect` or `setInterval` hooks to ensure client-side updates. The `nowTimeString` helper function provides a consistent way to format current time.

```tsx
// CORRECT — static strings for initial SSR state
const INITIAL_TIMESTAMPS = ["10:30:00", "10:30:04", "10:30:08"]

const [events, setEvents] = useState(() =>
  INITIAL_DATA.slice(0, 3).map((e, i) => ({
    ...e,
    id: `init-${i}`,
    timestamp: INITIAL_TIMESTAMPS[i],
  }))
)

// Live timestamps only inside useEffect / setInterval (client-only)
function nowTimeString() {
  const d = new Date()
  return [
    d.getHours(),
    d.getMinutes(),
    d.getSeconds(),
  ]
    .map((n) => String(n).padStart(2, "0"))
    .join(":")
}

useEffect(() => {
  const interval = setInterval(() => {
    setEvents((prev) => [
      ...prev,
      { id: `evt-${Date.now()}`, timestamp: nowTimeString(), ... }
    ])
  }, 2000)
  return () => clearInterval(interval)
}, [])
```

--------------------------------

### Tailwind Responsive Breakpoints

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/tailwind-rules.md

Lists the standard responsive breakpoints used in Tailwind CSS. Only these predefined breakpoints should be used for media queries.

```plaintext
sm: 640px    md: 768px    lg: 1024px    xl: 1280px    2xl: 1536px
```

--------------------------------

### Tailwind Max Width Scale Reference

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/tailwind-rules.md

Reference for semantic utility classes used for maximum width in Tailwind CSS, along with their corresponding pixel values.

```plaintext
max-w-xs  = 320px     max-w-sm  = 384px
max-w-md  = 448px     max-w-lg  = 512px
max-w-xl  = 576px     max-w-2xl = 672px
max-w-3xl = 768px     max-w-4xl = 896px
max-w-5xl = 1024px    max-w-6xl = 1152px
max-w-7xl = 1280px
```

--------------------------------

### Avoid Inline Styles

Source: https://github.com/creativetimofficial/ui/blob/main/skills/creative-tim-ui/rules/design-brand.md

Always use Tailwind CSS classes for styling instead of inline styles to maintain consistency and adhere to brand guidelines.

```tsx
// WRONG
<div style={{ color: '#ff6b35' }}>

// CORRECT
<div className="text-orange-500">
```