Vue 3 Appsbd UI Library

A premium, reusable Vue 3 component library built for high-performance enterprise applications. Leverages Vite, SCSS, and Bootstrap 5 to provide a rich set of UI components with built-in Dark Mode and RTL support. version 1.0.8

🚀 Key Features

• Vue 3 Composition API: Optimized for performance and flexibility.
• Dynamic Theming: Full dark mode support using Bootstrap's data-bs-theme.
• RTL Ready: Built with CSS logical properties for global accessibility.
• Plugin System: custom-built global systems for Toasts and Alerts.
• Enterprise Ready: Includes complex components like MultiSelect, DatePicker, Wizard, Pricing Tables, and Filter Panels.
• Themable Skins: 10 prebuilt color skins (default, green, red, cyan, purple, violet, pink, orange, gray, black) shipped as standalone CSS under dist/skins/.

📦 Installation

npm install @appsbd/vue3-appsbd-ui

Peer Dependencies

Ensure you have the following installed in your project:

npm install bootstrap bootstrap-icons vee-validate @vee-validate/rules vue-router vue3-gettext @lucide/vue tiny-emitter @appsbd/vue3-elite-grid

🤖 AI Assistant Integration

Installing this library automatically copies AI skills into your project so Claude Code and Agent-based tools can generate correct component code without guessing props or imports.

What gets installed

Running npm install @appsbd/vue3-appsbd-ui copies the following automatically:

| Destination | Purpose | | --- | --- | | .claude/commands/ | Slash commands for Claude Code (/use-appsbd-ui, /generate-module) | | .claude/skills/ | Skills auto-detected by Claude Code | | .agent/workflows/ | Workflow commands for Agent-based tools | | .agent/skills/ | Skills for Agent-based tools |

Available slash commands

| Command | Description | | --- | --- | | /use-appsbd-ui | Loads component reference before generating any code — always run this first | | /generate-module | Scaffolds a full CRUD module (List + Form + Composable) for a given entity |

Example:

/generate-module

Module: Invoice
Fields:
- title (text, required)
- amount (number, required, min: 0)
- status (select: Draft | Sent | Paid, required)
- due_date (date)

API: /api/invoices
Output: src/modules/invoices/

Optional: enable additional AI tools

To also install skills for Cursor or Windsurf, pass APPSBD_AGENTS during install:

APPSBD_AGENTS=cursor npm install @appsbd/vue3-appsbd-ui
APPSBD_AGENTS=cursor,windsurf npm install @appsbd/vue3-appsbd-ui

Or run the setup script any time after install:

node node_modules/@appsbd/vue3-appsbd-ui/scripts/setup.js --cursor --windsurf

Manual reference

If you prefer not to use auto-installed skills, the reference files are included in the package:

• node_modules/@appsbd/vue3-appsbd-ui/AI_REF.md — compact component index (~500 tokens, start here)
• node_modules/@appsbd/vue3-appsbd-ui/AI_REFERENCE.md — full table with descriptions
• node_modules/@appsbd/vue3-appsbd-ui/.ai/ai_ref_[Name].md — per-component props/events/slots

Point your AI to read AI_REF.md first, then the specific .ai/ file for the component you need.

🛠️ Setup

Register the library and its styles in your main entry file (e.g., main.js):

import { createApp } from "vue";
import AppsbdUI from "@appsbd/vue3-appsbd-ui";
import "@appsbd/vue3-appsbd-ui/style.css";

const app = createApp(App);
app.use(AppsbdUI);
app.mount("#app");

Applying a Theme Skin (optional)

// Default skin
import "@appsbd/vue3-appsbd-ui/dist/skins/default.css";

// Or any other prebuilt skin
import "@appsbd/vue3-appsbd-ui/dist/skins/purple.css";

🧩 Core Components & Composables

Toast Notifications

The library includes a robust custom toast system with pause-on-hover and pause-on-focus-loss features.

import { useToast } from "@appsbd/vue3-appsbd-ui";
const { toast } = useToast();

toast.success("Changes saved!", { timeout: 3000 });
toast.error("An error occurred", { position: "top-center" });

Global Alerts

Integrated SweetAlert2 system focused on aesthetic consistency.

import { useAlert } from "@appsbd/vue3-appsbd-ui";
const { alert } = useAlert();

alert.success("Success!", "Your profile has been updated.");

Theme Management

Easily toggle between light and dark modes.

import { useTheme } from "@appsbd/vue3-appsbd-ui";
const { isDark, toggleTheme } = useTheme();

📚 Component Reference

| Component | Description | | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | AbAvatar | Profile imagery with status indicators and size variants. | | AbBadge | Labeling component for status and counts. | | AbButton | Highly customizable button with loading states. | | AbCard | Flexible container for grouped content (supports tile / item / insight variants via CSS classes). | | AbCarousel | Responsive carousel / slider. | | AbColorPicker | Visual color selection interface. | | AbConfirmPopover | Multi-step interactive popover for confirmations and async flows. | | AbCustomField | Base wrapper for creating custom form inputs. | | AbDarkModeToggler | One-click light/dark theme toggle. | | AbDateTimePicker | Full-featured date and time selection (powered by v-calendar). | | AbDropdown | Custom styled dropdown menus. | | AbEasyModal | Lightweight modal for simple dialogs. | | AbField | Generic form field wrapper with label / help / error slots. | | AbFileUploader | Drag-and-drop file upload interface. | | AbFilterPanel | Comprehensive filtering UI for data-heavy views. | | AbFormCheck / AbRadioInput | Standardized checkbox / radio controls. | | AbImageRadioInput | Radio group rendered as selectable image tiles. | | AbInputField | High-quality text input with validation/feedback. | | AbInputTag | Tagging / multiple-value input field. | | AbKbd / AbKbdGroup | Keyboard shortcut display primitives. | | AbModal | Sophisticated dialog system with transitions. | | AbMultiSelect | Advanced searchable multi-selection dropdown (built-in, replaces @vueform/multiselect). | | AbNavLink | Navigation link for sidebars and menus. | | AbNumberField | Numeric input with step controls. | | AbPinInput | Segmented OTP / PIN entry input. | | AbPopover | Floating popover powered by floating-vue. | | AbPricingCard / AbPricingContainer / AbPricingTable | Composable pricing-plan building blocks. | | AbProgressbar | Smooth, animated progress tracking. | | AbScrollbar | Styled custom scroll container. | | AbSettingsForm | Opinionated settings / preferences form layout. | | AbSidebar / AbSideMenuItem | Dynamic sidebar navigation components. | | AbSkeleton | Loading-state skeleton placeholders. | | AbSlider | Range selection slider for numerical values. | | AbTable | Data table with the project's default styling. | | AbTabs / AbTab | Responsive tabbed interface. | | AbToast | High-performance notification system. | | AbToggle | Accessible switch/toggle component. | | AbTooltip | Floating tooltip powered by floating-vue. | | AbWizard / AbWizardStep | Multi-step wizard flow. |

📄 License

MIT