Metadata

The site configuration is managed in config/site.ts. This file exports the main configuration object and related types.

Basic Configuration

// config/site.ts
export const siteConfig = {
  name: "shadcn/docs",
  url: "https://shadcn-docs.vercel.app",
  ogImage: "https://shadcn-docs.vercel.app/og.jpg",
  description:
    "A documentation template for building beautiful documentation sites with Next.js and MDX. Open Source. Open Code.",
  links: {
    twitter: "https://twitter.com/shadcn",
    github: "https://github.com/duongductrong/shadcn-docs",
  },
}

Configuration Options

• name: The name of your documentation site
• url: The base URL where your documentation is hosted
• ogImage: The default Open Graph image for social sharing
• description: A brief description of your documentation site
• links: Social and repository links
  • twitter: Twitter profile URL
  • github: GitHub repository URL

Theme Colors

The site includes theme color configuration for light and dark modes:

export const META_THEME_COLORS = {
  light: "#ffffff",
  dark: "#09090b",
}

These colors are used for:

• Browser theme colors
• Meta theme tags
• System appearance integration

Type Safety

The configuration includes TypeScript support through type exports:

export type SiteConfig = typeof siteConfig

This allows you to maintain type safety when using the configuration throughout your application.

Usage

To use the site configuration in your components or pages:

import { siteConfig } from "@/config/site"
 
// Access configuration values
const siteName = siteConfig.name
const siteUrl = siteConfig.url

Customization

To customize the site configuration:

1. Open config/site.ts
2. Modify the values in the siteConfig object
3. Update theme colors in META_THEME_COLORS if needed
4. Ensure all required fields are filled out

Best Practices

1. Keep URLs Updated: Ensure all URLs are current and accessible
2. Maintain Image Assets: Keep OG images up to date and optimized
3. Description Quality: Write clear, concise site descriptions
4. Type Safety: Maintain proper TypeScript types when adding new configuration options
5. Theme Consistency: Ensure theme colors match your site's design system

Related Files

The site configuration typically works in conjunction with:

• next.config.js for Next.js configuration
• tailwind.config.js for styling configuration
• Meta components for SEO and social sharing

Site Config

The main site configuration object exports settings like name, URL, description and social links: