Bitrise Design System Components built with Chakra UI V3
npm install @bitrise/bitkit-v2
Bitrise Design System Components built with Chakra UI v3.
- 🎨 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
``bash`
npm install @bitrise/bitkit-v2
That's it! All Chakra UI, Emotion, and Framer Motion dependencies are bundled within the library.
- React 16.8+ (peer dependency)
- React DOM 16.8+ (peer dependency)
`tsx
import { BitkitProvider, Button } from '@bitrise/bitkit-v2';
function App() {
return (
);
}
`
`bashInstall dependencies
npm install
$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.MIT
Please see our contributing guidelines.