@protoku-bv/ui

A React component library with Tailwind CSS styling.

Installation

npm install @protoku-bv/ui

Peer Dependencies

This library requires the following peer dependencies:

Note: This library specifically requires Tailwind CSS version 4.x

npm install react react-dom tailwindcss@^4.0.0

Setup

1. Make sure you have Tailwind CSS installed and configured in your project. If not, follow the official Tailwind CSS installation guide.

2. Add the component library to your Tailwind CSS configuration:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    // Add this line to include the component library
    "./node_modules/@protoku-bv/ui/dist/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Usage

import { Button } from '@protoku-bv/ui';

function App() {
  return (
    <Button variant="primary">
      Click me
    </Button>
  );
}

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run tests
npm run test

Components

The library includes several categories of components:

Base Components

• Badge
• Button

Feedback Components

• Alert
• Dialog

Form Components

• Radio
• Textarea

Icons

• AnthropicIcon
• LinuxIcon
• MacIcon
• OllamaIcon
• OpenAIIcon
• WindowsIcon

Layout Components

• Footer

Marketing Components

• Pricing

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT