@bitrise/bitkit-v2

Bitrise Design System Components built with Chakra UI v3.

Browse the component library in Storybook

Features

• Custom Design System: Complete Bitrise brand implementation
• Built with Chakra UI v3: Latest Chakra UI features and performance
• TypeScript: Full TypeScript support with auto-generated types
• Self-hosted Fonts: Figtree and Source Code Pro bundled via BitkitProvider
• Simple Installation: Just npm install @bitrise/bitkit-v2

Installation

npm install @bitrise/bitkit-v2

Chakra UI and Emotion are included as regular runtime dependencies of this package, so you do not need to install them separately.

Requirements

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

Quick Start

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

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

Development

Requirements

• Node.js 24.x+ (see .tool-versions for the exact version used in development)

Commands

# 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.