CS Prime Components

CS Prime Components is a comprehensive Vue UI library that extends the capabilities of the PrimeVue framework, tailored for modern web development with a keen focus on integrating seamlessly with Tailwind CSS. It's designed for developers seeking to enhance their Vue.js applications with high-quality, customizable UI components while leveraging the utility-first CSS framework for styling.

Installation with Vite

Setting up C-Suite prime components and Tailwind CSS in a Vite project.

Tailwind CSS

The prerequisite steps are covered by the Install Tailwind CSS with Vite guide. If you have Vite and Tailwind configured successfully, follow the next steps.

Download

cc-prime is available for download on npm registry.

# Using npm
npm install cc-prime

# Using yarn
yarn add cc-prime

Plugin

cc-prime needs to be configured as a Vue plugin.

import { createApp } from 'vue';
import { CsPrime } from 'cc-prime';

const app = createApp(App);
app.use(CsPrime, {
    unstyled: true
});

Tailwind Config

The built-in presets utilize an extended color palette based on CSS variables that needs to be defined as a Tailwind theme config extension

export default {
    ...
    darkMode: 'class',
    content: [
         './index.html',
         './src/**/*.{vue,js,ts,jsx,tsx}',
         './node_modules/cc-prime/**/*.{vue,js,ts,jsx,tsx}', //cc-prime
    ],
    theme: {
      screens: {
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
        '2xl': '1920px',
      },
    },
    ...
}

CSS Variables

Add the default values for the colors in RGB format, this can be done in a global CSS file in your Vite application e.g. src/style.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --p-primary-50: #e6ecf2;
  --p-primary-100: #cdd8e5;
  --p-primary-200: #9bb0cb;
  --p-primary-300: #6989b0;
  --p-primary-400: #466386;
  --p-primary-500: #2c3e54;
  --p-primary-600: #27374a;
  --p-primary-700: #212f40;
  --p-primary-800: #1c2836;
  --p-primary-900: #17202c;
  --p-primary-950: #141d27;

  --p-surface-0: #ffffff;
  --p-surface-50: #fafafa;
  --p-surface-100: #f4f4f5;
  --p-surface-200: #e4e4e7;
  --p-surface-300: #d4d4d8;
  --p-surface-400: #a1a1aa;
  --p-surface-500: #71717a;
  --p-surface-600: #52525b;
  --p-surface-700: #3f3f46;
  --p-surface-800: #27272a;
  --p-surface-900: #18181b;
  --p-surface-950: #121213;

  --p-primary-color: var(--p-primary-500);
  --p-primary-contrast-color: var(--p-surface-0);
  --p-primary-hover-color: var(--p-primary-600);
  --p-primary-active-color: var(--p-primary-700);
  --p-content-border-color: var(--p-surface-200);
  --p-content-hover-background: var(--p-surface-100);
  --p-content-hover-color: var(--p-surface-800);
  --p-highlight-background: var(--p-primary-50);
  --p-highlight-color: var(--p-primary-700);
  --p-highlight-focus-background: var(--p-primary-50);
  --p-highlight-focus-color: var(--p-primary-800);
  --p-text-color: var(--p-surface-700);
  --p-text-hover-color: var(--p-surface-800);
  --p-text-muted-color: var(--p-surface-500);
  --p-text-hover-muted-color: var(--p-surface-600);
}

Update vite config

Final step is to update the vite config in vite.config.js

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['cc-prime'].includes(tag),
        },
      },
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

Using components and directives

To use components and directives, update the main.js as follows and then use in the vue components.

import {
  AnimateOnScroll,
  Accordion,
  AccordionContent,
  AccordionHeader,
  AccordionPanel,
  AutoComplete,
  Avatar,
  AvatarGroup,
  Badge,
  BlockUI,
  Breadcrumb,
  Button,
  Card,
  Carousel,
  CascadeSelect,
  Checkbox,
  Chip,
  ColorPicker,
  Column,
  ColumnGroup,
  ConfirmationService,
  ConfirmDialog,
  ConfirmPopup,
  ContextMenu,
  CsPrime,
  DataTable,
  DataView,
  DatePicker,
  DeferredContent,
  Dialog,
  DialogService,
  Divider,
  Dock,
  Drawer,
  DynamicDialog,
  Fieldset,
  FileUpload,
  FloatLabel,
  Galleria,
  FocusTrap,
  Image,
  IconField,
  Inplace,
  InputGroup,
  InputGroupAddon,
  InputIcon,
  InputMask,
  InputNumber,
  InputOtp,
  InputText,
  Knob,
  Listbox,
  Menu,
  Menubar,
  Message,
  MeterGroup,
  MultiSelect,
  OrderList,
  OrganizationChart,
  OverlayBadge,
  Paginator,
  Panel,
  Password,
  PickList,
  Preset,
  Popover,
  ProgressBar,
  ProgressSpinner,
  RadioButton,
  Rating,
  Ripple,
  Row,
  Select,
  SelectButton,
  ScrollPanel,
  ScrollTop,
  Skeleton,
  Slider,
  SpeedDial,
  SplitButton,
  Splitter,
  SplitterPanel,
  Step,
  StepItem,
  StepList,
  StepPanel,
  StepPanels,
  Stepper,
  StyleClass,
  TieredMenu,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  Tag,
  Terminal,
  Textarea,
  Timeline,
  Toast,
  ToastService,
  ToggleButton,
  ToggleSwitch,
  Toolbar,
  Tooltip,
  Tree,
  TreeSelect,
  TreeTable,
  VirtualScroller,
} from 'cc-prime';

