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.