Kibble

Kibble is a React component library for use at Otto.

Installation

We need to install private packages in this repo, so ensure that you have a .npmrc file with the following code in the root of your repository:

//registry.npmjs.org/:_authToken=${NPM_TOKEN}

Also ensure that you have added the NPM_TOKEN environment variable to your .bash_profile or .zshrc

export NPM_TOKEN=${SOME_TOKEN}

Note: The NPM token can be found here in our shared accounts table

Once these steps are complete you should be able to install the packages dependencies

$ npm install

Bundle Analyzer

We are using vite-bundle-visualizer to get the metrics for our bundle.

To generate the metrics, you'll need to run:

$ npm run build

After the build finishes, look for the file named stats.html and open it in the browser of your choice.

Theme Token Autocompletion

To enable theme token autocompletion in your application, you have two options:

Option 1: Automatic Generation (Recommended)

Add the following to your package.json:

{
  "scripts": {
    "postinstall": "kibble-postinstall"
  }
}

This will automatically generate theme types whenever you install or update @televet/kibble-ui.

If you need to skip the automatic generation (e.g., in CI environments), you can set the SKIP_KIBBLE_POSTINSTALL environment variable:

SKIP_KIBBLE_POSTINSTALL=1 npm install

Option 2: Manual Generation

Run the following command after installing or updating @televet/kibble-ui:

npx kibble-generate-theme

Both options will enable autocompletion for all Kibble UI theme tokens in your components:

// You'll get autocompletion for theme tokens like this:
<Swatch bgColor="background.primary" />
<Text fontSize="sm" />