ui Documentation

File: apps/www/content/docs/components/software-purchase-card.mdx Copy Chapter

title: Software Purchase Card featured: true component: true Copy Chapter

Installation Copy Chapter

npx shadcn@latest add software-purchase-card

npm install lucide-react

Usage Copy Chapter

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

Basic Usage Copy Section

<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")}
/>

Flat Rate Pricing Copy Section

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

Usage-Based Pricing Copy Section

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

API Reference Copy Chapter

SoftwarePurchaseCard Copy Section

The main card component for displaying software purchase details.

Props

Examples Copy Chapter

With State Management Copy Section

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}
    />
  )
}

With Loading State Copy Section

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={() => {}}
    />
  )
}

Multiple Cards in a List Copy Section

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 (
    
      {requests.map((request) => (
        <SoftwarePurchaseCard
          key={request.id}
          {...request}
          onApprove={() => handleApprove(request.id)}
          onDiscard={() => handleDiscard(request.id)}
        />
      ))}
    
  )
}

Block Example Copy Chapter

For a full-page implementation with detailed purchase information, check out the software-purchase-01 block.

Notes Copy Chapter

• The date is automatically formatted using toLocaleDateString with US locale
• The pricing type badge displays in a secondary variant for visual hierarchy
• Icons from lucide-react are used for visual clarity (Calendar, Users, CreditCard, DollarSign)
• The component uses the shadcn/ui Card, Button, and Badge components
• The card is fully responsive with a max width of md (28rem)

File: apps/www/content/docs/(root)/components.mdx Copy Chapter

title: Components Copy Chapter

Installing Creative Tim UI components is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn/ui CLI if you've already adopted shadcn's workflow.

npx @creative-tim/ui@latest add button

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

Prerequisites Copy Chapter

Before installing Creative Tim UI, make sure your environment meets the following requirements:

• Node.js version 18 or later
• A Next.js project
• shadcn/ui setup in your project. If you don't have it setup, running any install command will set it up for you.

Installing components Copy Chapter

You can install Creative Tim UI components using either the @creative-tim/ui CLI or the shadcn/ui CLI. Both achieve the same result: adding the selected component’s code and any needed dependencies to your project.

The CLI will download the component's code and integrate it into your project's directory (usually under your components folder).

After running the command, you should see a confirmation in your terminal that the files were added. You can then proceed to use the component in your code.

File: apps/www/content/docs/(root)/how-it-works.mdx Copy Chapter

title: How It Works Copy Chapter

Creative Tim UI components integrate directly into your project as source code, not as dependencies locked in external packages. This means each component lives in your codebase, giving you complete control to customize, extend, or modify them to match your exact requirements.

Example Copy Chapter

Once you've installed a component, simply import it like any other React component in your application. Here's a practical example showing a form card with inputs:

You can use the installed components throughout your application with full flexibility to adapt them to your needs.

Block Example Copy Chapter

Blocks are larger, pre-built sections that combine multiple components together. Here's a testimonial block that showcases customer stories with rich typography and layout:

File: apps/www/content/docs/(root)/index.mdx Copy Chapter

title: Introduction Copy Chapter

Creative Tim UI is a comprehensive component library and custom registry built on top of shadcn/ui to help you build beautiful, modern web applications faster. It provides pre-built, customizable React components and blocks designed for production-ready applications.

Installation Copy Chapter

Components are available via the @creative-tim/ui command.

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

For example, to install a button component, you can run:

npx @creative-tim/ui@latest add button

Alternatively, you can use the standard shadcn CLI:

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

Copyrights and Licenses Copy Chapter

Creative Tim UI is built upon the incredible work of the open source community:

• shadcn/ui - The documentation structure, registry system, and foundational (atomic) components are from the open source work in shadcn/ui. MIT License
• Material Tailwind by Creative Tim - The blocks and component designs are inspired by and based on Material Tailwind Framework. MIT License
• Eleven Labs UI - General inspiration for the documentation structure and approach of blocks. MIT License
• Geist Font by Vercel - The beautiful typeface used throughout the interface. SIL Open Font License 1.1

We are grateful to these projects for making their work available under open source licenses.

Featured Components Copy Chapter

Here are some examples of what you can build with Creative Tim UI components:

Cards Copy Section

Versatile card components for displaying content in various formats - from simple content cards to blog posts and e-commerce products.

View Card Documentation

Resources Copy Chapter

