barebones-ui Library

!Build Status
!npm version
!License

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:

``bash


Using npm

npm install barebones-ui

Using yarn

yarn add barebones-ui

Using pnpm

pnpm add barebones-ui
`

$3

Make sure you have the following peer dependencies installed:

`json
{
"react": ">=16"
}
`

Quick Start

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

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

2. Start using components in your React application:

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

function App() {
return (



Welcome to barebones-ui


Get Started

);
}
`

🚀 Performance Optimizations

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

$3

- 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

$3

#### 1. Standard Import (All Components)

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

#### 2. Core Components Only (Smaller Bundle)

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

`tsx
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:

`tsx
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.

$3

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

$3

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

$3

- 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

$3

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

$3

- 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

$3

- 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

$3

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

$3

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

$3

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

Component Usage Examples

$3

`tsx
import { Button } from 'barebones-ui';


Click Me
;
`

$3

`tsx
import { Modal } from 'barebones-ui';


Title
Content goes here

Close

;
`

$3

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



New

Notifications
;
`

Documentation

$3

View the interactive component documentation:

`bash
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

$3

Each component exports TypeScript types for props:

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

Development

$3

- Node.js >= 18
- npm or yarn

$3

1. Clone the repository:

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

2. Install dependencies:

`bash
npm install
`

3. Start development:

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

$3

`bash
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
`

$3

`
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
`

$3

- 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: learn.tanishraj@gmail.com
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions

Acknowledgments

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

---

Made with ❤️ by Tanish Raj