Cream Vue UI

A beautiful and functional UI component library for Vue 3, written in JavaScript.

Features

• 🎨 Beautiful Design: Modern and clean design with a focus on aesthetics
• 🧩 Modular Components: Use only what you need
• 🔌 Easy to Use: Simple API with consistent patterns
• 📱 Responsive: Works on all screen sizes
• 🔧 Customizable: Easily adapt to your brand with CSS variables
• 🚀 Lightweight: Minimal footprint for optimal performance

Installation

# npm
npm install cream-vue-ui

# yarn
yarn add cream-vue-ui

# pnpm
pnpm add cream-vue-ui

Usage

Global Registration

import { createApp } from 'vue'
import App from './App.vue'

// Import Cream Vue UI
import CreamVueUI from 'cream-vue-ui'
import 'cream-vue-ui/style'

// Create app and use Cream Vue UI
const app = createApp(App)
app.use(CreamVueUI)
app.mount('#app')

Individual Component Registration

import { createApp } from 'vue'
import App from './App.vue'

// Import individual components
import { Button, Input } from 'cream-vue-ui'
import 'cream-vue-ui/style'

// Create app and register components
const app = createApp(App)
app.component('CButton', Button)
app.component('CInput', Input)
app.mount('#app')

Direct Usage in Components

<script>
import { Button, Input } from 'cream-vue-ui'
import 'cream-vue-ui/style'

export default {
  components: {
    CButton: Button,
    CInput: Input
  }
}
</script>

<template>
  <CButton>Click Me</CButton>
  <CInput placeholder="Enter your name" />
</template>

Components

Button

A versatile and beautiful button component with various styles, states, and interactive features.

Basic Usage

<template>
  <!-- Basic usage -->
  <CButton>Default Button</CButton>
</template>

Button Variants

<template>
  <!-- Standard Variants -->
  <CButton variant="primary">Primary</CButton>
  <CButton variant="secondary">Secondary</CButton>
  <CButton variant="success">Success</CButton>
  <CButton variant="warning">Warning</CButton>
  <CButton variant="error">Error</CButton>
  <CButton variant="info">Info</CButton>
  
  <!-- Special Variants -->
  <CButton variant="outline">Outline</CButton>
  <CButton variant="text">Text</CButton>
  <CButton variant="glass">Glass</CButton>
  <CButton variant="soft">Soft</CButton>
</template>

Button Sizes

<template>
  <CButton size="xs">Extra Small</CButton>
  <CButton size="sm">Small</CButton>
  <CButton size="md">Medium</CButton> <!-- Default -->
  <CButton size="lg">Large</CButton>
  <CButton size="xl">Extra Large</CButton>
</template>

Button States

<template>
  <!-- Disabled state -->
  <CButton disabled>Disabled Button</CButton>
  
  <!-- Loading states with different animations -->
  <CButton loading>Loading (Spinner)</CButton>
  <CButton loading loadingType="dots">Loading Dots</CButton>
  <CButton loading loadingType="pulse">Loading Pulse</CButton>
</template>

Icons and Positioning

<template>
  <!-- Icon on the left (default) -->
  <CButton icon="🚀">Left Icon</CButton>
  
  <!-- Icon on the right -->
  <CButton icon="🔍" iconPosition="right">Right Icon</CButton>
  
  <!-- Icon-only buttons -->
  <CButton icon="❤️" iconOnly></CButton>
  <CButton icon="🔔" iconOnly rounded></CButton>
</template>

Tooltips

<template>
  <!-- Button with tooltip -->
  <CButton tooltip="This is a helpful tooltip">Hover Me</CButton>
  
  <!-- Icon button with tooltip -->
  <CButton icon="❤️" iconOnly tooltip="Add to favorites"></CButton>
</template>

Elevation Levels

<template>
  <CButton elevation="none">No Shadow</CButton>
  <CButton elevation="sm">Small Shadow</CButton>
  <CButton elevation="md">Medium Shadow</CButton> <!-- Default -->
  <CButton elevation="lg">Large Shadow</CButton>
  <CButton elevation="xl">Extra Large Shadow</CButton>
</template>

Special Features