app.use(CsPrime, { ripple: true, unstyled: true, pt: Preset });
app.use(ConfirmationService);
app.use(DialogService);
app.use(ToastService);

app.directive('animateonscroll', AnimateOnScroll);
app.directive('focustrap', FocusTrap);
app.directive('ripple', Ripple);
app.directive('styleclass', StyleClass);
app.directive('tooltip', Tooltip);

app.component('Accordion', Accordion);
app.component('AccordionContent', AccordionContent);
app.component('AccordionHeader', AccordionHeader);
app.component('AccordionPanel', AccordionPanel);
app.component('AutoComplete', AutoComplete);
app.component('Avatar', Avatar);
app.component('AvatarGroup', AvatarGroup);
app.component('Badge', Badge);
app.component('BlockUI', BlockUI);
app.component('Breadcrumb', Breadcrumb);
app.component('Button', Button);
app.component('Card', Card);
app.component('Carousel', Carousel);
app.component('CascadeSelect', CascadeSelect);
app.component('Checkbox', Checkbox);
app.component('Chip', Chip);
app.component('ColorPicker', ColorPicker);
app.component('Column', Column);
app.component('ColumnGroup', ColumnGroup);
app.component('ConfirmDialog', ConfirmDialog);
app.component('ConfirmPopup', ConfirmPopup);
app.component('ContextMenu', ContextMenu);
app.component('DataTable', DataTable);
app.component('DataView', DataView);
app.component('DatePicker', DatePicker);
app.component('DeferredContent', DeferredContent);
app.component('Dialog', Dialog);
app.component('Divider', Divider);
app.component('Dock', Dock);
app.component('Drawer', Drawer);
app.component('DynamicDialog', DynamicDialog);
app.component('Fieldset', Fieldset);
app.component('FileUpload', FileUpload);
app.component('FloatLabel', FloatLabel);
app.component('Galleria', Galleria);
app.component('Image', Image);
app.component('IconField', IconField);
app.component('Inplace', Inplace);
app.component('InputGroup', InputGroup);
app.component('InputGroupAddon', InputGroupAddon);
app.component('InputIcon', InputIcon);
app.component('InputMask', InputMask);
app.component('InputNumber', InputNumber);
app.component('InputOtp', InputOtp);
app.component('InputText', InputText);
app.component('Listbox', Listbox);
app.component('Knob', Knob);
app.component('Menu', Menu);
app.component('Menubar', Menubar);
app.component('Message', Message);
app.component('MeterGroup', MeterGroup);
app.component('MultiSelect', MultiSelect);
app.component('OrderList', OrderList);
app.component('OrganizationChart', OrganizationChart);
app.component('OverlayBadge', OverlayBadge);
app.component('Paginator', Paginator);
app.component('Panel', Panel);
app.component('Password', Password);
app.component('PickList', PickList);
app.component('Popover', Popover);
app.component('ProgressBar', ProgressBar);
app.component('ProgressSpinner', ProgressSpinner);
app.component('RadioButton', RadioButton);
app.component('Rating', Rating);
app.component('Row', Row);
app.component('ScrollPanel', ScrollPanel);
app.component('ScrollTop', ScrollTop);
app.component('Select', Select);
app.component('SelectButton', SelectButton);
app.component('Skeleton', Skeleton);
app.component('Slider', Slider);
app.component('SpeedDial', SpeedDial);
app.component('Splitter', Splitter);
app.component('SplitterPanel', SplitterPanel);
app.component('SplitButton', SplitButton);
app.component('Step', Step);
app.component('StepItem', StepItem);
app.component('StepList', StepList);
app.component('StepPanel', StepPanel);
app.component('StepPanels', StepPanels);
app.component('Stepper', Stepper);
app.component('Tab', Tab);
app.component('TabList', TabList);
app.component('TabPanel', TabPanel);
app.component('TabPanels', TabPanels);
app.component('Tabs', Tabs);
app.component('Tag', Tag);
app.component('Textarea', Textarea);
app.component('TieredMenu', TieredMenu);
app.component('Terminal', Terminal);
app.component('TieredMenu', TieredMenu);
app.component('Timeline', Timeline);
app.component('Toast', Toast);
app.component('ToggleButton', ToggleButton);
app.component('Toolbar', Toolbar);
app.component('ToggleSwitch', ToggleSwitch);
app.component('Tree', Tree);
app.component('TreeSelect', TreeSelect);
app.component('TreeTable', TreeTable);
app.component('VirtualScroller', VirtualScroller);

Add icons support

cc-prime supports All popular icon sets, one framework. Over 200,000 open source vector icons using iconify

# Using npm
npm install -D @iconify/tailwind @iconify/json

# Using yarn
yarn add -D @iconify/tailwind @iconify/json

Update tailwind.config.js as follows,

const { addDynamicIconSelectors } = require('@iconify/tailwind');

export default {
  ...
  plugins: [
    ...
      // Iconify plugin
      addDynamicIconSelectors({ scale: 1 }`),
    ...
  ],
  ...
}

Usage

<span class="icon-[ph--alarm-duotone]"></span>
<span class="icon-[fluent-emoji-flat--alarm-clock]"></span>
<span class="icon-[carbon--edit-off]"></span>

 <SplitButton
    ...
    icon="icon-[ph--alarm-duotone]"
    ...
  ></SplitButton>