### Install Content Studio UI with Yarn

Source: https://cs-ui-library.netlify.app/index

Installs the Content Studio UI library using Yarn. This is an alternative to npm for package management.

```bash
yarn add @contentStudio/ui
```

--------------------------------

### Install Content Studio UI with npm

Source: https://cs-ui-library.netlify.app/index

Installs the Content Studio UI library using npm. This is the first step to integrate the UI components into your project.

```bash
npm install @contentStudio/ui
```

--------------------------------

### Basic Card Example

Source: https://cs-ui-library.netlify.app/components/card

A fundamental example of a Card displaying an image, title, sale badge, description, and a call-to-action button. It utilizes Card sections and various styling props.

```vue
<template>
  <Card shadow="sm" padding="lg" radius="md" withBorder>
    <Card.Section>
      <img
        src="https://example.com/your-image.jpg"
        alt="Norway"
        class="w-full h-40 object-cover"
      />
    </Card.Section>

    <div class="flex justify-between items-center mt-4 mb-2">
      <h2 class="text-lg font-medium">Norway Fjord Adventures</h2>
      <Badge color="info">On Sale</Badge>
    </div>

    <p class="text-gray-600 text-sm mb-4">
      With Fjord Tours you can explore more of the magical fjord landscapes with tours and
      activities on and around the fjords of Norway
    </p>

    <Button color="primary" fullWidth>Book classic tour now</Button>
  </Card>
</template>

<script setup>
import { Card } from '@contentStudio/ui';
import { Badge } from '@contentStudio/ui';
import { Button } from '@contentStudio/ui';
</script>
```

--------------------------------

### Basic Drawer Usage Example

Source: https://cs-ui-library.netlify.app/components/drawer

A simple example showcasing the basic usage of the Drawer component. It includes a button to toggle the drawer and configures basic properties like title and onClose handler. The drawer contains sample content and a close button.

```vue
<template>
<Button @click="toggleDrawer">Open Drawer</Button>
<Drawer
:opened="opened"
:onClose="toggleDrawer"
title="Basic Drawer"
>
<div class="p-4">
<p>This is a basic drawer with default settings.</p>
<Button class="mt-4" @click="toggleDrawer">Close</Button>
</div>
</Drawer>
</template>
<script setup>
// Script setup for toggleDrawer functionality would be here
</script>
```

--------------------------------

### Avatar with Image Examples

Source: https://cs-ui-library.netlify.app/components/avatar

Provides examples of Avatar components displaying images using the 'src' prop, with variations in size and styling like 'outline'. Includes handling for potentially invalid image URLs.

```html
<Avatar 
src="https://i.pravatar.cc/300?img=2" 
alt="User 2"
size="lg"
color="primary"
/>
<Avatar 
src="https://i.pravatar.cc/300?img=3" 
alt="User 3"
size="lg"
variant="outline"
color="secondary"
/>
<Avatar 
src="invalid-image-url"
name="Fallback"

```

--------------------------------

### Basic TextInput Example

Source: https://cs-ui-library.netlify.app/components/input

Demonstrates a basic TextInput with a label, description, placeholder, and a pattern for validation. The pattern requires three letters.

```javascript
<TextInput
label="Input Label"
description="This is a description text"
placeholder="Type something..."
pattern="[A-Za-z]{3}"
title="Three letter country code"
/>
```

--------------------------------

### Basic ListItem Examples (Vue)

Source: https://cs-ui-library.netlify.app/components/list-item

Demonstrates the basic usage of the ListItem component in Vue. Includes examples for a regular, selected, and disabled list item. The ListItem component likely handles internal state management for selection and disabling.

```vue
<script setup lang="ts">
import { ListItem } from '@contentStudio/ui'
const handleClick = () => {
// Handle click event
}
</script>
<template>
<ListItem class="text-sm" @click="handleClick">
Regular list item
</ListItem>
<ListItem 
class="text-sm" 
:selected="true"
> 
Selected list item
</ListItem>
<ListItem 
class="text-sm" 
:disabled="true"
> 
Disabled list item
</ListItem>
</template>
```

--------------------------------

### Playground Badge Example - Vue

Source: https://cs-ui-library.netlify.app/components/badge

A basic example of the Badge component usage in a playground environment, demonstrating size and radius props in Vue.js.

```vue
<Badge
size="sm"
radius="full"
>
Badge
</Badge>
```

--------------------------------

### Basic SplitButton Usage Example

Source: https://cs-ui-library.netlify.app/components/split-button

Illustrates the fundamental structure of a SplitButton, including handling primary click events and rendering a dropdown menu with list items. This example uses Vue.js syntax.

```vue
<template>
<SplitButton @click="handleClick">
Split Button
<template #menu>
<div class="py-1">
<button
v-for="item in menuItems"
class="w-full text-left px-3 py-1 text-sm hover:bg-gray-100 rounded"
>
{{ item }}
</button>
</div>
</template>
</SplitButton>
</template>

<script setup lang="ts">
import { SplitButton } from '@d4interactive/design-system'
const menuItems = ['Edit', 'Duplicate', 'Archive', 'Delete']
const handleClick = () => {
// Handle main button click
}
const handleMenuItemClick = (item) => {
// Handle menu item click
}
</script>
```

--------------------------------

### Display Basic Toast Notifications

Source: https://cs-ui-library.netlify.app/components/toast

