🚀 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.

🎨 Theme-Aware Div Colors

Div supports bgColor and borderColor props. Pass Tailwind color tokens without the utility prefix:

<Div bgColor="control-50" borderColor="control-200" />

The dark-mode color is generated by withUiKit. Numeric shades reverse automatically, so control-50 becomes control-950.

You can override any reverse color from tailwind.config.js:

const withUiKit = require('@docsplain-kit/core/withUiKit');

module.exports = withUiKit({
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [],
  uiKit: {
    reverseColors: {
      bg: {
        white: 'control-800',
      },
      border: {
        white: 'control-700',
      },
    },
  },
});

Use a top-level key such as white: 'control-800' when the same reverse color should apply to both bgColor and borderColor.