barebones-ui Library

A modern, customizable React UI library built with TypeScript, Tailwind CSS v4, and DaisyUI. This library provides a comprehensive set of accessible, responsive, and beautifully designed components for building modern web applications.

Table of Contents

• Features
• Installation
• Quick Start
• Performance Optimizations
• Components
• Documentation
• Development
• Contributing
• License

Features

• 🚀 40+ Pre-built Components: Rich set of UI components for all your needs
• 📦 TypeScript Support: Fully typed components for type safety and IntelliSense
• 🎨 Tailwind CSS v4: Built with the latest Tailwind CSS for rapid UI development
• 🎯 DaisyUI Integration: Leverages DaisyUI's utility classes for consistent theming
• 📱 Responsive Design: All components are responsive and mobile-friendly
• ♿ Accessible: Built with accessibility in mind following WAI-ARIA standards
• 🎭 Customizable: Easily customize components using className props and CVA variants
• 📝 Rich Text Editors: Includes both Lexical and custom rich text editor implementations
• 🧪 Well Tested: Components come with comprehensive test coverage using Vitest
• 📖 Storybook Documentation: Interactive component documentation with Storybook

Installation

Install the library using npm or yarn:

# Using npm
npm install barebones-ui

# Using yarn
yarn add barebones-ui

# Using pnpm
pnpm add barebones-ui

Peer Dependencies

Make sure you have the following peer dependencies installed:

{
  "react": ">=16"
}

Quick Start

1. Import the library styles in your main CSS file or entry point:

import 'barebones-ui/dist/index.css';

2. Start using components in your React application:

import { Button, Card, Modal } from 'barebones-ui';

function App() {
  return (
    <Card>
      <h2>Welcome to barebones-ui</h2>
      <Button variant='primary'>Get Started</Button>
    </Card>
  );
}

🚀 Performance Optimizations

The library has been optimized for production use with the following features:

Bundle Size Optimization

• Tree Shaking: Full support with sideEffects: false - only import what you use
• Code Splitting: Separate entry points for optimal bundle sizes
• Minification: Production builds are minified with terser, removing console logs and comments
• React.memo: Frequently used components are wrapped with React.memo to prevent unnecessary re-renders

Import Strategies

1. Standard Import (All Components)

import { Button, Modal, Card } from 'barebones-ui';

2. Core Components Only (Smaller Bundle)

Import only lightweight, frequently-used components for optimal initial bundle size:

import { Button, Badge, Alert } from 'barebones-ui/core';

Core components include: Button, Dropdown, Select, Accordion, Avatar, Badge, Card, Alert, Loader, Progress, Tooltip, Toggle, Checkbox, Radio, and more.

3. Heavy Components (Code Splitting)

Import heavy components separately for better code splitting and lazy loading:

import { Modal, Drawer, Carousel, Table, Chat } from 'barebones-ui/heavy';

// Or with lazy loading
const Modal = React.lazy(() =>
  import('barebones-ui/heavy').then(m => ({ default: m.Modal })),
);

Heavy components include: Modal, Drawer, Carousel, Table, and Chat.

Bundle Analysis

After building, check dist/bundle-stats.html for a visual breakdown of your bundle composition.

Performance Best Practices

1. Use specific imports: Import only the components you need
2. Lazy load heavy components: Use React.lazy() for components like Modal, Drawer, and Carousel
3. Leverage code splitting: Use the /core and /heavy entry points appropriately
4. Monitor bundle size: Regularly check the bundle analyzer output

Components

Layout Components

• Accordion - Expandable content panels
• Card - Container component with various styles
• Divider - Visual separator with text support
• Drawer - Side navigation panel
• Modal - Dialog/popup component
• Table - Data table with sorting and styling options

Navigation

• Breadcrumbs - Navigation trail component
• Dropdown - Dropdown menu component
• Link - Styled anchor component
• Timeline - Vertical timeline display

Form Controls

• Button - Versatile button with multiple variants
• Checkbox - Styled checkbox input
• ColorPicker - Color selection component
• Label - Form label component
• Radio - Radio button component
• Range - Range slider input
• Rating - Star rating component
• Select - Dropdown select component
• Toggle - Toggle switch component

Data Display

• Avatar - User avatar display
• Badge - Small count and labeling component
• Chat - Chat message display
• Countdown - Countdown timer component
• Indicator - Position indicators for badges/notifications
• Kbd - Keyboard key display
• List - Structured list component
• Stat - Statistics display component
• Status - Status indicator component
• Tooltip - Hover tooltip component

Feedback

• Alert - Alert message component
• Loader - Loading spinner/indicator
• Progress - Progress bar component
• RadialProgress - Circular progress indicator
• Skeleton - Loading placeholder component

Media & Content

• Carousel - Image/content carousel
• Difference - Before/after comparison
• Swap - Animated content swap

Rich Text

• RichEditor - Feature-rich text editor
• LexicalFocused - Advanced Lexical-based editor

Component Usage Examples

Button Component

import { Button } from 'barebones-ui';

<Button variant='primary' size='lg' onClick={handleClick}>
  Click Me
</Button>;

Modal Component

import { Modal } from 'barebones-ui';

<Modal isOpen={isOpen} onClose={handleClose}>
  <Modal.Header>Title</Modal.Header>
  <Modal.Body>Content goes here</Modal.Body>
  <Modal.Footer>
    <Button onClick={handleClose}>Close</Button>
  </Modal.Footer>
</Modal>;

Indicator Component

import { Indicator, IndicatorItem, Badge } from 'barebones-ui';

<Indicator>
  <IndicatorItem horizontal='end' vertical='top'>
    <Badge variant='primary'>New</Badge>
  </IndicatorItem>
  <Button>Notifications</Button>
</Indicator>;

Documentation

Storybook

View the interactive component documentation:

npm run storybook

This will start Storybook on http://localhost:6006 where you can:

• View all components
• Interact with component props
• See usage examples
• Copy code snippets

API Documentation

Each component exports TypeScript types for props:

import type { ButtonProps, ModalProps } from 'barebones-ui';

Development

Prerequisites

• Node.js >= 18
• npm or yarn

Setup

1. Clone the repository:

git clone https://github.com/tanishraj/barebones-ui.git
cd barebones-ui

2. Install dependencies:

npm install

3. Start development:

npm run dev        # Start Vite dev server
npm run storybook  # Start Storybook

Available Scripts

npm run dev          # Start development server
npm run build        # Build the library
npm run test         # Run tests
npm run test:watch   # Run tests in watch mode
npm run test:coverage # Generate test coverage
npm run lint         # Run ESLint
npm run lint:fix     # Fix linting issues
npm run format       # Format code with Prettier
npm run storybook    # Start Storybook
npm run build-storybook # Build Storybook

Project Structure

src/
├── components/       # All UI components
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.styles.ts
│   │   ├── Button.test.tsx
│   │   ├── Button.stories.tsx
│   │   ├── types.ts
│   │   └── index.ts
│   └── ...
├── hooks/           # Custom React hooks
├── utils/           # Utility functions
└── index.ts         # Main entry point

Technology Stack

• React 18 - UI library
• TypeScript - Type safety
• Tailwind CSS v4 - Utility-first CSS
• DaisyUI - Tailwind CSS components
• Vite - Build tool
• Rollup - Module bundler
• Vitest - Testing framework
• Storybook - Component documentation
• CVA - Class variance authority for variants
• Lexical - Rich text editor framework

Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Tanish Raj

Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

Acknowledgments

• Built with DaisyUI
• Powered by Tailwind CSS
• Editor powered by Lexical

Made with ❤️ by Tanish Raj