Provides examples of displaying different types of toast notifications: default, success, info, warning, and error. Each example uses the `cstuToast.show()` method with a specific message.

```javascript
import { cstuToast } from '@contentstudio/ui'
const showDefaultToast = () => {
cstuToast.show("This is a default toast notification!")
}
const showSuccessToast = () => {
cstuToast.success("Operation completed successfully!")
}
const showInfoToast = () => {
cstuToast.info("Here is some important information.")
}
const showWarningToast = () => {
cstuToast.warning("Please be cautious with this action.")
}
const showErrorToast = () => {
cstuToast.error("An error occurred during the process.")
}
```

--------------------------------

### HoverCard User Profile Example

Source: https://cs-ui-library.netlify.app/components/hover-card

A practical example showcasing the HoverCard used to display a user's profile information, including an avatar, name, role, and a short bio.

```html
<template>
<HoverCard>
<template #target>
<a href="#" class="text-blue-500 hover:underline">John Doe</a>
</template>
<template #dropdown>
<div class="p-4">
<div class="flex items-center space-x-4">
<Avatar />
<div>
<h3 class="text-lg font-medium">John Doe</h3>
<p class="text-sm text-gray-600">Frontend Developer</p>
</div>
</div>
<div class="mt-4 space-y-2">
<p class="text-sm text-gray-600">
Building beautiful user interfaces with Vue and Tailwind CSS.
</p>
<div class="flex items-center space-x-4 text-sm text-gray-500">
</div>
</div>
</div>
</template>
</HoverCard>
</template>
```

--------------------------------

### Runtime Theme Switching with useTheme

Source: https://cs-ui-library.netlify.app/theme-provider

Shows how to use the `useTheme` composable to access the current theme and dynamically update it at runtime. This example defines a function to switch to a 'vibrant' theme.

```javascript
import { useTheme } from '@contentstudio/ui'

const { theme, setTheme } = useTheme()

function switchToVibrantTheme() {
  setTheme({
    primary: '#8b5cf6',
    secondary: '#ec4899',
    success: '#06d6a0',
    warning: '#ffd23f',
    danger: '#f72585',
    info: '#4cc9f0'
  })
}
```

--------------------------------

### Setup Content Studio UI in main.ts

Source: https://cs-ui-library.netlify.app/index

Configures the Content Studio UI library by importing its CSS and mounting the Vue application. Ensure this is done in your main application entry file.

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import '@contentStudio/ui/dist/style.css'
const app = createApp(App)
app.mount('#app')
```

--------------------------------

### Alert with Icon Example (Vue)

Source: https://cs-ui-library.netlify.app/components/alert

Demonstrates how to include an icon within an Alert component, using the 'icon' slot. This example shows a success alert with a checkmark icon.

```vue
<template>
<Alert
title="Success"
message="Your changes have been saved successfully."
color="success"
variant="light"
radius="md"
>
<template #icon>
<component :is="CheckIcon" class="h-5 w-5" />
</template>
</Alert>
<Alert
title="Warning"
message="Please review your information before proceeding."
color="warning"
variant="light"
radius="md"
>
<template #icon>
<component :is="AlertTriangleIcon" class="h-5 w-5" />
</template>
</Alert>
<Alert
title="Error"
message="There was an error processing your request."
color="danger"
variant="light"
radius="md"
>
<template #icon>
<component :is="XCircleIcon" class="h-5 w-5" />
</template>
</Alert>
</template>

<script setup>
import { CheckIcon, AlertTriangleIcon, XCircleIcon } from 'lucide-vue-next';
</script>
```

--------------------------------

### Avatar Sizes Example

Source: https://cs-ui-library.netlify.app/components/avatar

Illustrates various sizes for the Avatar component, ranging from 'sm' to '5xl', using the 'size' prop. Each avatar displays initials.

```html
<Avatar size="sm" name="SM" />
<Avatar size="md" name="MD" />
<Avatar size="lg" name="LG" />
<Avatar size="xl" name="XL" />
<Avatar size="2xl" name="2XL" />
<Avatar size="3xl" name="3XL" />
<Avatar size="4xl" name="4XL" />
<Avatar size="5xl" name="5XL" />
```

--------------------------------

### Popover Basic Usage Example

Source: https://cs-ui-library.netlify.app/components/popover

Demonstrates the basic usage of the Popover component with a primary color, a title, and content. It includes a Button as the trigger.

```vue
<Popover
  color="primary"
  title="Popover Title"
  content="This is a popover with customizable options.">
  <template #trigger>
    <Button>Open Popover</Button>
  </template>
</Popover>
```

--------------------------------

### Basic Textarea Usage

Source: https://cs-ui-library.netlify.app/components/textarea

Shows a basic implementation of the Textarea component with a label and placeholder. This example illustrates the fundamental props for rendering a simple text input area.

```html
<Textarea
  v-model="value"
  label="Textarea label"
  placeholder="Type something here..."
/>
```

--------------------------------

### Polymorphic Card Example

Source: https://cs-ui-library.netlify.app/components/card

Demonstrates a Card component used as a link ('a' tag), allowing it to be clickable and navigate to a new tab. Includes an image, title, and description.

```vue
<template>
  <Card component="a" href="#" target="_blank" shadow="md" radius="md" withBorder>
    <div class="flex items-center">
      <div class="mr-4">
        <img
          src="https://example.com/your-image.jpg"
          alt="Article"
          class="w-16 h-16 object-cover rounded"
        />
      </div>
      <div>
        <h3 class="text-lg font-medium">Exploring the Norwegian Fjords</h3>
        <p class="text-gray-600 text-sm">
          Click this card to open article in new tab
        </p>
      </div>
    </div>
  </Card>
