Get started with SoloKit

# Core dependencies
pnpm add framer-motion lucide-react clsx tailwind-merge class-variance-authority

# Radix UI primitives (used by multiple components)
pnpm add @radix-ui/react-collapsible @radix-ui/react-dialog @radix-ui/react-tabs
pnpm add @radix-ui/react-tooltip @radix-ui/react-scroll-area @radix-ui/react-slot

# Optional: syntax highlighting for code blocks
pnpm add prismjs react-syntax-highlighter
pnpm add -D @types/prismjs @types/react-syntax-highlighter

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

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

import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from "@/lib/chatbot/conversation";
import { Message, MessageContent } from "@/lib/chatbot/message";
import { Loader, StreamingCursor } from "@/lib/chatbot/loader";
import { Sources, SourcesTrigger, SourcesContent } from "@/lib/chatbot/sources";

export function ChatInterface({ messages, isLoading }) {
  return (
    <Conversation className="h-[600px]">
      <ConversationContent>
        {messages.map((msg) => (
          <Message key={msg.id} role={msg.role}>
            <MessageContent>{msg.content}</MessageContent>
            {msg.sources && (
              <Sources>
                <SourcesTrigger>{msg.sources.length} sources</SourcesTrigger>
                <SourcesContent sources={msg.sources} />
              </Sources>
            )}
          </Message>
        ))}
        {isLoading && <Loader />}
      </ConversationContent>
      <ConversationScrollButton />
    </Conversation>
  );
}

import {
  DocLayout,
  DocContent,
  DocBreadcrumb,
  DocTableOfContents,
  DocNavigation,
} from "@/lib/docs";
import SiteHeader from "@/components/SiteHeader";
import SiteFooter from "@/components/SiteFooter";

export default function DocsPage({ params }) {
  return (
    <DocLayout
      header={<SiteHeader />}
      footer={<SiteFooter />}
      structureApiEndpoint="/api/docs/structure"
    >
      <DocBreadcrumb
        slug={params.slug}
        title={pageTitle}
        labels={{ home: "Home", docs: "Docs" }}
      />
      <DocContent title={pageTitle} description={pageDescription}>
        {compiledMDXContent}
      </DocContent>
      <DocNavigation
        currentSlug={params.slug}
        labels={{ prev: "Previous", next: "Next" }}
      />
    </DocLayout>
  );
}

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./lib/**/*.{js,ts,jsx,tsx,mdx}",  // Include lib/ for SoloKit components
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-dm-sans)", "sans-serif"],
        display: ["var(--font-outfit)", "sans-serif"],
      },
      colors: {
        border: "rgb(var(--border))",
        background: "rgb(var(--background))",
        foreground: "rgb(var(--foreground))",
        primary: {
          DEFAULT: "rgb(var(--primary))",
          foreground: "rgb(var(--primary-foreground))",
        },
        // ... other shadcn/ui color tokens
      },
    },
  },
};

export default config;

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}