Features

• Built with React Aria and Radix UI primitives
• Design tokens with organized typography, colors, and spacing
• All styles customizable via className prop
• Accessible components out of the box
• Full TypeScript support with strict type checking
• Responsive design by default
• Optimized for both development and production
• Comprehensive test suite with Jest and Testing Library
• Accessibility testing with jest-axe
• ESLint and Prettier integration for code quality
• Custom fonts bundled and ready to use

Installation

# Using pnpm (recommended)
pnpm add @bombig/ui

# Using npm
npm install @bombig/ui

# Using yarn
yarn add @bombig/ui

Usage

1. Import the CSS in your app's entry point (e.g., app.tsx, _app.tsx, or main.tsx):

import '@bombig/ui/styles';

1. Use the components in your app:

import { Button } from '@bombig/ui';

function App() {
    return <Button>Click me</Button>;
}

That's it! No additional configuration needed. The components will work out of the box with all the necessary styles and design tokens. All required fonts (Euclid Circular B and Geist Mono) are included with the package and will be loaded automatically with the styles.

If you need direct access to the font files (for example, to use in your own CSS), they are also exposed through the package:

/* Example of importing fonts directly */
@font-face {
    font-family: 'Euclid Circular B';
    src: url('@bombig/ui/fonts/EuclidCircularB-Semibold-WebXL.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

The exact syntax may vary depending on your bundler or framework. For webpack, you might need to use:

@font-face {
    font-family: 'Euclid Circular B';
    src: url('~@bombig/ui/fonts/EuclidCircularB-Semibold-WebXL.woff2') format('woff2');
    /* ... */
}

Using the Design System in Your Own Components

If you want to use our design tokens, colors, typography, and other theme customizations in your own components, you can extend your Tailwind configuration:

// tailwind.config.js
module.exports = {
    // Use the @bombig/ui Tailwind configuration
    presets: [require('@bombig/ui/tailwind')],
    // Your other Tailwind configuration
    content: [
        './src/**/*.{js,jsx,ts,tsx}',
        // Include your content paths
    ],
};

This gives you access to all our design tokens:

// Your custom component using our design system
function CustomCard() {
    return (
        <div className="bg-duck-400 text-lg font-sans p-6 rounded-lg">
            Custom component using Bombig UI design tokens
        </div>
    );
}

Tailwind CSS Compatibility

This design system uses Tailwind CSS internally for styling. The Tailwind configuration is exposed through the package's exports, allowing you to use it as a preset in your own Tailwind setup:

// tailwind.config.js
module.exports = {
    presets: [require('@bombig/ui/tailwind')],
    // Your project-specific configuration
    content: [
        './src/**/*.{js,jsx,ts,tsx}',
        // Include your content paths
    ],
};

This preset includes all the design system's custom colors, fonts, spacing values, and other theme settings.

Documentation

Visit our Storybook documentation for:

• Component Showcase: Explore all available components
• Live Examples: Interact with components and see them in action
• Usage Guidelines: Learn best practices for each component
• Props Reference: Detailed API documentation for all component properties
• Theme Explorer: See the complete design system tokens, colors, and typography
• Responsive Examples: Test components at different viewport sizes

The documentation is continuously updated as the design system evolves.

Development

This is bombig.net's internal design system, crafted for our projects and rapid prototyping. While primarily for internal use, we maintain high code quality standards and welcome external usage.

# Install dependencies
pnpm install

# Start development mode
pnpm dev

# Build the library (production)
pnpm build

# Build without validation (faster for development)
pnpm build:dev

# Run Storybook development server
pnpm storybook

# Build Storybook static site
pnpm build-storybook

# Run tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run tests with coverage
pnpm test:coverage

# Type check
pnpm typecheck

# Lint code
pnpm lint

# Format code
pnpm format

# Validate all (types, lint, format, tests)
pnpm validate

VS Code Setup

We recommend using VS Code with the following extensions for the best development experience:

• ESLint
• Prettier
• Tailwind CSS IntelliSense

The repository includes recommended VS Code settings and extensions in the .vscode directory.

Code Quality

The project uses:

• TypeScript with strict mode enabled
• ESLint for code quality
• Prettier for code formatting
• Jest and Testing Library for testing
• jest-axe for accessibility testing

All code changes are validated through GitHub Actions CI/CD pipeline, which checks:

• Type correctness
• Linting rules
• Code formatting
• Test coverage
• Build success

Contributing

While this is our internal tool, we welcome community contributions:

• Report bugs and issues
• Propose new components
• Submit pull requests
• Improve documentation

Please ensure your contributions pass all validation checks:

pnpm validate

License

MIT License - see the LICENSE file for details.

Note: The MIT license covers the component library code only. Bombig.net brand assets and logos remain proprietary.

---