UI Components

This page demonstrates how to use Tailwind CSS and Shadcn/ui components in your Docusaurus documentation.

Button Components

You can use various button styles throughout your documentation:

Card Components

Cards are perfect for highlighting important information:

🚀 Quick Start

Get started with Innotrace in just a few steps.

Our platform makes it easy to track and analyze your data with powerful features and intuitive design.

Tailwind CSS Classes

You can use Tailwind CSS classes directly in your markdown:

Beautiful Gradients

Create stunning visual effects with Tailwind's gradient utilities.

Success

Everything is working perfectly!

Warning

Please review your configuration.

Code Examples

Here's how you can import and use these components in your own pages:

import { Button } from '@site/src/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@site/src/components/ui/card';

export default function MyPage() {
  return (
    <div>
      <Card>
        <CardHeader>
          <CardTitle>My Card</CardTitle>
        </CardHeader>
        <CardContent>
          <Button>Click me!</Button>
        </CardContent>
      </Card>
    </div>
  );
}

The components are fully compatible with Docusaurus's dark mode and will automatically adapt their appearance based on the current theme.