Configuration

Learn how to configure VibeUI templates to match your needs.

Tailwind CSS Configuration

VibeUI templates use Tailwind CSS for styling. You can customize the appearance by modifying the tailwind.config.js file.

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // Add or modify colors here
      },
    },
  },
  // ...
}

/* globals.css */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 262.1 83.3% 57.8%;
  --primary-foreground: 210 40% 98%;
  /* Add or modify variables here */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 262.1 83.3% 57.8%;
  --primary-foreground: 210 40% 98%;
  /* Add or modify dark mode variables here */
}

Next.js Configuration

You can customize the Next.js configuration by modifying the next.config.js file:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Add your custom Next.js configuration here
  images: {
    domains: ['example.com'], // Add domains for remote images
  },
  // Other configuration options
}

module.exports = nextConfig

Template-Specific Configuration

Each template may have specific configuration options. These are typically documented in the template's README file.

Environment Variables

Some templates may require environment variables for API keys, database connections, or other configuration.

Create a .env.local file in the root of your project and add the required variables:

# .env.local
DATABASE_URL=your-database-url
API_KEY=your-api-key
# Add other environment variables as needed

Note: Never commit your .env.local file to version control. Add it to your .gitignore file.