A barebones React UI library built with TypeScript and Tailwind CSS.
npm install barebones-ui!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.
- Features
- Installation
- Quick Start
- Performance Optimizations
- Components
- Documentation
- Development
- Contributing
- License
- ๐ 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
Install the library using npm or yarn:
``bashUsing npm
npm install 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
);
}
`๐ 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 outputComponents
$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';;
`$3
`tsx
import { Modal } from 'barebones-ui';
Title
Content goes here
;
`$3
`tsx
import { Indicator, IndicatorItem, Badge } from 'barebones-ui';
New
;
`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`)MIT ยฉ Tanish Raj
- ๐ง Email: learn.tanishraj@gmail.com
- ๐ Issues: GitHub Issues
- ๐ฌ Discussions: GitHub Discussions
- Built with DaisyUI
- Powered by Tailwind CSS
- Editor powered by Lexical
---
Made with โค๏ธ by Tanish Raj