🚀 What is DocSplain Core?

DocSplain Core is a comprehensive React component library built with React and Tailwind CSS, designed to accelerate your web development workflow. Whether you're building a custom design system or leveraging our pre-built components, DocSplain Core provides the foundation for creating beautiful, responsive applications.

✨ Key Features

• 🎨 Modern Design System - Carefully crafted components with consistent styling
• Lightning Fast - Optimized for performance and developer experience
• 🔧 Flexible Configuration - Supports both Tailwind CSS v3 and v4
• 📱 Responsive by Default - Mobile-first approach with responsive utilities
• 🎯 TypeScript Ready - Full TypeScript support for better development experience

📦 Installation

Get started with DocSplain Core in seconds:

npm install --save @docsplain-kit/core

🔄 Using in Server Components (Next.js App Router)

All Docsplain UI Kit components are client components. To use them in server components, create a client wrapper file:

// components/docsplain.tsx
'use client';

export {
  Tab,
  TabItem,
  Button,
  // ... other components
} from '@docsplain-kit/core';

Then use in your server components:

// app/page.tsx (Server Component)
import { Tab, TabItem } from './components/docsplain';

export default function Page() {
  return (
    <Tab selectedValue="tab1" onTabSelect={() => {}}>
      <TabItem value="tab1">Home</TabItem>
      <TabItem value="tab2">About</TabItem>
    </Tab>
  );
}

📖 See SERVER_COMPONENTS.md for a complete guide with examples, best practices, and troubleshooting.