Giter Club home page Giter Club logo

bootwindui / react Goto Github PK

View Code? Open in Web Editor NEW
10.0 0.0 0.0 25.68 MB

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

Home Page: https://bootwindui.github.io/react/

License: MIT License

JavaScript 1.59% HTML 1.80% TypeScript 92.88% SCSS 0.81% CSS 0.85% MDX 2.06%
components components-react free react react-library tailwindcss typescript ui-components ui-library

react's Introduction

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 RepositoryStorybookGetting StartedContributionLicense


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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.