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

cs-prime is available for download on npm registry.

# Using npm
npm install cs-prime

# Using yarn
yarn add cs-prime

Plugin

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

import { createApp } from 'vue';
import { CsPrime } from 'cs-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/cs-prime/**/*.{vue,js,ts,jsx,tsx}', //cs-prime
    ],
    theme: {
        extend: {
            colors: {
                'primary-50': 'rgb(var(--primary-50))',
                'primary-100': 'rgb(var(--primary-100))',
                'primary-200': 'rgb(var(--primary-200))',
                'primary-300': 'rgb(var(--primary-300))',
                'primary-400': 'rgb(var(--primary-400))',
                'primary-500': 'rgb(var(--primary-500))',
                'primary-600': 'rgb(var(--primary-600))',
                'primary-700': 'rgb(var(--primary-700))',
                'primary-800': 'rgb(var(--primary-800))',
                'primary-900': 'rgb(var(--primary-900))',
                'primary-950': 'rgb(var(--primary-950))',
                'surface-0': 'rgb(var(--surface-0))',
                'surface-50': 'rgb(var(--surface-50))',
                'surface-100': 'rgb(var(--surface-100))',
                'surface-200': 'rgb(var(--surface-200))',
                'surface-300': 'rgb(var(--surface-300))',
                'surface-400': 'rgb(var(--surface-400))',
                'surface-500': 'rgb(var(--surface-500))',
                'surface-600': 'rgb(var(--surface-600))',
                'surface-700': 'rgb(var(--surface-700))',
                'surface-800': 'rgb(var(--surface-800))',
                'surface-900': 'rgb(var(--surface-900))',
                'surface-950': 'rgb(var(--surface-950))'
            }
        }
    }
    ...
}

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 {
  --primary-50: 239 246 255;
  --primary-100: 219 234 254;
  --primary-200: 191 219 254;
  --primary-300: 147 197 253;
  --primary-400: 96 165 250;
  --primary-500: 59 130 246;
  --primary-600: 37 99 235;
  --primary-700: 29 78 216;
  --primary-800: 30 64 175;
  --primary-900: 30 58 138;
  --primary-950: 23 37 84;

  --surface-0: 255 255 255;
  --surface-50: 249 250 251;
  --surface-100: 243 244 246;
  --surface-200: 229 231 235;
  --surface-300: 209 213 219;
  --surface-400: 156 163 175;
  --surface-500: 107 114 128;
  --surface-600: 75 85 99;
  --surface-700: 55 65 81;
  --surface-800: 31 41 55;
  --surface-900: 17 24 39;
  --surface-950: 8 8 8;
}

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) => ['cs-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,
  AccordionTab,
  AutoComplete,
  Avatar,
  AvatarGroup,
  Badge,
  BadgeDirective,
  BlockUI,
  Breadcrumb,
  Button,
  Calendar,
  Card,
  Carousel,
  CascadeSelect,
  Checkbox,
  Chip,
  Chips,
  ColorPicker,
  Column,
  ColumnGroup,
  ConfirmationService,
  ConfirmDialog,
  ConfirmPopup,
  ContextMenu,
  CsPrime,
  DataTable,
  DataView,
  DataViewLayoutOptions,
  DeferredContent,
  Dialog,
  Divider,
  Dock,
  Dropdown,
  DynamicDialog,
  Fieldset,
  FileUpload,
  FloatLabel,
  Galleria,
  FocusTrap,
  Image,
  IconField,
  InlineMessage,
  Inplace,
  InputGroup,
  InputGroupAddon,
  InputIcon,
  InputMask,
  InputNumber,
  InputOtp,
  InputSwitch,
  InputText,
  Knob,
  Listbox,
  MegaMenu,
  Menu,
  Menubar,
  Message,
  MeterGroup,
  MultiSelect,
  OrderList,
  OrganizationChart,
  OverlayPanel,
  Paginator,
  Panel,
  Password,
  PickList,
  Preset,
  ProgressBar,
  ProgressSpinner,
  RadioButton,
  Rating,
  Ripple,
  Row,
  SelectButton,
  ScrollPanel,
  ScrollTop,
  Sidebar,
  Skeleton,
  Slider,
  SpeedDial,
  SplitButton,
  Splitter,
  SplitterPanel,
  Stepper,
  StepperPanel,
  Steps,
  StyleClass,
  TabMenu,
  TieredMenu,
  TabPanel,
  TabView,
  Tag,
  Terminal,
  Textarea,
  Timeline,
  Toast,
  ToastService,
  ToggleButton,
  Toolbar,
  Tooltip,
  Tree,
  TreeSelect,
  TreeTable,
  TriStateCheckbox,
  VirtualScroller,
} from 'cs-prime';

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

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

app.component('Accordion', Accordion);
app.component('AccordionTab', AccordionTab);
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('Calendar', Calendar);
app.component('Card', Card);
app.component('Carousel', Carousel);
app.component('CascadeSelect', CascadeSelect);
app.component('Checkbox', Checkbox);
app.component('Chip', Chip);
app.component('Chips', Chips);
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('DataViewLayoutOptions', DataViewLayoutOptions);
app.component('DeferredContent', DeferredContent);
app.component('Dialog', Dialog);
app.component('Divider', Divider);
app.component('Dock', Dock);
app.component('Dropdown', Dropdown);
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('InlineMessage', InlineMessage);
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('InputSwitch', InputSwitch);
app.component('InputText', InputText);
app.component('Listbox', Listbox);
app.component('Knob', Knob);
app.component('MegaMenu', MegaMenu);
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('OverlayPanel', OverlayPanel);
app.component('Paginator', Paginator);
app.component('Panel', Panel);
app.component('Password', Password);
app.component('PickList', PickList);
app.component('ProgressBar', ProgressBar);
app.component('ProgressSpinner', ProgressSpinner);
app.component('RadioButton', RadioButton);
app.component('Rating', Rating);
app.component('Row', Row);
app.component('SelectButton', SelectButton);
app.component('Splitter', Splitter);
app.component('SplitterPanel', SplitterPanel);
app.component('ScrollPanel', ScrollPanel);
app.component('ScrollTop', ScrollTop);
app.component('Sidebar', Sidebar);
app.component('Skeleton', Skeleton);
app.component('Slider', Slider);
app.component('SpeedDial', SpeedDial);
app.component('SplitButton', SplitButton);
app.component('Stepper', Stepper);
app.component('StepperPanel', StepperPanel);
app.component('Steps', Steps);
app.component('TabMenu', TabMenu);
app.component('TieredMenu', TieredMenu);
app.component('TabPanel', TabPanel);
app.component('TabView', TabView);
app.component('Tag', Tag);
app.component('Textarea', Textarea);
app.component('Terminal', Terminal);
app.component('Timeline', Timeline);
app.component('Toast', Toast);
app.component('ToggleButton', ToggleButton);
app.component('Toolbar', Toolbar);
app.component('Tree', Tree);
app.component('TreeSelect', TreeSelect);
app.component('TreeTable', TreeTable);
app.component('TriStateCheckbox', TriStateCheckbox);
app.component('VirtualScroller', VirtualScroller);

Add icons support

cs-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>