<template>
  <!-- Full width button -->
  <CButton block>Block Button</CButton>
  
  <!-- Rounded button -->
  <CButton rounded>Rounded Button</CButton>
  
  <!-- Combining multiple features -->
  <CButton 
    variant="glass" 
    icon="✨" 
    iconPosition="right" 
    rounded 
    elevation="lg"
    tooltip="Special glass button"
  >
    Glass Button
  </CButton>
</template>

Props Reference

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | String | 'primary' | Button style variant (primary, secondary, success, warning, error, info, outline, text, glass, soft) | | size | String | 'md' | Button size (xs, sm, md, lg, xl) | | disabled | Boolean | false | Disables the button | | loading | Boolean | false | Shows a loading indicator | | loadingType | String | 'spinner' | Type of loading animation (spinner, dots, pulse) | | block | Boolean | false | Makes the button full width | | rounded | Boolean | false | Makes the button fully rounded | | icon | String | '' | Icon to display (emoji or icon font) | | iconPosition | String | 'left' | Position of the icon (left, right) | | iconOnly | Boolean | false | Creates an icon-only button | | tooltip | String | '' | Tooltip text to display on hover | | elevation | String | 'md' | Shadow elevation level (none, sm, md, lg, xl) |

Input

A flexible and beautiful input component with various styles, states, and interactive features.

Basic Usage

<template>
  <!-- Basic usage -->
  <CInput placeholder="Enter text" />
  
  <!-- With label -->
  <CInput label="Username" placeholder="Enter username" />
</template>

Input Variants

<template>
  <!-- Default variant -->
  <CInput label="Default" placeholder="Default variant" variant="default" />
  
  <!-- Outlined variant -->
  <CInput label="Outlined" placeholder="Outlined variant" variant="outlined" />
  
  <!-- Filled variant -->
  <CInput label="Filled" placeholder="Filled variant" variant="filled" />
  
  <!-- Underlined variant -->
  <CInput label="Underlined" placeholder="Underlined variant" variant="underlined" />
</template>

Floating Labels

<template>
  <!-- Floating label (default variant) -->
  <CInput label="Floating Label" placeholder="Type something" floatingLabel />
  
  <!-- Floating label with outlined variant -->
  <CInput 
    label="Floating Outlined" 
    placeholder="Type something" 
    floatingLabel 
    variant="outlined" 
  />
  
  <!-- Floating label with filled variant -->
  <CInput 
    label="Floating Filled" 
    placeholder="Type something" 
    floatingLabel 
    variant="filled" 
  />
</template>

Input Types

<template>
  <!-- Text input (default) -->
  <CInput type="text" label="Text" placeholder="Enter text" />
  
  <!-- Password input -->
  <CInput type="password" label="Password" placeholder="Enter password" />
  
  <!-- Email input -->
  <CInput type="email" label="Email" placeholder="Enter email" />
  
  <!-- Number input -->
  <CInput type="number" label="Number" placeholder="Enter number" />
  
  <!-- Other supported types: tel, url, search, date, time, datetime-local, month, week -->
</template>

Icons and Addons

<template>
  <!-- Left icon (default) -->
  <CInput label="Left Icon" placeholder="Search..." icon="🔍" />
  
  <!-- Right icon -->
  <CInput 
    label="Right Icon" 
    placeholder="Enter email" 
    icon="📧" 
    iconPosition="right" 
  />
  
  <!-- With prefix -->
  <CInput label="With Prefix" placeholder="Enter amount" prefix="$" />
  
  <!-- With suffix -->
  <CInput label="With Suffix" placeholder="Enter weight" suffix="kg" />
</template>

Character Count

<template>
  <!-- With character count -->
  <CInput 
    label="With Character Count" 
    placeholder="Limited to 20 characters" 
    maxLength="20" 
    showCount 
  />
</template>

Sizes

<template>
  <CInput label="Extra Small" placeholder="XS size" size="xs" />
  <CInput label="Small" placeholder="Small size" size="sm" />
  <CInput label="Medium" placeholder="Medium size" size="md" /> <!-- Default -->
  <CInput label="Large" placeholder="Large size" size="lg" />
  <CInput label="Extra Large" placeholder="XL size" size="xl" />
</template>

Elevation Levels