</template>

<script setup>
import { Card } from '@contentStudio/ui';
</script>
```

--------------------------------

### Nested Dropdown Example

Source: https://cs-ui-library.netlify.app/components/dropdown

Demonstrates the creation of a nested dropdown structure, allowing for hierarchical option menus. This example uses specific props like 'closeOnClick', 'parentPositionRelative', 'show-arrow', and 'unstyled' for fine-tuned control.

```html
<template>
<Dropdown>
<template #selected>More Options</template>
<DropdownItem>
Edit
</DropdownItem>
<DropdownItem>
Duplicate
</DropdownItem>
<DropdownItem :closeOnClick="false" class="!p-0" >
<Dropdown class="!w-full" placement="right" :parentPositionRelative="true" :show-arrow="false" :unstyled="true" buttonClasses="flex justify-between w-full">
<template #selected>
<div class="py-[5.5px] px-[10.5px] w-full flex justify-between items-center">
<span>Share</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</template>
<DropdownItem>Option 1</DropdownItem>
</Dropdown>
</DropdownItem>
</Dropdown>
</template>
```

--------------------------------

### Avatar with Images

Source: https://cs-ui-library.netlify.app/components/avatar

Examples of using the Avatar component with image sources.

```APIDOC
## Examples: With Images

```html
<Avatar 
  src="https://i.pravatar.cc/300?img=2" 
  alt="User 2"
  size="lg"
  color="primary"
/>
<Avatar 
  src="https://i.pravatar.cc/300?img=3" 
  alt="User 3"
  size="lg"
  variant="outline"
  color="secondary"
/>
<Avatar 
  src="invalid-image-url" 
  name="Fallback"
/>
```
```

--------------------------------

### Basic Avatar Usage

Source: https://cs-ui-library.netlify.app/components/avatar

Examples of basic Avatar component usage, including with images, initials, default placeholders, and custom content.

```APIDOC
## Examples: Basic Usage

### With Image
```html
<Avatar src="https://i.pravatar.cc/300?img=1" alt="User 1" size="xl" />
```

### With Initials
```html
<Avatar name="John Doe" size="xl" />
```

### Default Placeholder
```html
<Avatar alt="Default Avatar" size="xl" />
```

### Custom Content
```html
<Avatar size="xl">JD</Avatar>
```
```

--------------------------------

### HoverCard Basic Usage Example

Source: https://cs-ui-library.netlify.app/components/hover-card

Demonstrates the fundamental usage of the HoverCard component. It requires a target element and dropdown content to be slotted.

```html
<template>
<HoverCard>
<template #target>
<Button>Hover me</Button>
</template>
<template #dropdown>
<div class="px-3 py-2">
<h3 class="text-lg font-medium">Basic HoverCard</h3>
<p class="mt-1">This is a basic example of the HoverCard component.</p>
</div>
</template>
</HoverCard>
</template>
```

--------------------------------

### Avatar Variants Example

Source: https://cs-ui-library.netlify.app/components/avatar

Demonstrates different visual variants for the Avatar component: 'filled', 'light', 'outline', and 'gradient'. Each variant is shown with specific colors or gradient configurations.

```html
<Avatar variant="filled" name="JD" color="primary" />
<Avatar variant="light" name="JD" color="secondary" />
<Avatar variant="outline" name="JD" color="success" />
<Avatar 
variant="gradient" 
name="JD" 
:gradient="{ from: 'primary', to: 'secondary' }"
/>
```

--------------------------------

### Radio Component Playground Example (Vue.js)

Source: https://cs-ui-library.netlify.app/components/radio

Provides a basic Vue.js template demonstrating the usage of the Radio component within a playground environment. It shows how to bind the selected value using 'v-model'.

```html
<Radio
 v-model="selected"
 value="option1"
 label="Radio Option"
 />
```

--------------------------------

### Basic Chip Usage (Vue.js)

Source: https://cs-ui-library.netlify.app/components/chip

Provides examples of using the Chip component with basic labels and options for icons, closability, loading states, and disabled states.

```javascript
import { ref } from 'vue'
import { Chip } from '@contentstudio/ui'
const selected = ref(false)
</script>
<template>
<Chip
v-model="selected"
label="Basic chip"
/>
<Chip
v-model="selected"
label="With icon"
icon="i-heroicons-star"

```

--------------------------------

### Action Icon Common Use Cases

Source: https://cs-ui-library.netlify.app/components/action-icon

Provides examples of ActionIcon for common use cases, showcasing combinations of color, variant, and icon.

```vue
<template>
<ActionIcon color="primary" variant="subtle" iconName="Settings" />
<ActionIcon color="info" variant="light" iconName="Search" />
<ActionIcon color="danger" variant="outline" iconName="Trash2" />
<ActionIcon color="success" variant="filled" iconName="PenSquare" />
<ActionIcon color="warning" variant="light" iconName="Menu" />
</template>
<script setup>
import { ActionIcon } from '@d4interactive/design-system'

```

--------------------------------

### Avatar Group

Source: https://cs-ui-library.netlify.app/components/avatar

Examples of using the Avatar.Group component for displaying multiple avatars.

```APIDOC
## Examples: Avatar Group

