BeCool UI

An AI-friendly, minimal, and customizable Vue 3 component library.

Installation

# pnpm
pnpm add becool-ui

# npm
npm i becool-ui

# yarn
yarn add becool-ui

Requirements

• Vue.js v3.x
• Tailwind CSS v4.x

Do I Need app.use()?

• Not required, but recommended once at app entry: app.use(BeCoolUI).
• If you use components that auto-install dependencies (e.g. Modal), app.use(BeCoolUI) is recommended.

Global Styles

Import in your app's main CSS (Tailwind CSS v4):

@import "tailwindcss";
@import "becool-ui/index.css";
@source "../node_modules/becool-ui";

@source is relative to the CSS file location. Adjust the path to match your project structure.

Minimal Example

main.ts:

import { createApp } from 'vue'
import BeCoolUI from 'becool-ui'
import App from './App.vue'

createApp(App).use(BeCoolUI).mount('#app')

App.vue:

<script setup lang="ts">
import { BcButton } from 'becool-ui'
</script>

<template>
  <bc-button type="primary">
    Click me
  </bc-button>
</template>

Styling (ui)

Components support per-instance style overrides via the ui prop (mapped to theme.ts slots). Use browser DevTools to inspect data-bc-ui and find slot names.

<bc-button
  :ui="{
    base: 'bg-black text-white'
  }"
  type="primary">
  Click me
</bc-button>

For global overrides, use bc-provider:

<script setup lang="ts">
import { BcProvider } from 'becool-ui'
</script>

<template>
  <bc-provider :ui="{ button: { base: 'bg-black text-white' } }">
    <slot />
  </bc-provider>
</template>

AI Metadata

For AI/tools in another project, load node_modules/becool-ui/ai/manifest.json first.

Loading strategy (on-demand, not all at once):

| Task | Primary file | Notes | |------|--------------|-------| | Component selection | AI.md | Flow authority: decision trees, task flow, Quick Start Templates | | API lookup (props/emits/slots) | components.json | Fact authority: examples are component-level runnable code | | Styling/theming | styling.json | Tokens, state variants, ui overrides | | Formatter utilities | utils.json | Public formatter functions |

Rules:

1. AI.md is the flow authority — use for task guidance, component selection, troubleshooting, scenario templates.
2. components.json is the fact authority — use for API details, examples are runnable code.
3. Load files on-demand based on task type, not all at once.
4. MUST NOT assume anything not covered by these files.
5. If info is missing or conflicts, MUST ask before proceeding.