docmind-react

A simple React component library with Tailwind CSS support.

Installation

1npm 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:

1export default {
2  plugins: {
3    "@tailwindcss/postcss": {},
4  },
5};

2. Import the styles in your CSS file:

1@import "tailwindcss";

Usage

Import and use components in your React application:

1import { Dialog } from "docmind-react";
2
3function App() {
4  const [isOpen, setIsOpen] = React.useState(false);
5
6  return (
7    <div>
8      <button onClick={() => setIsOpen(true)}>Open Dialog</button>
9
10      <Dialog
11        isOpen={isOpen}
12        onClose={() => setIsOpen(false)}
13        title="Example Dialog"
14      >
15        <p>This is a dialog with Tailwind CSS styling!</p>
16      </Dialog>
17    </div>
18  );
19}

Development

First, install all dependencies:

1bun install

Make sure postcss-cli is installed:

1bun add -d postcss-cli

To run the development server:

1bun run start

Build Commands

For production build:

1bun run build:prod

Individual commands:

1# Build TypeScript
2bun run build
3
4# Process CSS (watch mode)
5bun run css
6
7# Process CSS (one time)
8npx postcss src/styles.css -o dist/styles.css

This project uses Bun as its JavaScript runtime.