### Default Group
```html
<Avatar.Group spacing="sm" hover>
  <Avatar 
    src="https://i.pravatar.cc/300?img=4" 
    alt="User 4" 
    radius="full" 
    color="primary" 
    variant="light"
    size="xl"
  />
  <Avatar 
    src="https://i.pravatar.cc/300?img=5" 
    alt="User 5" 
    radius="full" 
    color="danger" 
    variant="light"
    size="xl"
  />
  <!-- Add more avatars here -->
</Avatar.Group>
```

### With Social Media Icons (Example structure)
```html
<Avatar.Group>
  <!-- Add social media avatar icons here -->
</Avatar.Group>
```
```

--------------------------------

### Action Icon Loading States

Source: https://cs-ui-library.netlify.app/components/action-icon

Examples of ActionIcon component in a loading state, with options for customizing the loader's appearance.

```vue
<template>
<ActionIcon loading color="primary" iconName="Heart" />
<ActionIcon 
loading 
color="success"
:loader-props="{ color: 'light' }"
iconName="Heart"
/>
<ActionIcon 
loading 
variant="light"
color="warning"
iconName="Heart"
/>
</template>

```

--------------------------------

### Loader Component Examples (Vue.js)

Source: https://cs-ui-library.netlify.app/components/loader

Demonstrates the usage of the Loader component with different variants (oval, dots, bars) in a Vue.js template. Each variant is rendered to showcase its distinct style.

```html
<template>
<Loader variant="oval" />
<Loader variant="dots" />
<Loader variant="bars" />
</template>
```

--------------------------------

### ListItem with Custom Content (Vue)

Source: https://cs-ui-library.netlify.app/components/list-item

Shows how to use the ListItem component with custom content in Vue. This allows for more complex structures within each list item, such as including images, text, and other elements. The example highlights nesting elements within the ListItem.

```vue
<script setup lang="ts">
import { ListItem } from '@contentStudio/ui'
const handleClick = () => {
// Handle click event
}
</script>
<template>
<ListItem @click="handleClick">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
<span class="text-sm">A</span>
</div>
<div>
<div class="font-medium">Item Title</div>
<div class="text-gray-500">Description</div>
</div>
</div>
</ListItem>
<ListItem 
:selected="true"
>
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
<span class="text-sm">B</span>
</div>
<div>
<div class="font-medium">Selected Item</div>
<div class="text-gray-500">With description</div>
</div>
</div>
</ListItem>
</template>
```

--------------------------------

### Basic Radio Usage Example (Vue.js)

Source: https://cs-ui-library.netlify.app/components/radio

Illustrates the fundamental usage of the Radio component in a Vue.js application. It shows how to render multiple radio buttons and manage the selected state using 'v-model' and 'ref'.

```html
<template>
<Radio
 v-model="selected"
 value="option1"
 label="Basic Radio"
 />
<Radio
 v-model="selected"
 value="option2"
 label="Another Option"
 />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('')
</script>
```

--------------------------------

### Alert Variants Example (Vue)

Source: https://cs-ui-library.netlify.app/components/alert

Demonstrates how to use different variants of the Alert component: 'outline', 'filled', 'light', and 'gradient'. Each variant has a distinct visual style.

```vue
<template>
<Alert variant="outline" title="Default" message="Default variant alert" radius="md" />
<Alert variant="filled" title="Filled" message="Filled variant alert" radius="md" />
<Alert variant="light" title="Light" message="Light variant alert" radius="md" />
<Alert variant="gradient" title="Gradient" message="Gradient variant alert" radius="md" />
</template>
```

--------------------------------

### Basic Modal Usage

Source: https://cs-ui-library.netlify.app/components/modal

Shows a basic example of how to use the Modal component with a button to open it. It utilizes Vue's Composition API with `ref` for managing modal visibility.

```vue
<template>
<Button @click="isModalOpen = true">Open Basic Modal</Button>
<Modal
id="basic-modal"
v-model="isModalOpen"
title="Basic Modal"
content="This is a basic modal with default styling."
/>
</template>
<script setup>
import { ref } from 'vue'
import { Button, Modal } from '@contentstudio/ui'
const isModalOpen = ref(false)
</script>
```

--------------------------------

### Range Slider Example

Source: https://cs-ui-library.netlify.app/components/range-slider

Illustrates the basic usage of the RangeSlider component for selecting a range of values using dual thumbs.

```vue
<RangeSlider
  v-model="value"
  label="Dual Range Slider"
  description="Select a range between 0 and 100"
/>
```

--------------------------------

### Modal with Custom Buttons

Source: https://cs-ui-library.netlify.app/components/modal

Provides an example of customizing the OK and Cancel buttons of the Modal component by specifying text and color props.

```vue
<template>
<Button @click="isModalOpen = true">Open Custom Buttons Modal</Button>
<Modal
id="custom-buttons-modal"
v-model="isModalOpen"
title="Custom Buttons"
content="This modal has custom button text and colors."
okTitle="Save Changes"
cancelTitle="Discard"
okColor="success"
cancelColor="danger"
/>
</template>
<script setup>
import { ref } from 'vue'
import { Button, Modal } from '@contentstudio/ui'
const isModalOpen = ref(false)
</script>
```

--------------------------------

### Dialog Sizes

Source: https://cs-ui-library.netlify.app/components/dialog

Shows how to control the size of the dialog using the 'size' prop. This example displays a large dialog ('lg') suitable for more extensive content.

```html
<template>
<Dialog
v-model:opened="opened"
size="lg"
title="Large Dialog"
content="This is a large dialog with more space for content."
withDefaultActions
@close="opened = false"
/>
</template>
```

```javascript
import { ref } from 'vue'
import { Dialog } from '@contentstudio/ui'
const opened = ref(false)
```

--------------------------------

### Single Value Slider Example

Source: https://cs-ui-library.netlify.app/components/range-slider

Demonstrates the basic usage of the Slider component for selecting a single value within a defined range.

```vue
<Slider
  v-model="value"
  label="Single Value Slider"
  description="Select a single value between 0 and 100"