<template>
  <CInput label="No Shadow" elevation="none" />
  <CInput label="Small Shadow" elevation="sm" />
  <CInput label="Medium Shadow" elevation="md" />
  <CInput label="Large Shadow" elevation="lg" />
  <CInput label="Extra Large Shadow" elevation="xl" />
</template>

Special Features

<template>
  <!-- Rounded input -->
  <CInput label="Rounded Input" placeholder="With rounded corners" rounded />
  
  <!-- Clearable input -->
  <CInput label="Clearable Input" placeholder="Type to see clear button" clearable />
  
  <!-- Autofocus input -->
  <CInput label="Autofocus Input" placeholder="Automatically focused" autofocus />
</template>

States

<template>
  <!-- Disabled state -->
  <CInput label="Disabled Input" disabled placeholder="This input is disabled" />
  
  <!-- Readonly state -->
  <CInput label="Readonly Input" readonly value="This input is readonly" />
  
  <!-- Error state -->
  <CInput 
    label="With Error" 
    error="This field is required" 
    placeholder="Enter value" 
  />
  
  <!-- Success state -->
  <CInput label="Success Input" success value="Correct value" />
</template>

Props Reference

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | String, Number | '' | The input value (use with v-model) | | type | String | 'text' | Input type (text, password, email, number, etc.) | | label | String | '' | Label text for the input | | placeholder | String | '' | Placeholder text | | variant | String | 'default' | Input style variant (default, outlined, filled, underlined) | | size | String | 'md' | Input size (xs, sm, md, lg, xl) | | disabled | Boolean | false | Disables the input | | readonly | Boolean | false | Makes the input readonly | | required | Boolean | false | Marks the input as required | | error | String | '' | Error message to display | | success | Boolean | false | Indicates success state | | icon | String | '' | Icon to display (emoji or icon font) | | iconPosition | String | 'left' | Position of the icon (left, right) | | clearable | Boolean | false | Adds a clear button when input has value | | floatingLabel | Boolean | false | Enables floating label animation | | rounded | Boolean | false | Makes the input fully rounded | | prefix | String | '' | Text to display before the input value | | suffix | String | '' | Text to display after the input value | | maxLength | Number | null | Maximum number of characters allowed | | showCount | Boolean | false | Shows character count when maxLength is set | | autofocus | Boolean | false | Automatically focuses the input on mount | | elevation | String | 'none' | Shadow elevation level (none, sm, md, lg, xl) |

Card

A versatile and beautiful card component with various styles, layouts, and interactive features.

Basic Usage

<template>
  <!-- Basic usage -->
  <CCard title="Card Title" subtitle="Card Subtitle">
    <p>This is the card content.</p>
  </CCard>
  
  <!-- With footer -->
  <CCard title="Card with Footer">
    <p>Card content goes here.</p>
    <template #footer>
      <CButton variant="primary">Action</CButton>
    </template>
  </CCard>
</template>

Card Variants

<template>
  <!-- Standard variants -->
  <CCard variant="default" title="Default Card">
    <p>Default variant card.</p>
  </CCard>
  
  <CCard variant="primary" title="Primary Card">
    <p>Primary variant card.</p>
  </CCard>
  
  <CCard variant="secondary" title="Secondary Card">
    <p>Secondary variant card.</p>
  </CCard>
  
  <!-- Color variants -->
  <CCard variant="success" title="Success Card">
    <p>Success variant card.</p>
  </CCard>
  
  <CCard variant="warning" title="Warning Card">
    <p>Warning variant card.</p>
  </CCard>
  
  <CCard variant="error" title="Error Card">
    <p>Error variant card.</p>
  </CCard>
  
  <CCard variant="info" title="Info Card">
    <p>Info variant card.</p>
  </CCard>
  
  <!-- Special variants -->
  <CCard variant="outline" title="Outline Card">
    <p>Outline variant card.</p>
  </CCard>
  
  <CCard variant="flat" title="Flat Card">
    <p>Flat variant card without shadows.</p>
  </CCard>
  
  <CCard variant="glass" title="Glass Card">
    <p>Glass variant card with backdrop blur effect.</p>
  </CCard>
</template>

Cards with Images

