docmind-react

A simple React component library with Tailwind CSS support.

Installation

npm install docmind-react

Setup Tailwind CSS

This package includes TailwindCSS. Make sure your project has PostCSS configured:

1. Create a postcss.config.mjs file in your project:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

2. Import the styles in your CSS file:

@import "tailwindcss";

Usage

Import and use components in your React application:

import { Dialog } from "docmind-react";

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Dialog</button>

      <Dialog
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Example Dialog"
      >
        <p>This is a dialog with Tailwind CSS styling!</p>
      </Dialog>
    </div>
  );
}

Development

First, install all dependencies:

bun install

Make sure postcss-cli is installed:

bun add -d postcss-cli

To run the development server:

bun run start

Build Commands

For production build:

bun run build:prod

Individual commands:

# Build TypeScript
bun run build

# Process CSS (watch mode)
bun run css

# Process CSS (one time)
npx postcss src/styles.css -o dist/styles.css

This project uses Bun as its JavaScript runtime.