/>
```

--------------------------------

### Use Button Component in Vue

Source: https://cs-ui-library.netlify.app/index

Demonstrates how to import and use the Button component from the Content Studio UI library in a Vue 3 SFC. Includes examples for basic and icon-based buttons.

```vue
<script setup lang="ts">
import { Button } from '@contentStudio/ui'
</script>
<template>
<!-- Basic button -->
<Button variant="filled" color="primary">
Click me
</Button>
<!-- Button with icon -->
<Button variant="outline" color="secondary">
<template #icon>
<PlusIcon class="w-4 h-4" />
</template>
Add Item
</Button>
</template>
```

--------------------------------

### Drawer with Different Sizes

Source: https://cs-ui-library.netlify.app/components/drawer

Demonstrates how to control the size of the Drawer component using the 'size' prop. It shows examples for predefined sizes like 'xs', 'sm', 'md', 'lg', and 'xl'.

```vue
<template>
<Button @click="openDrawer('xs')">Extra Small</Button>
<Button @click="openDrawer('sm')">Small</Button>
<Button @click="openDrawer('md')">Medium</Button>
<Button @click="openDrawer('lg')">Large</Button>
<Button @click="openDrawer('xl')">Extra Large</Button>
<Drawer
:opened="opened"
:onClose="closeDrawer"
:size="size"
:title="size + ' Drawer'"
>
<div class="p-4">
<p>This is a {{ size }} drawer.</p>
<Button class="mt-4" @click="closeDrawer">Close</Button>
</div>
</template>
<script setup>
// Script setup for openDrawer and closeDrawer functionality would be here
</script>
```

--------------------------------

### Breadcrumbs with Different Sizes

Source: https://cs-ui-library.netlify.app/components/breadcrumbs

Demonstrates the responsiveness of the Breadcrumbs component by showing examples with different size props (xs, sm, md, etc.) to fit various design contexts.

```vue
<template>
<Breadcrumbs size="xs">
<a href="#">Home</a>
<a href="#">Components</a>
<span>Breadcrumbs</span>
</Breadcrumbs>
<Breadcrumbs size="sm">
<a href="#">Home</a>
<a href="#">Components</a>
<span>Breadcrumbs</span>
</Breadcrumbs>
<Breadcrumbs size="md">
<a href="#">Home</a>
<a href="#">Components</a>
<span>Breadcrumbs</span>
</Breadcrumbs>
</template>
```

--------------------------------

### Vue.js TextInput Sizes

Source: https://cs-ui-library.netlify.app/components/input

Demonstrates the different size options (xs, sm, md, lg, xl) for the TextInput component in Vue.js. Each example includes a label and placeholder.

```html
<template>
<div>
<TextInput
v-model="inputValue"
label="Extra Small Input"
placeholder="Type something..."
size="xs"
/>
<TextInput
v-model="inputValue"
label="Small Input"
placeholder="Type something..."
size="sm"
/>
<TextInput
v-model="inputValue"
label="Medium Input"
placeholder="Type something..."
size="md"
/>
<TextInput
v-model="inputValue"
label="Large Input"
placeholder="Type something..."
size="lg"
/>
<TextInput
v-model="inputValue"
label="Extra Large Input"
placeholder="Type something..."
size="xl"
/>
</div>
</template>
```

```javascript
<script setup lang="ts">
import { ref } from 'vue';
const inputValue = ref('');
</script>
```

--------------------------------

### Avatar Colors Example

Source: https://cs-ui-library.netlify.app/components/avatar

Showcases the use of the 'color' prop to set the background color of the Avatar component when displaying initials. Various predefined colors are demonstrated.

```html
<Avatar name="P" color="primary" />
<Avatar name="S" color="secondary" />
<Avatar name="W" color="warning" />
<Avatar name="D" color="danger" />
<Avatar name="I" color="info" />
<Avatar name="A" color="initials" />
```

--------------------------------

### Import Textarea Component

Source: https://cs-ui-library.netlify.app/components/textarea

Demonstrates how to import the Textarea component from the '@contentstudio/ui' library. This is the initial setup required to use the component in your Vue.js project.

```javascript
import { Textarea } from '@contentstudio/ui'
```

--------------------------------

### Card with Sections Example

Source: https://cs-ui-library.netlify.app/components/card

Illustrates how to use Card.Section for structuring content within a Card, including a top section with a background and a bottom section that inherits padding. The main content is placed in between.

```vue
<template>
  <Card padding="xl">
    <Card.Section withBorder class="bg-gray-50">
      <div class="p-4 font-medium">Top Section</div>
    </Card.Section>

    <div class="py-4">
      <p>This is the main content of the card</p>
      <p class="mt-2">Sections can be placed at the top or bottom</p>
    </div>

    <Card.Section withBorder inheritPadding class="bg-gray-50">
      <div class="py-4">Bottom Section with inherited padding</div>
    </Card.Section>
  </Card>
