bootwindui / react

Bootwind UI: Tailwind CSS integration for rapid UI development. Streamline your projects with utility-first design and predefined components. ⚡️

Welcome to Bootwind UI Repository! 👋🏻

Bootwind UI: Tailwind CSS integration for rapid UI development. Streamline your projects with utility-first design and predefined components. ⚡️

Github Repository • Storybook • Getting Started • Contribution • License

---

Overview

Welcome to Bootwind UI, where innovation meets simplicity in the realm of user interface development. Bootwind UI is a dynamic UI library designed to revolutionize your approach to building modern, responsive, and visually appealing interfaces. Whether you are a seasoned developer seeking efficiency or a newcomer looking for a powerful yet straightforward solution, Bootwind UI is your gateway to a world of possibilities.

Key Features:

• Tailored for Speed and Efficiency: Bootwind UI leverages the power of Tailwind CSS, offering developers a utility-first approach to styling. With a comprehensive set of utility classes, you can achieve a polished and professional look for your UI with minimal effort.
• Responsive Design: Craft responsive interfaces effortlessly. Bootwind UI ensures that your applications look and function flawlessly across a variety of devices and screen sizes, making it easy to create a consistent user experience.
• Predefined Components: Say goodbye to repetitive coding. Bootwind UI comes packed with a diverse range of pre-designed components, such as buttons, cards, modals, and navigation bars. These components can be easily customized to suit your project's unique requirements, allowing for rapid development without sacrificing creativity.
• Customization Without Complexity: Tailwind CSS is known for its customization capabilities, and Bootwind UI embraces this by providing a clean and organized structure for easy theming. Tailor the library to match your brand effortlessly, ensuring a cohesive and branded look for your application.
• Lightweight and Performant: Keep your application fast and efficient. Bootwind UI is designed to be lightweight, ensuring that your users enjoy a smooth and responsive experience without unnecessary bloat.

---

Getting Started

Welcome to Bootwind UI – the ultimate toolkit for creating beautiful, responsive user interfaces with ease. Follow these steps to quickly integrate Bootwind UI into your project.

1. Bootwind UI should be installed as a `dependency` of your app.

yarn add @bootwindui/react

2. Install deps Bootwind UI components are styled using CSS in JS. This technique requires a style renderer which inserts CSS into DOM when needed. React context is used to provide the style renderer. Place a `` at the root of your app and pass theme as a prop.

import React from 'react';
import ReactDOM from 'react-dom';
import { BootwindProvider } from '@bootwindui/react';

import App from './App';

ReactDOM.render(

<BootwindProvider>
  <App />
</BootwindProvider>
, document.getElementById('root') );

3. Usage That's it. You can now use Bootwind UI components in your app.

import React from 'react';
import { Button } from '@bootwindui/react';

export default () => <Button color="primary">Get started</Button>;

---

Contributions

Bootwind uses nx as monorepo build system. You can install it globally by running pnpm i -g nx

1. Clone the repository

git clone https://github.com/bootwindui/react
cd bootwind

2. Install deps

pnpm install

3. Run storybook locally

nx run ui:storybook

4. Create new component (e.g. card component). Change `card` to your desired component name

nx g @nrwl/react:lib card

5. Generate stories from component

nx g @nx/react:storybook-configuration card

---

License

• Copyright © 2024 Bootwind Project
• BootwindUI is open sourced in under MIT license.

react's Issues

Add storybook autodoc : https://storybook.js.org/docs/react/writing-docs/autodocs