React Tailwind UI

A beautiful UI component library for React with Tailwind CSS that works seamlessly with Next.js App Router and Server Side Rendering without requiring "use client" directives.

Features

• Server-compatible React components that work without "use client" directive
• Comprehensive set of foundational UI components
• Fully customizable theming system built on Tailwind CSS
• Zero client-side JavaScript requirement for basic components
• TypeScript support with proper type definitions
• Component variants with consistent design patterns
• Small bundle size with tree-shaking support

Installation

npm install react-tailwind-ui

Setup

Configure Tailwind CSS

Add the component paths to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    "./node_modules/react-tailwind-ui/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [],
}

Import Styles

Import the styles in your main CSS file:

@import 'react-tailwind-ui/styles.css';

Usage

import { Button, Card, Input } from 'react-tailwind-ui';

export default function MyComponent() {
  return (
    <Card>
      <Card.Header>
        <h3>Welcome</h3>
      </Card.Header>
      <Card.Body>
        <Input placeholder="Enter your name" />
        <Button>Submit</Button>
      </Card.Body>
    </Card>
  );
}

Components

• Button
• Input
• Card
• Badge
• Alert
• Avatar
• ... and more!

License

MIT