@bitrise/bitkit-v2

Bitrise Design System Components built with Chakra UI v3.

Features

• 🎨 Custom Design System: Complete Bitrise brand implementation
• 🔧 Built with Chakra UI v3: Latest Chakra UI features and performance
• 📱 Responsive: Mobile-first responsive design
• 🎯 TypeScript: Full TypeScript support with auto-generated types
• 🎨 Custom Fonts: Self-hosted Figtree and Source Code Pro fonts
• 🧩 Zero External Dependencies: Everything bundled (except React)
• ⚡ Simple Installation: Just npm install @bitrise/bitkit-v2

Installation

npm install @bitrise/bitkit-v2

That's it! All Chakra UI, Emotion, and Framer Motion dependencies are bundled within the library.

Requirements

• React 16.8+ (peer dependency)
• React DOM 16.8+ (peer dependency)

Quick Start

import { BitkitProvider, Button } from '@bitrise/bitkit-v2';

function App() {
  return (
    <BitkitProvider>
      <Button variant="primary">Hello Bitrise!</Button>
    </BitkitProvider>
  );
}

Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build the library
npm run build

# Generate theme types
npm run theme:generate-types

Export SVG icons from Figma

First you should create a Figma Personal Access Token to acces to the Bitkit Foundations file: https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens

FIGMA_TOKEN=<your-personal-access-token> npm run generate:icons

Manual Icon Overrides

If you need to customize an icon (e.g., add animations), you can prevent it from being overwritten during generation by adding a skip marker:

// @generate:skip
// This file is manually maintained with custom animation.

import { Icon, IconProps } from '@chakra-ui/react/icon';
// ... your custom implementation

Icons marked with // @generate:skip will:

• Be preserved during regeneration
• Still be exported in the barrel files
• Appear in the generation summary as "skipped (manual)"

You can also create custom icons that don't exist in Figma. Just add the skip marker and place them in the appropriate size folder (lib/icons/16x16/ or lib/icons/24x24/). They'll be automatically included in exports.

License

MIT

Contributing

Please see our contributing guidelines.