@bitrise/bitkit-v2

![npm version](https://www.npmjs.com/package/@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

``bash npm install @bitrise/bitkit-v2`

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

`$3`

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

`Quick Start`

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

function App() { return ( ); }`

`Development`

`bash

`Install dependencies`


npm install
Start Storybook

npm run storybook
Build the library

npm run build
Generate theme types

npm run theme:generate-types


$3
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

`bash FIGMA_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:

`tsx // @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:skipwill: - 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.

Features

Install dependencies

npm install

Start Storybook

npm run storybook

Build the library

npm run build

Generate theme types

npm run theme:generate-types

$3

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

bash
FIGMA_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:

tsx
// @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.