tailcode

Black UI

A professionally designed component library & templates market that brings together functionality, accessibility, and beautiful aesthetics for modern applications.

Installation

npm install black-ui
# or
yarn add black-ui
# or
pnpm add black-ui

What Gets Installed

When you install Black UI, the package will:

• Create core Black UI components in your project
• Generate helper files to get you started:
  • blackui-styles.css - A CSS template to import into your project
  • blackui-tailwind-example.js - Example Tailwind configuration
  • BlackUIExample.jsx - A sample component showing how to use Black UI

Setup

1. Tailwind CSS Configuration

Add the Black UI plugin to your tailwind.config.js or tailwind.config.ts:

import blackUIPlugin from 'black-ui/src/plugin';

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    "./app/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
    // Add this line to include components from black-ui
    "./node_modules/black-ui/dist/components/**/*.{js,jsx,ts,tsx}"
  ],
  plugins: [
    blackUIPlugin,
    require("tailwindcss-animate")
  ],
  // Your existing theme configuration
  theme: {
    // ...
  }
}

2. CSS Setup

Import the base CSS in your global stylesheet:

/* Your main CSS file */
@import 'black-ui/dist/styles.css';

Alternatively, you can use the generated blackui-styles.css file as a starting point for your styles.

3. Add the Toaster Component (if using toasts)

Add the Toaster component to your app's root component:

import { Toaster } from 'black-ui';

function App() {
  return (
    <>
      {/* Your app content */}
      <Toaster />
    </>
  );
}

Usage

Now you can import and use components from Black UI:

import { Button } from 'black-ui';

export default function MyComponent() {
  return (
    <Button>Click me</Button>
  );
}

See the generated BlackUIExample.jsx file for a more complete example.

Available Components

Black UI provides a wide range of professionally designed components:

• Buttons
• Cards
• Forms
• Toast notifications
• Inputs and labels
• Checkboxes
• Textarea components
• And many more...

Customization

Black UI is built on top of Tailwind CSS and is fully customizable. You can override any of the default styles by modifying your Tailwind configuration.

Contributing

Contributions are welcome! Please see our contributing guidelines for more details.

License

MIT © Black UI