</template>

<script setup>
import { Card } from '@contentStudio/ui';
</script>
```

--------------------------------

### Avatar Group Outline Customization Example

Source: https://cs-ui-library.netlify.app/components/avatar

Shows advanced customization of Avatar.Group outlines with props like 'outlineWidth', 'outlineColor', and 'outlineOffset'. Includes 'spacing' and 'hover' props.

```html
<!-- Example 1: Thick Indigo Outlines -->
<Avatar.Group 
outlineWidth="3px" 
outlineColor="#4f46e5" 
outlineOffset="-0.5rem"
spacing="md"
hover
>
<Avatar 
src="https://i.pravatar.cc/300?img=11" 
alt="User 11" 
size="xl" 
/>
<Avatar 
src="https://i.pravatar.cc/300?img=12" 
alt="User 12" 

```

--------------------------------

### Avatar Group Basic Example

Source: https://cs-ui-library.netlify.app/components/avatar

Shows a basic implementation of the Avatar.Group component, intended to display multiple avatars in a group. The comment suggests adding multiple avatars within the group.

```html
<Avatar.Group
spacing="sm"
>
<!-- Add multiple avatars here -->
</Avatar.Group>
```

--------------------------------

### Dialog with Default Actions (Vue)

Source: https://cs-ui-library.netlify.app/components/dialog

Illustrates how to use the Dialog component with default actions, including cancel and confirm. This example shows how to control the dialog's visibility and handle the confirm action.

```vue
<template>
<Button @click="opened = true">Open Dialog</Button>
<Dialog
v-model:opened="opened"
title="Dialog Title"
content="This is a dialog with customizable options."
withDefaultActions
@close="opened = false"
@cancel="opened = false"
@confirm="handleConfirm"
>
</Dialog>
</template>
<script setup>
import { ref } from 'vue'
import { Dialog, Button } from '@contentstudio/ui'
const opened = ref(false)
const handleConfirm = () => {
  console.log('Confirmed!')
  opened.value = false
}
</script>
```

--------------------------------

### Alert Colors Example (Vue)

Source: https://cs-ui-library.netlify.app/components/alert

Shows how to apply different colors to the Alert component, including 'primary', 'success', 'warning', and 'danger', combined with the 'filled' variant and 'md' radius.

```vue
<template>
<Alert
variant="filled"
color="primary"
title="Primary"
message="Primary colored alert"
radius="md"
/>
<Alert
variant="filled"
color="success"
title="Success"
message="Success colored alert"
radius="md"
/>
<Alert
variant="filled"
color="warning"
title="Warning"
message="Warning colored alert"
radius="md"
/>
<Alert
variant="filled"
color="danger"
title="Danger"
message="Danger colored alert"
radius="md"
/>
</template>
```

--------------------------------

### Alert with Call-to-Action (Vue)

Source: https://cs-ui-library.netlify.app/components/alert

Demonstrates how to integrate call-to-action elements within an Alert, such as links or buttons. This example shows a 'Post scheduled' alert with a 'View post' link.

```vue
<template>
<!-- Post scheduled alert -->
<Alert color="info" variant="light" radius="md">
<div class="flex items-center">
<div class="flex-shrink-0 mr-3">
<Info class="h-5 w-5 text-blue-500" />
</div>
<div class="flex-grow">
<h3 class="font-medium text-gray-900">Post scheduled</h3>
<p class="text-sm text-gray-600">Your post has been scheduled for 2 apr...</p>
<a href="#" class="text-sm text-blue-500 hover:text-blue-700 font-medium mt-1 inline-block">View post</a>
</div>
<div class="flex-shrink-0 ml-3">
<button class="text-gray-400 hover:text-gray-500">
<X class="h-5 w-5" />
</button>
</div>
</div>
</Alert>

<!-- Action required alert -->
<Alert color="warning" variant="light" radius="md">
<div class="flex items-center">
<div class="flex-shrink-0 mr-3">
<AlertTriangle class="h-5 w-5 text-yellow-500" />
</div>
<div class="flex-grow">
<h3 class="font-medium text-gray-900">Action required</h3>
<p class="text-sm text-gray-600">Facebook allows only 10 images or 1 video</p>
<a href="#" class="text-sm text-yellow-500 hover:text-yellow-700 font-medium mt-1 inline-block">View post</a>
</div>
<div class="flex-shrink-0 ml-3">
<button class="text-gray-400 hover:text-gray-500">
<X class="h-5 w-5" />
</button>
</div>
</div>
</Alert>

<!-- Great News! alert -->
<Alert color="success" variant="light" radius="md">
<div class="flex items-center">
<div class="flex-shrink-0 mr-3">
<CheckIcon class="h-5 w-5 text-green-500" />
</div>
<div class="flex-grow">
<h3 class="font-medium text-gray-900">Great News!</h3>
<p class="text-sm text-gray-600">Your post has been published</p>
<a href="#" class="text-sm text-green-500 hover:text-green-700 font-medium mt-1 inline-block">View post</a>
</div>
<div class="flex-shrink-0 ml-3">
<button class="text-gray-400 hover:text-gray-500">
<X class="h-5 w-5" />
</button>
</div>
</div>
</Alert>