<template>
  <!-- Top image (default) -->
  <CCard 
    title="Top Image" 
    image="https://via.placeholder.com/300x200"
    imageAlt="Card image"
  >
    <p>Card with an image at the top.</p>
  </CCard>
  
  <!-- Bottom image -->
  <CCard 
    title="Bottom Image" 
    image="https://via.placeholder.com/300x200"
    imageAlt="Card image"
    imagePosition="bottom"
  >
    <p>Card with an image at the bottom.</p>
  </CCard>
  
  <!-- Background image -->
  <CCard 
    title="Background Image" 
    image="https://via.placeholder.com/300x200"
    imageAlt="Card image"
    imagePosition="background"
  >
    <p>Card with a background image.</p>
  </CCard>
  
  <!-- Image with overlay -->
  <CCard 
    title="Image with Overlay" 
    image="https://via.placeholder.com/300x200"
    imageAlt="Card image"
    imageOverlay
  >
    <p>Card with an image overlay effect.</p>
  </CCard>
</template>

Image Aspect Ratios

<template>
  <CCard 
    title="Square Image" 
    image="https://via.placeholder.com/300x300"
    imageAlt="Square image"
    imageAspectRatio="1:1"
  >
    <p>Card with a square image (1:1 ratio).</p>
  </CCard>
  
  <CCard 
    title="4:3 Ratio" 
    image="https://via.placeholder.com/400x300"
    imageAlt="4:3 image"
    imageAspectRatio="4:3"
  >
    <p>Card with a 4:3 aspect ratio image.</p>
  </CCard>
  
  <CCard 
    title="16:9 Ratio" 
    image="https://via.placeholder.com/400x225"
    imageAlt="16:9 image"
    imageAspectRatio="16:9"
  >
    <p>Card with a 16:9 aspect ratio image.</p>
  </CCard>
  
  <CCard 
    title="21:9 Ratio" 
    image="https://via.placeholder.com/420x180"
    imageAlt="21:9 image"
    imageAspectRatio="21:9"
  >
    <p>Card with a 21:9 aspect ratio image.</p>
  </CCard>
</template>

Horizontal Layout

<template>
  <!-- Horizontal card with left image -->
  <CCard 
    title="Left Image" 
    subtitle="Horizontal card with left image"
    image="https://via.placeholder.com/300x200"
    imageAlt="Left image"
    horizontal
    imagePosition="left"
  >
    <p>This is a horizontal card with an image on the left side.</p>
  </CCard>
  
  <!-- Horizontal card with right image -->
  <CCard 
    title="Right Image" 
    subtitle="Horizontal card with right image"
    image="https://via.placeholder.com/300x200"
    imageAlt="Right image"
    horizontal
    imagePosition="right"
  >
    <p>This is a horizontal card with an image on the right side.</p>
  </CCard>
</template>

Elevation Levels

<template>
  <CCard title="No Shadow" elevation="none">
    <p>Card with no shadow.</p>
  </CCard>
  
  <CCard title="Small Shadow" elevation="sm">
    <p>Card with small shadow.</p>
  </CCard>
  
  <CCard title="Medium Shadow" elevation="md">
    <p>Card with medium shadow.</p>
  </CCard>
  
  <CCard title="Large Shadow" elevation="lg">
    <p>Card with large shadow.</p>
  </CCard>
  
  <CCard title="Extra Large Shadow" elevation="xl">
    <p>Card with extra large shadow.</p>
  </CCard>
</template>

Border Radius Options

<template>
  <CCard title="No Radius" borderRadius="none">
    <p>Card with no border radius.</p>
  </CCard>
  
  <CCard title="Small Radius" borderRadius="sm">
    <p>Card with small border radius.</p>
  </CCard>
  
  <CCard title="Default Radius" borderRadius="default">
    <p>Card with default border radius.</p>
  </CCard>
  
  <CCard title="Large Radius" borderRadius="lg">
    <p>Card with large border radius.</p>
  </CCard>
  
  <CCard title="Extra Large Radius" borderRadius="xl">
    <p>Card with extra large border radius.</p>
  </CCard>
  
  <CCard title="Full Radius" borderRadius="full">
    <p>Card with fully rounded corners.</p>
  </CCard>
</template>

Interactive Cards

