Overview
Components
The @bcc-code/component-library-vue package provides wrapped PrimeVue components and custom BCC components. All components can be previewed in Storybook.
npm install @bcc-code/component-library-vueWrapped Components
These wrap PrimeVue components with additional features like Vue component icons, context-aware styling, and simplified APIs.
| Component | Description | Links |
|---|---|---|
| BccButton | Actions and navigation | Storybook · PrimeVue |
| BccCheckbox | Binary selection control | Storybook · PrimeVue |
| BccInput | Single-line text input | Storybook · PrimeVue |
| BccMessage | Inline notification message | Storybook · PrimeVue |
| BccAvatar | User or entity representation | Storybook · PrimeVue |
| BccChip | Compact element for tags/contacts | Storybook · PrimeVue |
| BccTabs | Tabbed content navigation | Storybook · PrimeVue |
| BccToggle | On/off toggle control | Storybook · PrimeVue |
| BccToggleButton | Toggle button with labels | Storybook · PrimeVue |
Custom Components
Purpose-built components not available in PrimeVue.
| Component | Description | Storybook |
|---|---|---|
| BccBadge | Context-aware badge with semantic colors | Preview |
| BccCapacityIndicator | Visual capacity/usage indicator | Preview |
| BccDialKnob | Rotary dial input control | Preview |
| BccFrame | Styled content frame/container | Preview |
| BccGraphic | Decorative graphic element | Preview |
| BccNpsResult | NPS survey result visualization | Preview |
| BccNpsScore | NPS score input widget | Preview |
| BccStepIndicator | Multi-step progress indicator | Preview |
| BccTag | Semantic tag with context colors | Preview |
| BccCircleLoader | Circular loading spinner | — |
| BccReact | Emoji reaction component | — |
More PrimeVue Components
The BCC design tokens preset (@bcc-code/design-tokens/primevue) automatically styles all PrimeVue components. You don't need the component library for these — just use PrimeVue directly.
Browse the full PrimeVue component catalog at primevue.org. See how they look with BCC tokens in Storybook.
Components with Storybook previews include: Accordion, AutoComplete, Breadcrumb, Card, DataTable, DatePicker, Dialog, Divider, Drawer, Fieldset, InputNumber, Listbox, Menu, MultiSelect, OverlayBadge, Paginator, Panel, Password, ProgressBar, ProgressSpinner, RadioButton, Rating, Select, SelectButton, Skeleton, Slider, Splitter, Tabs, Textarea, Timeline, Toast, Toolbar, Tooltip, Tree, TreeSelect.