<!-- Post failed! alert -->
<Alert color="danger" variant="light" radius="md">
<div class="flex items-center">
<div class="flex-shrink-0 mr-3">
<XCircleIcon class="h-5 w-5 text-red-500" />
</div>
<div class="flex-grow">
<h3 class="font-medium text-gray-900">Post failed!</h3>
<p class="text-sm text-gray-600">Your post has been failed</p>
<a href="#" class="text-sm text-red-500 hover:text-red-700 font-medium mt-1 inline-block">View post</a>
</div>
<div class="flex-shrink-0 ml-3">
<button class="text-gray-400 hover:text-gray-500">
<X class="h-5 w-5" />
</button>
</div>
</div>
</Alert>
</template>

<script setup>
import { AlertTriangle, Info, CheckIcon, XCircleIcon, X } from 'lucide-vue-next';
</script>
```

--------------------------------

### Import Drawer Component

Source: https://cs-ui-library.netlify.app/components/drawer

Demonstrates how to import the Drawer component from the '@/components/Drawer' path. This is the initial step for using the Drawer component in your project.

```javascript
import { Drawer } from '@/components/Drawer'
```

--------------------------------

### Vue.js TextInput with Ref Methods

Source: https://cs-ui-library.netlify.app/components/input

Illustrates how to interact with the TextInput component using its ref in Vue.js. Includes examples for basic methods like 'focus', 'selectAll', and 'setValue', as well as advanced methods like 'selectRange' and 'insertAtCursor'.

```html
<template>
<div>
<TextInput ref="textInputRef" label="Input with ref" placeholder="Type here..." />
<button @click="focusInput">Focus</button>
<button @click="selectAllInput">Select All</button>
<button @click="setValueInput">Set Value</button>
<button @click="clearInput">Clear</button>
<button @click="selectRangeInput">Select Range</button>
<button @click="insertInput">Insert at Cursor</button>
<button @click="logInputInfo">Log Input Info</button>
</div>
</template>
```

```javascript
<script setup>
import { ref, onMounted } from 'vue';

const textInputRef = ref(null);

onMounted(() => {
  // Example: textInputRef.value.focus();
});

const focusInput = () => {
  textInputRef.value?.focus();
};

const selectAllInput = () => {
  textInputRef.value?.selectAll();
};

const setValueInput = () => {
  textInputRef.value?.setValue('New Value');
};

const clearInput = () => {
  textInputRef.value?.clear();
};

const selectRangeInput = () => {
  textInputRef.value?.selectRange(2, 5); // Selects characters from index 2 to 5
};

const insertInput = () => {
  textInputRef.value?.insertAtCursor(' inserted text ');
};

const logInputInfo = () => {
  console.log(textInputRef.value?.getInputInfo()); // Example: Logs current value, selection state, etc.
};
</script>
```

--------------------------------

### Import ThemeProvider and useTheme

Source: https://cs-ui-library.netlify.app/theme-provider

Imports the necessary ThemeProvider and useTheme components from the '@contentstudio/ui' library.

```javascript
import { ThemeProvider, useTheme } from '@contentstudio/ui'
```

--------------------------------

### Vue Switch Component with various Sizes

Source: https://cs-ui-library.netlify.app/components/switch

Illustrates how to configure the size of the Switch component using the 'size' prop, showing examples for small ('sm'), medium ('md'), and large ('lg') sizes.

```javascript
<template>
<Switch
v-model="checked"
size="sm"
label="Small switch"
/>
<Switch
v-model="checked"
size="md"
label="Medium switch"
/>
<Switch
v-model="checked"
size="lg"
label="Large switch"
/>
</template>
```

--------------------------------

### Basic ThemeProvider Usage

Source: https://cs-ui-library.netlify.app/theme-provider

Demonstrates how to wrap your Vue application with ThemeProvider, providing an initial custom theme configuration. This sets up the theming context for all child components.

```vue
<template>
  <ThemeProvider :initial-theme="customTheme">
    <YourApp />
  </ThemeProvider>
</template>

