@bold-ui/react

Bold UI

Modern, fast, and accessible React component library

✨ Features

• 📦 A set of high-quality React components out of the box
• 🌲 Tree-shakeable - Include only the components you use
• ⚡ Prebuild CSS - No dependency on any CSS library (Emotion, styled-components, etc)
• 🚀 Fast & Small - Light-weight components. Check bundle size.
• ♿ Accessible - Follows Web Accessibility Initiative (WAI) standards
• 🛡️ Types included - Written in TypeScript with predictable static types

💻 Demo

• Storybook

📦 Installation

# npm
npm i @bold-ui/react

# yarn
yarn add @bold-ui/react

# pnpm
pnpm add @bold-ui/react

🔨 Usage

Just one step required before you can use this library:

1. Import core CSS (core.css) in your project root file (App.js or index.js). This css file contains CSS Variables required by the library.

   // App.js
   import "@bold-ui/react/dist/css/core.css"; // Imports CSS Variables required by the library
   ...
   

2. Ready to use components 🎉

   // MyComponent.jsx
   import { Button, Input } from "@bold-ui/react";
   
   const MyComponent = () => {
     return (
       <div>
         <Input kind="outline" />
         <Button kind="fill">Bold UI</Button>
       </div>
     );
   };
   

Note: You'll need a CSS loader in your module bundler for styles to load. If you use Vite or create-react-app, it already comes with a CSS loader.

🗂 Components

Inputs

• Button
• Checkbox
  • CheckboxGroup
• Input
• Radio
  • RadioGroup

Layout

• Stack
• Grid
  • GridItem

Overlays

• Modal
• Drawer

Data Display

• Avatar
  • AvatarGroup

Feel free to request a new component by opening an issue.

🖱 Environment Support

• Modern browsers
• Browserslist
  • all browser versions with > 0.5% of the audience worldwide
  • last 2 versions of each browser
  • exclude dead browser versions

💙 Inspiration

Bold UI is inspired by Mantine UI and Chakra UI.

📜 License

This software is open source, licensed under the MIT License.