You can explore all available blocks here, view the full component library, or check out the source code on GitHub.

File: apps/www/content/docs/(root)/registry.mdx Copy Chapter

title: Registry Copy Chapter

What is the Registry? Copy Chapter

The Creative Tim UI registry is a centralized catalog system that enables CLI-based component installation based on shadcn/ui. Unlike traditional npm packages where components are locked in external dependencies, our registry delivers components as source code directly into your project.

How the Registry Works Copy Chapter

When you run the installation command, the CLI:

1. Fetches Component Metadata: Retrieves the component definition from our registry endpoint
2. Downloads Dependencies: Identifies and installs required npm packages
3. Copies Source Files: Places component files directly into your codebase
4. Manages Imports: Automatically configures path aliases and imports

Registry Structure Copy Chapter

Each component in the registry includes:

• Component Source Code: The actual React component files
• Type Definitions: Full TypeScript support with strict types
• Dependencies: List of required npm packages (Radix UI, etc.)
• Files Metadata: Information about where files should be placed
• Registry Dependencies: Other registry components it depends on

Installation Endpoints Copy Chapter

Components are available through JSON endpoints:

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

# Custom Blocks
/r/testimonials-09.json

These endpoints return structured JSON that the CLI uses to install components.

Registry vs NPM Copy Chapter

Registry Components Copy Chapter

The Creative Tim UI registry currently includes:

• 47 Base UI Components: All shadcn/ui components (button, card, avatar, etc.)
• 100+ Custom Blocks: Pre-built sections like testimonials, forms, and more
• Full TypeScript Support: Type-safe component definitions
• Dark Mode Ready: Built-in theme support with CSS variables

Private Components Copy Chapter

The registry supports private components with API key authentication for PRO features:

• Access control via Bearer tokens or API keys
• Gated installation for premium components
• Environment variable support for CI/CD workflows

Best Practices Copy Chapter

1. Install Only What You Need: Each component is standalone, no bloat
2. Customize After Install: Treat installed components as your own code
3. Version Control: Commit installed components to your repository
4. Update Selectively: Re-run install commands to update specific components

File: apps/www/docs/private-registry.md Copy Chapter

Private Registry Authentication

The Creative Tim UI registry supports private components that require API key authentication. This allows you to secure premium or internal components while maintaining the same installation experience.

Private Components Copy Chapter

The following components are currently private and require authentication:

• testimonials-03 - Testimonial with statistics and metrics
• testimonials-04 - Three column testimonials with star ratings

Authentication Methods Copy Chapter

The private registry supports multiple authentication methods:

1. Environment Variable (Recommended) Copy Section

Add your API key to .env.local:

API_KEY=your_api_key_here

Then install private components normally:

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

2. Authorization Header Copy Section

Use Bearer token authentication:

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

3. X-API-Key Header Copy Section

Use custom API key header:

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

4. Query Parameter Copy Section

Pass the token as a query parameter:

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

CLI Configuration Copy Chapter

To use private components with the shadcn CLI, configure your components.json:

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

Error Handling Copy Chapter

401 Unauthorized Copy Section

If you see this error, ensure your API key is set correctly:

Authentication required for private components. Set API_KEY in your .env.local file 
or provide it via Authorization header, X-API-Key header, or ?token= query parameter.

Solutions:

• Set API_KEY in your .env.local file
• Check that your API key is valid
• Ensure you're not committing your API key to version control

403 Forbidden Copy Section

This means your API key is valid but doesn't have access to the requested component.

404 Not Found Copy Section

The component either doesn't exist or is not a private component.

Security Best Practices Copy Chapter

1. Never commit API keys to version control

   • Always use environment variables
   • Add .env.local to your .gitignore

2. Use HTTPS

   • Always use HTTPS URLs to protect your API key in transit

3. Rotate keys regularly

   • Change your API key periodically for better security

4. Use different keys for different environments

   • Development, staging, and production should use separate keys

Getting Your API Key Copy Chapter

Contact us to get your API key for accessing private components:

• Email: [email protected]
• Website: https://ui.creative-tim.com/contact

Example Usage Copy Chapter

# 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

Technical Details Copy Chapter

Private components are served through an authenticated API route (/api/r/[name]) that validates your API key before returning the component definition. The registry middleware automatically redirects requests for private components to this authenticated endpoint.

Public components continue to be served statically from /r/*.json without authentication.