<script setup>
const customTheme = {
  primary: '#6366f1',
  secondary: '#6b7280',
  success: '#10b981',
  warning: '#f59e0b',
  danger: '#ef4444',
  info: '#3b82f6'
}
</script>
```

--------------------------------

### Mixed Loader Configurations (Vue.js)

Source: https://cs-ui-library.netlify.app/components/loader

Provides examples of combining different props like variant, color, size, and radius on the Loader component in Vue.js to create diverse loading indicators for various UI elements.

```html
<template>
<Loader variant="dots" color="success" size="lg" />
<Loader variant="bars" color="warning" size="sm" />
<Loader variant="oval" color="danger" size="xl" />
<Loader variant="oval" color="info" size="md" radius="10px" />
</template>
```

--------------------------------

### Dropdown Basic Usage

Source: https://cs-ui-library.netlify.app/components/dropdown

Demonstrates the fundamental implementation of the Dropdown component, including managing its open state and displaying a list of items.

```html
<template>
<Dropdown 
v-model:open="isOpen"
radius="lg"
size="sm"
>
<template #selected>{{ selected || 'Select an option' }}</template>
<DropdownItem
v-for="item in items"
:key="item.value"
@click="selected = item.value"
>
{{ item.label }}
</DropdownItem>
</Dropdown>
</template>
```

--------------------------------

### Import Dialog Component

Source: https://cs-ui-library.netlify.app/components/dialog

Shows how to import the Dialog component from the '@contentstudio/ui' library.

```javascript
import { Dialog } from '@contentstudio/ui'
```

--------------------------------

### Dialog Positioning

Source: https://cs-ui-library.netlify.app/components/dialog

Demonstrates how to position the dialog on the screen using the 'position' prop. This example places the dialog in the top-right corner of the viewport.

```html
<template>
<Dialog
v-model:opened="opened"
:position="{ top: '20px', right: '20px' }"
title="Top Right Dialog"
content="This dialog is positioned at the top right of the screen."
withDefaultActions
@close="opened = false"
/>
</template>
```

```javascript
import { ref } from 'vue'
import { Dialog } from '@contentstudio/ui'
const opened = ref(false)
```

--------------------------------

### Import Modal Component

Source: https://cs-ui-library.netlify.app/components/modal

Demonstrates how to import the Modal component from the '@contentstudio/ui' library.

```javascript
import { Modal } from '@contentstudio/ui'
```

--------------------------------

### Using 'default' Palettes

Source: https://cs-ui-library.netlify.app/theme-provider

Illustrates how to use the string 'default' for theme properties to apply predefined palettes from CSS, instead of generating new ones with hex values.

```javascript
// All colors use 'default' - applies predefined palettes from style.css
const theme = {
  primary: 'default',
  secondary: 'default', 
  success: 'default',
  warning: 'default',
  danger: 'default',
  info: 'default'
}
```

--------------------------------

### Basic Dialog Usage

Source: https://cs-ui-library.netlify.app/components/dialog

Demonstrates how to open and configure a basic dialog with a title, content, and default actions. It uses a button to trigger the dialog's visibility.

```html
<template>
<Button @click="opened = true" color="danger" variant="outline">
Show Delete Dialog
</Button>
<Dialog
v-model:opened="opened"
title="Delete Post?"
content="Deleting 'feature post' will remove it permanently from your account. This action cannot be undone."
iconPosition="top"
filledCTA
withDefaultActions
cancelText="Cancel"
confirmText="Delete"
confirmButtonColor="danger"
@close="opened = false"
/>
</template>
```

--------------------------------

### RangeSlider Price Range Example

Source: https://cs-ui-library.netlify.app/components/range-slider

Customizes the RangeSlider for a price range, using 'min', 'max', 'step', and 'label-formatter' for currency display.

```vue
<RangeSlider
  v-model="value"
  :min="0"
  :max="1000"
  :step="10"
  :label-formatter="(val) => `$${val.toLocaleString()}`"
  label="Price Range"
  color="success"
/>
```

--------------------------------

### Import Progress Component

Source: https://cs-ui-library.netlify.app/components/progress

Demonstrates how to import the Progress component from the '@contentStudio/ui' library.

```javascript
import { Progress } from '@contentStudio/ui'
```

--------------------------------

### Indicator with Processing Animation

Source: https://cs-ui-library.netlify.app/components/indicator

Example of using the `processing` prop to display a spinning animation on the indicator, with options for custom size and color.

```vue
<template>
<!-- Processing animation with custom color -->
<Indicator inline processing color="primary" :size="12">
<Avatar
size="xl"
radius="sm"
src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png"
/>
</Indicator>
</template>

```

--------------------------------

### RangeSlider Percentage Range Example

Source: https://cs-ui-library.netlify.app/components/range-slider

Configures the RangeSlider for percentage values, using 'min', 'max', 'step', 'precision', and 'label-formatter' for percentage display.

```vue
<RangeSlider
  v-model="value"
  :min="0"
  :max="1"
  :step="0.01"
  :precision="2"
  :label-formatter="(val) => `${(val * 100).toFixed(0)}%`"
  label="Completion Range"
  color="info"
/>
```

--------------------------------

### Import Radio Component (JavaScript)

Source: https://cs-ui-library.netlify.app/components/radio

Demonstrates how to import the Radio component from the '@contentstudio/ui' library. This is typically the first step before using the component in your application.

```javascript
import { Radio } from '@contentstudio/ui'
```

--------------------------------

### Dialog with Icon Top (Vue)

Source: https://cs-ui-library.netlify.app/components/dialog

Shows the Dialog component with an icon positioned at the top. This example is similar to the 'iconLeft' version but sets the `iconPosition` prop to 'top'.

```vue
<template>
<Button @click="opened = true" color="danger" variant="outline">
Show Delete Dialog
</Button>
<Dialog
v-model:opened="opened"
title="Delete Post?"
content="Deleting 'feature post' will remove it permanently from your account. This action cannot be undone."
iconPosition="top"
withDefaultActions
cancelText="Cancel"
confirmText="Delete"
confirmButtonColor="danger"
@close="opened = false"
@cancel="opened = false"
@confirm="handleDelete"
>
</Dialog>
</template>
<script setup>
import { ref } from 'vue'
import { Dialog, Button } from '@contentstudio/ui'
const opened = ref(false)
const handleDelete = () => {
  console.log('Deleted!')
  opened.value = false
}
</script>
```

--------------------------------

### Basic Alert Usage (Vue)

Source: https://cs-ui-library.netlify.app/components/alert

Shows the basic usage of the Alert component with a title and message. It includes importing necessary components and setting up the script.

```vue
<template>
<Alert
title="Alert Title"
message="This is an alert message with playground options."
/>
</template>
<script setup>
import { Home } from 'lucide-vue-next';
const handleClose = () => {
// Handle close event
};

```