import { Meta } from "@storybook/addon-docs/blocks";

🤖 Welcome to GitButler UI

Welcome to the GitButler UI Storybook. This is a collection of components that are used to build the GitButler UI. Here you can see all the components that are available and how they can be used.

📚 How to install

Because the GitButler UI is a part of a monorepo, you can use the components by adding the package to your package.json file.

"@gitbutler/ui": "workspace:*",

Then import the package styles in your project:

@import "@gitbutler/ui/main.css";

This single import automatically includes:

• All UI component styles
• All font definitions (@font-face rules)
• Font file assets (Inter, Geist Mono, PP Editorial New)
• CSS custom properties for fonts

🔤 Font System

The UI package uses a centralized font system. Once you import main.css, you can use these font families:

font-family: var(--fonts-inter); /* Primary UI font */
font-family: var(--fonts-geist-mono); /* Code/monospace font */
font-family: var(--fonts-pp-editorial); /* Display/heading font */

Available fonts:

• Inter: Regular, Medium, SemiBold, Bold (+ Italic versions)
• Geist Mono: Regular, Medium, Bold
• PP Editorial New: Regular

No additional font imports needed - everything is included in the single CSS import!

📦 Packing styles

In order to pack the styles, we use PostCSS. The PostCSS configuration is located in the postcss.config.js file.

const config = {
	plugins: [
		pxToRem({
			rootValue: 16,
			unitPrecision: 5,
			propList: ["*"],
			selectorBlackList: [],
			replace: true,
			mediaQuery: false,
			minPixelValue: 0,
		}),
		autoprefixer(),
		postcssNesting(),
		postcssBundler(),
		postcssMinify(),
	],
};