Installation

Things components are designed to be copied directly into your project. There's no npm package to install, no UI library dependencies. Just copy the component code and customize it to your needs. All components are built from scratch using React and native HTML elements.

Requirements

Before using Things components, make sure you have:

• React 18+ Installed in your project
• Tailwind CSS Configured and set up
• TypeScript (recommended but not required)

Install Dependencies

Components use minimal dependencies. Install these packages:

npm install class-variance-authority clsx tailwind-merge

class-variance-authority For component variants
clsx For className utilities
tailwind-merge For merging Tailwind classes

No UI library dependencies required. Everything is built from scratch.

Installation Steps

Step 1: Copy the utils file

First, copy the utility function file. Create a lib/utils.ts file in your project:

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Step 2: Copy component code

Copy the component code from the documentation pages. For example, to use the Button component:

1. Go to the Button component docs
2. Copy the entire component code
3. Create components/ui/button.tsx in your project
4. Paste the code

Step 3: Use the component

Import and use the component in your project:

import { Button } from "@/components/ui/button"

export default function MyPage() {
  return <Button>Click me</Button>
}

Step 4: Configure Tailwind (if needed)

Make sure your tailwind.config.js includes the component paths:

module.exports = {
  content: [
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of config
}