A reusable React component library for WithoutBG projects, built with Tailwind CSS and Next.js support.
- 🎨 Pre-configured Tailwind CSS design system
- ⚡ Built with Vite for optimal performance
- 📚 Storybook documentation
- 🌙 Dark mode support out of the box
- 🔗 Next.js Link integration
- 📦 TypeScript support
- 🎯 Tree-shakeable exports
Install directly from GitHub:
npm install github:withoutbg/ui#main # or yarn add github:withoutbg/ui#main # or pnpm add github:withoutbg/ui#mainExtend your Tailwind configuration with the WithoutBG preset:
// tailwind.config.js const withoutbgPreset = require('@withoutbg/ui/tailwind-preset'); module.exports = { presets: [withoutbgPreset], content: [ './src/**/*.{js,ts,jsx,tsx}', './node_modules/@withoutbg/ui/dist/**/*.{js,ts,jsx,tsx}', ], darkMode: 'class', };This step is crucial - without it, your components will have no styling!
Import the component styles in your root layout or app entry point:
// In your Next.js app layout (app/layout.tsx) or pages/_app.tsx import '@withoutbg/ui/styles'; export default function RootLayout({ children }) { return ( <html> <body>{children}</body> </html> ); }Alternatively, import in your main CSS file:
/* In your global CSS file (e.g., app/globals.css) */ @import '@withoutbg/ui/styles';A versatile button component that supports both click handlers and Next.js navigation.
import { PrimaryButton } from '@withoutbg/ui'; function MyComponent() { return ( <PrimaryButton onClick={() => console.log('Clicked!')}> Click Me </PrimaryButton> ); }import { PrimaryButton } from '@withoutbg/ui'; function MyComponent() { return ( <PrimaryButton href="/about"> Go to About </PrimaryButton> ); }import { PrimaryButton } from '@withoutbg/ui'; function MyComponent() { return ( <PrimaryButton onClick={() => {}} disabled> Disabled Button </PrimaryButton> ); }import { PrimaryButton } from '@withoutbg/ui'; function MyComponent() { return ( <PrimaryButton onClick={() => {}} className="px-8 py-4 text-lg" > Large Button </PrimaryButton> ); }A secondary button component with subtle styling, supporting both click handlers and Next.js navigation.
import { SecondaryButton } from '@withoutbg/ui'; function MyComponent() { return ( <SecondaryButton onClick={() => console.log('Clicked!')}> Secondary Action </SecondaryButton> ); }The package includes the WithoutBG design system with:
- Primary:
#6C2BD9(hover:#5A23B8) - Primary Light (Dark mode):
#A97BFF(hover:#9460E8) - Backgrounds: Light (
#f7f7f7), Dark (#2b3035)
- Font Family: Inter, SF Pro Display, system fonts
- Font Sizes: xs (12px) through 6xl (60px)
- Font Weights: 300-700
- Shimmer effect
- Fade-in-up
- Smooth transitions
- Node.js 18+
- npm/yarn/pnpm
# Clone the repository git clone https://github.com/withoutbg/ui.git cd ui # Install dependencies npm install # Start Storybook npm run storybook # Build the library npm run buildnpm run dev- Start Vite dev servernpm run build- Build the library for productionnpm run storybook- Start Storybook on port 6006npm run build-storybook- Build Storybook for deployment
View component documentation and examples:
npm run storybookThis will start Storybook at http://localhost:6006
The package includes full TypeScript support with generated type definitions.
react>= 18.0.0react-dom>= 18.0.0next>= 14.0.0tailwindcss>= 3.0.0
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
For issues and questions, please open an issue on GitHub.