<template>
  <!-- Hover effect -->
  <CCard hover title="Hover Card">
    <p>This card has a hover effect. Try hovering over it!</p>
  </CCard>
  
  <!-- Clickable card -->
  <CCard clickable title="Clickable Card" @click="handleClick">
    <p>This card is clickable. Try clicking it!</p>
  </CCard>
  
  <!-- Gradient background -->
  <CCard variant="primary" gradient title="Gradient Card">
    <p>This card has a gradient background effect.</p>
  </CCard>
</template>

Props Reference

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | String | '' | Card title | | subtitle | String | '' | Card subtitle | | variant | String | 'default' | Card style variant (default, primary, secondary, success, warning, error, info, outline, flat, glass) | | size | String | 'md' | Card size (sm, md, lg, xl) | | image | String | '' | URL of the image to display | | imageAlt | String | 'Card image' | Alt text for the image | | imagePosition | String | 'top' | Position of the image (top, bottom, left, right, background) | | imageOverlay | Boolean | false | Adds an overlay gradient effect to the image | | imageAspectRatio | String | 'auto' | Aspect ratio of the image (auto, 1:1, 4:3, 16:9, 21:9) | | horizontal | Boolean | false | Makes the card layout horizontal | | hover | Boolean | false | Adds hover effect to the card | | clickable | Boolean | false | Makes the card clickable | | elevation | String | 'sm' | Shadow elevation level (none, sm, md, lg, xl) | | borderRadius | String | 'default' | Border radius size (none, sm, default, lg, xl, full) | | gradient | Boolean | false | Adds a gradient background effect |

Alert

A versatile and beautiful alert component with various styles, animations, and interactive features.

Basic Usage

<template>
  <!-- Basic usage -->
  <CAlert>This is a default info alert.</CAlert>
  
  <!-- With title -->
  <CAlert title="Alert Title">This is an alert with a title.</CAlert>
</template>

Alert Types

<template>
  <CAlert type="info" title="Info">This is an info alert.</CAlert>
  <CAlert type="success" title="Success">This is a success alert.</CAlert>
  <CAlert type="warning" title="Warning">This is a warning alert.</CAlert>
  <CAlert type="error" title="Error">This is an error alert.</CAlert>
</template>

Alert Variants

<template>
  <!-- Default variant -->
  <CAlert title="Default Variant" type="info" variant="default">
    This is the default variant of an alert.
  </CAlert>
  
  <!-- Filled variant -->
  <CAlert title="Filled Variant" type="success" variant="filled">
    This is a filled variant with solid background color.
  </CAlert>
  
  <!-- Soft variant -->
  <CAlert title="Soft Variant" type="warning" variant="soft">
    This is a soft variant with a subtle background color.
  </CAlert>
  
  <!-- Toast variant -->
  <CAlert title="Toast Variant" type="error" variant="toast">
    This is a toast notification variant.
  </CAlert>
</template>

Border Styles

<template>
  <CAlert title="Left Border" type="info" border="left">
    This alert has a left border.
  </CAlert>
  
  <CAlert title="Top Border" type="success" border="top">
    This alert has a top border.
  </CAlert>
  
  <CAlert title="Right Border" type="warning" border="right">
    This alert has a right border.
  </CAlert>
  
  <CAlert title="Bottom Border" type="error" border="bottom">
    This alert has a bottom border.
  </CAlert>
  
  <CAlert title="All Borders" type="info" border="all">
    This alert has borders on all sides.
  </CAlert>
</template>

Icon Positions

<template>
  <!-- Left icon (default) -->
  <CAlert title="Left Icon" type="info" iconPosition="left">
    This alert has an icon on the left.
  </CAlert>
  
  <!-- Right icon -->
  <CAlert title="Right Icon" type="success" iconPosition="right">
    This alert has an icon on the right.
  </CAlert>
  
  <!-- Top icon -->
  <CAlert title="Top Icon" type="warning" iconPosition="top">
    This alert has an icon at the top.
  </CAlert>
  
  <!-- Custom icon -->
  <CAlert title="Custom Icon" type="error" icon="🔔">
    This alert has a custom icon.
  </CAlert>
  
  <!-- No icon -->
  <CAlert title="No Icon" type="info" :showIcon="false">
    This alert has no icon.
  </CAlert>
</template>

Dismissible Alerts

