Skip to content

Latest commit

 

History

History
161 lines (114 loc) · 4.91 KB

README.md

File metadata and controls

161 lines (114 loc) · 4.91 KB
Raw

Welcome to Bootwind UI Repository! 👋🏻

bootwind-banner

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.