Getting Started

Installation

Bundy UI ships as a Nuxt module. It's styled entirely with UnoCSS, so `@unocss/nuxt` is a required peer.

1. Authenticate against GitHub Packages

Bundy UI is a private package. GitHub's npm registry rejects anonymous requests, so this step comes first — without it the install fails with a 401 .

Point the scope at the registry in your project. This file holds no secret and can be committed:

.npmrc
ini
@jgastager:registry=https://npm.pkg.github.com

Then add a classic personal access token with the read:packages and repo scopes to your user-level npmrc. Never commit this one:

~/.npmrc
ini
//npm.pkg.github.com/:_authToken=ghp_yourtokenhere

It has to be a classic token — fine-grained tokens don't authenticate against npm.pkg.github.com . The repo scope is needed because the source repository is private. In GitHub Actions, use secrets.GITHUB_TOKEN with permissions: { packages: read } instead of a token of your own.

2. Install the packages

bash
npm install @jgastager/bundy-ui @unocss/nuxt

3. Register the modules

nuxt.config.ts
ts
export default defineNuxtConfig({
  modules: ["@unocss/nuxt", "@jgastager/bundy-ui"],
});

4. Add the preset

This is a required step, not optional — without it, none of the components' utility classes (colors, spacing, radii) resolve to real CSS. Both presets are needed: bundyPreset() supplies only the theme, while the utilities the components are built from — flex , gap-md , text-lg — come from presetWind3() . See Theming for what the preset provides and how to override colors.

uno.config.ts
ts
import { defineConfig, presetWind3 } from "unocss";
import { bundyPreset } from "@jgastager/bundy-ui/preset";

export default defineConfig({
  presets: [presetWind3(), bundyPreset()],
});

That's it

Every component is auto-imported under a Ui prefix — no manual imports needed.

html
<UiButton color="primary">Click me</UiButton>

To change a default (colors, or a component's default props) across your whole project, see Theming — there's no need to fork or edit the package itself.

Charts are a separate module

Everything above installs the 95 base components. The chart components — LineChart , BarChart , DonutChart and twelve more — need one extra module entry, because they safelist a few hundred paint classes that a project drawing no charts shouldn't carry. There's nothing extra to install. See Charts for that setup; skip it entirely if you don't need them.

Options

Option
Type
Description
prefix
"Ui"
Prefix applied to auto-imported components, e.g. Ui -> <UiButton>.