<template>
  <!-- Dismissible alert -->
  <CAlert 
    title="Dismissible Alert" 
    type="info" 
    dismissible
    @dismiss="handleDismiss"
  >
    This alert can be dismissed by clicking the X button.
  </CAlert>
  
  <!-- With custom close icon -->
  <CAlert 
    title="Custom Close Icon" 
    type="warning" 
    closable
    closeIcon="✖"
    @dismiss="handleDismiss"
  >
    This alert has a custom close icon.
  </CAlert>
</template>

Auto-Close Alerts

<template>
  <!-- Auto-close after 5 seconds -->
  <CAlert 
    title="Auto-Close Alert" 
    type="info" 
    :autoClose="5000"
  >
    This alert will automatically close after 5 seconds.
  </CAlert>
</template>

Alerts with Actions

<template>
  <!-- With action buttons -->
  <CAlert 
    title="With Actions" 
    type="info"
    :actions="[
      { label: 'Confirm', variant: 'primary' },
      { label: 'Cancel', text: true }
    ]"
  >
    This alert has action buttons.
  </CAlert>
  
  <!-- With dismiss action -->
  <CAlert 
    title="Dismissible with Actions" 
    type="warning"
    :actions="[
      { label: 'Learn More', variant: 'primary' },
      { label: 'Dismiss', text: true, close: true }
    ]"
  >
    This alert has action buttons, including one that dismisses the alert.
  </CAlert>
</template>

Elevation Levels

<template>
  <CAlert title="No Shadow" type="info" elevation="none">
    This alert has no shadow.
  </CAlert>
  
  <CAlert title="Small Shadow" type="success" elevation="sm">
    This alert has a small shadow.
  </CAlert>
  
  <CAlert title="Medium Shadow" type="warning" elevation="md">
    This alert has a medium shadow.
  </CAlert>
  
  <CAlert title="Large Shadow" type="error" elevation="lg">
    This alert has a large shadow.
  </CAlert>
  
  <CAlert title="Extra Large Shadow" type="info" elevation="xl">
    This alert has an extra large shadow.
  </CAlert>
</template>

Sizes

<template>
  <CAlert title="Small Alert" type="info" size="sm">
    This is a small alert.
  </CAlert>
  
  <CAlert title="Medium Alert" type="success" size="md">
    This is a medium alert (default).
  </CAlert>
  
  <CAlert title="Large Alert" type="warning" size="lg">
    This is a large alert.
  </CAlert>
</template>

Special Styles

<template>
  <!-- Outlined style -->
  <CAlert title="Outlined Alert" type="info" outlined>
    This is an outlined alert.
  </CAlert>
  
  <!-- Non-rounded alert -->
  <CAlert title="Non-Rounded Alert" type="success" :rounded="false">
    This alert has no rounded corners.
  </CAlert>
  
  <!-- Toast positioning -->
  <CAlert 
    title="Top Right Toast" 
    type="info" 
    variant="toast" 
    position="top-right"
  >
    This is a toast notification positioned at the top right.
  </CAlert>
</template>

Props Reference

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | String | '' | Alert title | | type | String | 'info' | Alert type (info, success, warning, error) | | variant | String | 'default' | Alert style variant (default, filled, soft, toast) | | size | String | 'md' | Alert size (sm, md, lg) | | dismissible | Boolean | false | Makes the alert dismissible with a close button | | closable | Boolean | false | Alternative prop for dismissible (for consistency) | | closeIcon | String | '×' | Custom close button icon | | icon | String | '' | Custom icon to display | | showIcon | Boolean | true | Controls whether to show the icon | | iconPosition | String | 'left' | Position of the icon (left, right, top) | | border | String | 'none' | Border style (none, left, top, right, bottom, all) | | rounded | Boolean | true | Controls whether the alert has rounded corners | | outlined | Boolean | false | Makes the alert outlined instead of filled | | elevation | String | 'none' | Shadow elevation level (none, sm, md, lg, xl) | | autoClose | Number | 0 | Auto-close timeout in milliseconds (0 = disabled) | | actions | Array | [] | Array of action button objects | | position | String | 'static' | Position for toast notifications (static, top-right, top-left, bottom-right, bottom-left, top-center, bottom-center) |

License

MIT