Webcore

https://webcoreui.dev/docs
Admin
Webcore is an open-source, customizable UI component library for Astro with Sass styling that...
Tokens:133,286
Snippets:1,128
Trust Score:7
Update:9 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://webcoreui.dev/docs/resets

Starts the development server for your project. This command is typically used after installing dependencies and setting up the project.

```bash
npm run dev
```

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

### Configure Multiple Themes in Webcore UI

Source: https://webcoreui.dev/docs/themes

This example shows how to configure multiple themes in Webcore UI using the 'setup' mixin. It defines a map of theme names to CSS selectors, allowing users to switch between themes by applying specific classes to the body element. This enhances customization options for the website.

```scss
@use 'webcoreui/styles' as *;
@include setup((
    ...
    themes: (
        dark: '.theme-dark',
        light: '.theme-light',
        midnight: '.theme-blue',
        vintage: '.theme-vintage',
        amber: '.theme-yellow',
        synthwave: '.theme-synthwave',
        velvet: '.theme-velvet'
    )
));

```

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

### Install Webcore with Astro CLI

Source: https://webcoreui.dev/docs/astro

Use the Webcore CLI to create a new Astro project pre-configured with Webcore. This command initiates the setup process and prompts for necessary information.

```bash
npm create webcore@latest

```

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

### Configure Webcore UI Setup

Source: https://webcoreui.dev/docs/flex

Configure the Webcore UI setup mixin to enable or disable utility classes. By default, utility classes are enabled. This example shows how to disable them, which is necessary for using the Flex component.

```scss
@use 'webcoreui/styles' as *;
@include setup((
    includeUtilities: false // Remove this option if you want to use the Flex component
));

```

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

### Checkbox Examples

Source: https://webcoreui.dev/docs/checkbox

Provides code examples demonstrating how to use the Checkbox component with various props.

```APIDOC
## Checkbox Examples

### Basic Checkbox

```html
<Checkbox />
```

### Checkbox with Label

```html
<Checkbox label="Checkbox with label" />
```

### Checkbox with Label and Subtext (HTML)

```html
<Checkbox
    label="Checkbox with label"
    subText="And subtext with <strong>HTML</strong>."
/>
```

### Checkbox with Custom Color

```html
<Checkbox checked={true} color="#1dd1a1" />
```
```

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

### Start Astro Development Server

Source: https://webcoreui.dev/docs/astro

Run the command to start the local development server for your Astro project. This allows you to preview your application with integrated Webcore components.

```bash
npm run dev

```

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

### Install Webcore UI Library

Source: https://webcoreui.dev/docs/resets

Installs Webcore as a project dependency using npm. This is the first step to integrating Webcore components into your project.

```bash
npm i webcoreui
```

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

### Aspect Ratio Prop Examples

Source: https://webcoreui.dev/docs/aspect-ratio

Provides examples of how to specify the aspect ratio using the 'ratio' prop in the AspectRatio component, supporting various formats like '16/9', '4:3', and '1'.

```html
<AspectRatio ratio="16/9">...</AspectRatio>
<AspectRatio ratio="4:3">...</AspectRatio>


<!-- All of the below will produce the same result -->
<AspectRatio ratio="1/1">...</AspectRatio>
<AspectRatio ratio="1:1">...</AspectRatio>
<AspectRatio ratio="1">...</AspectRatio>

```

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

### Icon Component Available Icons Example

Source: https://webcoreui.dev/docs/icon

Provides an example of how to render some of the available icons using the Icon component. This demonstrates the basic usage for icons like 'alert' and 'check'.

```html
<Icon type="alert" />
<Icon type="check" />

```

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

### Create Webcore Project with Configuration using CLI

Source: https://webcoreui.dev/docs/cli

Bootstrap a new Webcore project with specific configurations using the CLI. This allows for customized project setups.

```bash
npm create webcore@latest config

```

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

### Install Webcore CLI as Project Dependency

Source: https://webcoreui.dev/docs/cli

Install the `create-webcore` package as a development dependency in your project to use the CLI programmatically. Available for both NPM and Yarn package managers.

```bash
npm i create-webcore

```

```bash
yarn add create-webcore

```

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

### Setup CSS Mixin Configuration (SCSS)

Source: https://webcoreui.dev/docs/changelog

Shows the updated SCSS setup mixin, replacing `includeElementStyles` with `includeResets` for managing base element styles.

```scss
@include setup((
   includeElementStyles: false,
   includeResets: false
));
```

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

### Include CSS Resets in Sass Setup

Source: https://webcoreui.dev/docs/resets

Demonstrates how to include CSS resets by invoking the `setup` mixin with `includeResets` set to true. This ensures common HTML elements are styled consistently.

```scss
// In your global SCSS file
@use "webcoreui";

@include webcoreui.setup(
  // Other configurations...
  includeResets: true
);
```

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

### Install Webcore UI Package (Yarn)

Source: https://webcoreui.dev/docs/setup

Installs the Webcore UI library as a project dependency using Yarn. This command fetches and adds the core Webcore components to your project's `node_modules` directory.

```bash
yarn add webcoreui
```

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

### Avatar Group Examples in React

Source: https://webcoreui.dev/docs/avatar

Provides examples of creating avatar groups with the WebCoreUI Avatar component in a React application. Demonstrates default, reversed, and borderless group setups by passing an array of image paths to the 'img' prop.

```javascript
import React from 'react'
import { Avatar } from 'webcoreui/react'


const group = [
    '/img/avatar0.png',
    '/img/avatar1.png',
    '/img/avatar2.png',
    '/img/avatar3.png',
    '/img/avatar4.png'
]


const Component = () => (
    <React.Fragment>
        <Avatar img={group} />
        <Avatar img={group} reverse={true} />
        <Avatar img={group} borderless={true} />
    </React.Fragment>
)


export default Component
```

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

### SpeedDial Theming Examples

Source: https://webcoreui.dev/docs/speed-dial

Shows how to apply different themes to the SpeedDial component using the `theme` prop. The available themes are consistent with those supported by the Button component.

```javascript
<SpeedDial items={items} theme="outline" />
```

```javascript
<SpeedDial items={items} theme="flat" />
```

```javascript
<SpeedDial items={items} theme="secondary" />
```

```javascript
<SpeedDial items={items} theme="info" />
```

```javascript
<SpeedDial items={items} theme="success" />
```

```javascript
<SpeedDial items={items} theme="warning" />
```

```javascript
<SpeedDial items={items} theme="alert" />
```

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

### Flex Alignment Examples (Horizontal and Vertical)

Source: https://webcoreui.dev/docs/flex

Illustrates how to control the alignment of flex items using the `alignment` prop. It supports both horizontal and vertical alignment properties, such as 'start', 'end', 'center', 'between', 'around', 'evenly', 'baseline', and 'stretch'.

```jsx
<Flex alignment={{ horizontal: 'start' }}>...</Flex>
<Flex alignment={{ horizontal: 'end' }}>...</Flex>
<Flex alignment={{ horizontal: 'center' }}>...</Flex>
<Flex alignment={{ horizontal: 'between' }}>...</Flex>
<Flex alignment={{ horizontal: 'around' }}>...</Flex>
<Flex alignment={{ horizontal: 'evenly' }}>...</Flex>
<Flex alignment={{ vertical: 'start' }}>...</Flex>
<Flex alignment={{ vertical: 'end' }}>...</Flex>
<Flex alignment={{ vertical: 'center' }}>...</Flex>
<Flex alignment={{ vertical: 'baseline' }}>...</Flex>
<Flex alignment={{ vertical: 'stretch' }}>...</Flex>
```

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

### Configure CSS Setup Mixin in WebcoreUI

Source: https://webcoreui.dev/docs/css-configuration

This snippet demonstrates how to configure the CSS setup mixin in WebcoreUI. It allows defining font paths and selectively including various style modules like resets, utilities, tooltips, scrollbar styles, and breakpoints to optimize CSS bundle size.

```scss
@use 'webcoreui/styles' as *;
@include setup((
    // Define paths for your fonts
    fontRegular: '/fonts/Inter-Regular.woff2',
    fontBold: '/fonts/Inter-Bold.woff2'


    // Optionally, define which styles you'd like to include
    includeResets: true,
    includeUtilities: true,
    includeTooltip: true,
    includeScrollbarStyles: true,
    includeBreakpoints: true
));

```

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

### React Alert Component Example

Source: https://webcoreui.dev/docs/alert

Provides an example of integrating the Alert component in a React project. The code imports 'Alert' from 'webcoreui/react' and demonstrates its usage within a functional component.

```javascript
import React from 'react'
import { Alert } from 'webcoreui/react'


const Component = () => (
    <Alert theme="info" title="Note">
        You can create different alert elements with various themes.
    </Alert>
)


export default Component
```

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

### Configure Webcore CSS Setup and Fonts in React

Source: https://webcoreui.dev/docs/react

This SCSS code sets up the default styles and fonts for Webcore in your React project by calling the `setup` mixin. Ensure the paths to your font files (`Inter-Regular.woff2`, `Inter-Bold.woff2`) are correctly configured in the `public/fonts` directory.

```scss
@use 'webcoreui/styles' as *;
@include setup((
    fontRegular: '/fonts/Inter-Regular.woff2',
    fontBold: '/fonts/Inter-Bold.woff2'
));

```

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

### Install PurgeCSS Dependencies (PNPM)

Source: https://webcoreui.dev/docs/layout

Install the `purgecss` and `astro-purgecss` packages manually using PNPM. These are required for advanced CSS optimization within your Astro project.

```bash
pnpm install purgecss astro-purgecss
```

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

### SpeedDial Positioning Examples

Source: https://webcoreui.dev/docs/speed-dial

Demonstrates how to position the SpeedDial component using the `position` prop. Available positions include 'top-left', 'top-right', and 'bottom-left'.

```javascript
<SpeedDial
    items={items}
    position="top-left"
/>
```

```javascript
<SpeedDial
    items={items}
    position="top-right"
/>
```

```javascript
<SpeedDial
    items={items}
    position="bottom-left"
/>
```

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

### Install PurgeCSS Dependencies (NPM)

Source: https://webcoreui.dev/docs/layout

Install the `purgecss` and `astro-purgecss` packages manually using NPM. These are required for advanced CSS optimization within your Astro project.

```bash
npm install purgecss astro-purgecss
```

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

### Center Logo and Layout with Props (Astro)

Source: https://webcoreui.dev/docs/menu

This example combines `wrapperClassName` for layout centering and `centerLogo` to center the logo. It requires the `Menu` component, menu items, and a logo.

```html
<Menu
    items={menu}
    logo={menuLogo}
    wrapperClassName="center-aligned"
    centerLogo={true}
/>


<style>
    .center-aligned {
        justify-content: center;
    }
</style>
```

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

### Astro Alert Component Example

Source: https://webcoreui.dev/docs/alert

Demonstrates how to use the Alert component in Astro. It requires importing 'Alert' from 'webcoreui/astro' and can be configured with themes and titles.

```astro
---
import { Alert } from 'webcoreui/astro'
---


<Alert theme="info" title="Note">
    You can create different alert elements with various themes.
</Alert>
```

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

### Configure CSS Utilities (SCSS)

Source: https://webcoreui.dev/docs/changelog

Demonstrates how to configure CSS utility classes, specifically renaming `includeHelperClasses` to `includeUtilities` in SCSS setup.

```scss
@include setup((
   includeHelperClasses: false,
   includeUtilities: false
));
```

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

### Install Sass and TypeScript Dependencies (NPM)

Source: https://webcoreui.dev/docs/setup

Installs Sass and TypeScript packages using the NPM package manager. These are foundational dependencies for Webcore components, with Sass handling styling and TypeScript ensuring type safety.

```bash
npm i sass typescript
```

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

### Svelte Context Menu Implementation

Source: https://webcoreui.dev/docs/context-menu

Shows the integration of the ContextMenu and List components within a Svelte application. This example sets up a basic context menu with search capabilities.

```svelte
<script>
    import { ContextMenu, List } from 'webcoreui/svelte'
</script>


<ContextMenu>
    <span class="muted">Right-click here</span>


    <List
        itemGroups={[ ... ]}
        showSearchBar={true}
        showSearchBarIcon={true}
        searchBarPlaceholder="Search the app..."
        noResultsLabel="Nothing found..."
        slot="context"
    />
</ContextMenu>
```

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

### Use Webcore Alert Component in Astro

Source: https://webcoreui.dev/docs/setup

Demonstrates how to import and use the Alert component from Webcore UI within an Astro file. This example shows a basic usage with an 'info' theme.

```astro
---
import { Alert } from 'webcoreui/astro'
---


<Alert theme="info">Webcore is ready</Alert>
```

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

### Svelte Switch Component Usage

Source: https://webcoreui.dev/docs/switch

Illustrates the integration and usage of the Switch component within a Svelte application. This example shows how to import and handle the change event.

```svelte
<script>
    import { Switch } from 'webcoreui/svelte'


    let toggled = false
</script>


<Switch onClick={e => toggle = e.target.checked} />
```

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

### Configure Grid Setup (SCSS)

Source: https://webcoreui.dev/docs/grid

SCSS configuration to enable or disable utility classes, which is necessary for the Grid component. Ensure 'includeUtilities' is not disabled if you intend to use the Grid component.

```scss
@use 'webcoreui/styles' as *;
@include setup((
    ...,
    includeUtilities: false // Remove this option if you want to use the Grid component
));

```

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

### React Switch Component Usage

Source: https://webcoreui.dev/docs/switch

Provides a React example for implementing the Switch component. It showcases state management using useState and event handling for the toggle functionality.

```javascript
import React, { useState } from 'react'
import { Switch } from 'webcoreui/react'


const Component = () => {
    const [toggle, setToggle] = useState(false)


    return (
        <Switch onClick={e => setToggle(e.target.checked)} />
    )
}


export default Component
```

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

### React Badge Component

Source: https://webcoreui.dev/docs/badge

Provides an example of integrating the Badge component in a React project. It covers the same thematic variations as other frameworks and demonstrates how to render them within a React Fragment.

```jsx
import React from 'react'
import { Badge } from 'webcoreui/react'


const Component = () => (
    <React.Fragment>
        <Badge>Primary</Badge>
        <Badge theme="secondary">Secondary</Badge>
        <Badge theme="flat">Flat</Badge>
        <Badge theme="outline">Outline</Badge>


        <Badge theme="info">Info</Badge>
        <Badge theme="success">Success</Badge>
        <Badge theme="warning">Warning</Badge>
        <Badge theme="alert">Alert</Badge>
    </React.Fragment>
)


export default Component


```

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

### Apply Modal Themes

Source: https://webcoreui.dev/docs/modal

Shows how to apply predefined themes to modals by setting the `theme` prop. Available themes include 'info', 'success', 'warning', and 'alert'. Each example renders a modal with a specific theme.

```html
<Modal
    className="info-modal"
    title="Information"
    subTitle="Before continuing, please read carefully"
    theme="info"
>
    <p>This modal was created with <code>theme</code> set to <code>info</code>.</p>
</Modal>
```

```html
<Modal
    className="success-modal"
    title="Success"
    subTitle="Before continuing, please read carefully"
    theme="success"
>
    <p>This modal was created with <code>theme</code> set to <code>success</code>.</p>
</Modal>
```

```html
<Modal
    className="warning-modal"
    title="Warning"
    subTitle="Before continuing, please read carefully"
    theme="warning"
>
    <p>This modal was created with <code>theme</code> set to <code>warning</code>.</p>
</Modal>
```

```html
<Modal
    className="alert-modal"
    title="Alert"
    subTitle="Before continuing, please read carefully"
    theme="alert"
>
    <p>This modal was created with <code>theme</code> set to <code>alert</code>.</p>
</Modal>
```

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

### Icon Component Usage in React

Source: https://webcoreui.dev/docs/icon

Shows how to implement the Icon component in a React application. The example includes importing React, the Icon component from 'webcoreui/react', and rendering it as a functional component.

```javascript
import React from 'react'
import { Icon } from 'webcoreui/react'


const Component = () => <Icon type="github" />


export default Component

```

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

### Create Webcore Project from Template using CLI

Source: https://webcoreui.dev/docs/cli

Bootstrap a new Webcore project using a specified template. Replace `[TemplateName]` with the desired template and `[destination]` with the target directory.

```bash
npm create webcore@latest template [TemplateName] [destination]

```

```bash
# Use the "Portfolio" template on the current directory
npm create webcore@latest template Portfolio

```

```bash
# Create the "Portfolio" template in the "portfolio" directory
npm create webcore@latest template Portfolio ./portfolio

```

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

### Get Current Breakpoint with WebcoreUI

Source: https://webcoreui.dev/docs/utilities

Retrieves the currently active breakpoint ('xs', 'sm', 'md', 'lg') from JavaScript. Requires `includeBreakpoints` to be true in the CSS setup mixin. Can also be accessed via a CSS variable.

```javascript
import { getBreakpoint } from 'webcoreui'


getBreakpoint() // Returns one of 'xs' | 'sm' | 'md' | 'lg'
```

```typescript
const getBreakpoint: () => string
```

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

### Create New Webcore Project

Source: https://webcoreui.dev/docs/cli

Initializes a new Webcore project with a specified framework. Requires the 'create-webcore' package. Accepts a configuration object with 'dir' for the output directory and 'framework' for the chosen framework (e.g., 'astro', 'svelte', 'react').

```javascript
import { create } from 'create-webcore'


create({
    dir: './my-app',
    framework: 'astro',
})
```

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

### Create Portfolio Template Project

Source: https://webcoreui.dev/docs/setup

Create a new project using the 'Portfolio' template in the current directory. This command specifically applies the 'Portfolio' template to your current working directory.

```bash
npm create webcore@latest template Portfolio

```

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

### Create New React Project with Vite (Template React-TS)

Source: https://webcoreui.dev/docs/react

This command creates a new React project using Vite with the TypeScript template. This is the starting point if you are integrating Webcore into an existing project or prefer to set it up manually. Ensure you have Node.js and npm installed.

```bash
npm create vite@latest my-app -- --template react-ts

```

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

### DOM Utility Functions: Get and On

Source: https://webcoreui.dev/docs/changelog

Provides utility functions 'get' and 'on' for interacting with the DOM. 'get' can retrieve a single element or all elements matching a selector. 'on' is used to attach event listeners to elements. These functions are part of the 'webcoreui' library.

```javascript
import { get, on } from 'webcoreui'


const element = get('.selector')        // Get a single DOM element
const element = get('.selectors', true) // Get all DOM elements with the selector


// Adding event listener
on('button', 'click', () => console.log('Button clicked.'))
```

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

### Clone Webcore Repository and Run Dev

Source: https://webcoreui.dev/docs/setup

Clone the Webcore repository locally and run the development server. This allows for direct building and customization of pages using the available components.

```bash
git clone <repository_url>
npm run dev

```

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

### Create New Webcore Project with Template

Source: https://webcoreui.dev/docs/cli

Bootstraps a new Webcore project using a specified template. Requires the 'create-webcore' package. The 'createTemplate' function takes the template name and an output directory as arguments. It returns a response object indicating success or failure, with details like error messages or the creation path.

```javascript
import { createTemplate } from 'create-webcore'


const response = await createTemplate('Portfolio', './')


if (response.error) {
    console.log('Error during bootstrapping project', response.error)
} else {
    console.log('Project successfully created.')
}
```

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

### Install PurgeCSS Dependencies (Yarn)

Source: https://webcoreui.dev/docs/layout

Install the `purgecss` and `astro-purgecss` packages manually using Yarn. These are required for advanced CSS optimization within your Astro project.

```bash
yarn add purgecss astro-purgecss
```

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

### Create Portfolio Template in Specific Directory

Source: https://webcoreui.dev/docs/setup

Create a new project using the 'Portfolio' template in a specified directory. This command allows you to choose a different directory for the template files.

```bash
npm create webcore@latest template Portfolio ./portfolio

```

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

### Create a New Astro Project

Source: https://webcoreui.dev/docs/astro

Initialize a new Astro project using the Astro CLI. This command is a prerequisite if you do not have an existing Astro project to integrate Webcore into.

```bash
npm create astro@latest

```

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

### Create Webcore Project from Template

Source: https://webcoreui.dev/docs/setup

Generate a new project using a specific Webcore template. You can specify the template name and the destination directory for the new project.

```bash
npm create webcore@latest template [TemplateName] [destination]

```

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

### Kbd Component Usage (No Keys or Text)

Source: https://webcoreui.dev/docs/kbd

Provides examples of using the Kbd component with no keys specified, resulting in only text, and with no text, resulting in only keyboard icons. This flexibility allows for different display needs.

```html
<Kbd>K</Kbd>

<Kbd keys={['cmd']} />

```

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

### Install astro-purgecss for CSS Optimization (PNPM)

Source: https://webcoreui.dev/docs/layout

Install the `astro-purgecss` package using PNPM to automatically remove unused CSS classes from your project, helping to reduce the CSS bundle size.

```bash
pnpm astro add astro-purgecss
```

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

### Install astro-purgecss for CSS Optimization (Yarn)

Source: https://webcoreui.dev/docs/layout

Install the `astro-purgecss` package using Yarn to automatically remove unused CSS classes from your project, helping to reduce the CSS bundle size.

```bash
yarn astro add astro-purgecss
```

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

### Component Carousel Example (Astro/Svelte/React)

Source: https://webcoreui.dev/docs/carousel

Illustrates building a carousel with various components like Alert and Button. The `progress` prop is enabled for visual progress indication. JavaScript is included to handle the 'Go back' button functionality, allowing navigation to previous slides.

```astro
<Carousel
    items={3}
    subText="Step {0} of {1}"
    progress={true}
>
    <li>
        <Alert theme="success" title="Note">...</Alert>
    </li>
    <li>
        <Alert theme="info" title="Info">....</Alert>
    </li>
    <li>
        <Alert>
            <div>...</div>
            <Button className="go-back">Go back</Button>
        </Alert>
    </li>
</Carousel>


<script>
    const button = document.querySelector('.go-back')


    // Implementation may differ for Svelte/React components
    button?.addEventListener('click', () => {
        const firstSlide = event.target
            ?.closest('li')
            ?.previousElementSibling
            ?.previousElementSibling


        // Using `.scrollIntoView` will automatically trigger state update for the carousel
        firstSlide?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
    })
</script>
```

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

### Install astro-purgecss for CSS Optimization (NPM)

Source: https://webcoreui.dev/docs/layout

Install the `astro-purgecss` package using NPM to automatically remove unused CSS classes from your project, helping to reduce the CSS bundle size.

```bash
npx astro add astro-purgecss
```

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

### Configure Tooltip Inclusion (SCSS)

Source: https://webcoreui.dev/docs/tooltip

This SCSS snippet demonstrates how to ensure tooltips are enabled in your WebcoreUI project. It shows the inclusion of the `setup` mixin and setting `includeTooltip` to `true` in the configuration. This is necessary for tooltips to function.

```scss
@use 'webcoreui/styles' as *;
@include setup((
    ...
    includeTooltip: true
));
```

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

### Linear Interpolation (Lerp) with WebcoreUI

Source: https://webcoreui.dev/docs/utilities

Calculates a value that is a specified fraction between a start and end value. Useful for smooth animations and blending values. The function takes the start, end, and the fraction (value) as arguments.

```javascript
import { lerp } from 'webcoreui'


// 50% between 0 and 10
lerp(0, 10, .5) -> 5


// 50% between 0 and 100
lerp(0, 100, .5) -> 50


// 200% between 0 and 100
lerp(0, 100, 2) -> 200


// 20% between 100 and 200
lerp(100, 200, .2) -> 120
```

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

### Flex Wrap Examples

Source: https://webcoreui.dev/docs/flex

Shows how to manage how flex items wrap onto new lines using the `wrap` prop. Accepted values are 'wrap', 'nowrap', and 'wrap-reverse', corresponding to native CSS behavior. The default is 'nowrap'.

```jsx
<Flex wrap="wrap" />
<Flex wrap="nowrap" /> <!-- Default -->
<Flex wrap="wrap-reverse" />
```

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

### Install Sass and TypeScript Dependencies (Yarn)

Source: https://webcoreui.dev/docs/setup

Installs Sass and TypeScript packages using the Yarn package manager. These are foundational dependencies for Webcore components, with Sass handling styling and TypeScript ensuring type safety.

```bash
yarn add sass typescript
```

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

### Kbd Component Usage

Source: https://webcoreui.dev/docs/kbd

Demonstrates how to use the Kbd component in Astro, Svelte, and React. It shows how to pass an array of keys to the `keys` prop to specify keyboard icons.

```APIDOC
## Kbd Component

### Description
Use the `Kbd` component to display keyboard shortcuts or key commands in a visually distinct way. This component is designed with copy-paste ready CSS & JavaScript patterns and includes accessibility baked in.

### Method
Component Usage (Astro, Svelte, React)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **keys** (Array of strings) - Optional - Sets keyboard icons. Available keywords include 'cmd', 'shift', 'ctrl', 'option', 'enter', 'del', 'esc', 'tab', 'capslock', 'up', 'down', 'left', 'right', 'pageup', 'pagedown', 'home', 'end', 'help', 'space'.
- **className** (string) - Optional - Pass additional CSS classes for the element.

### Request Example

**Astro:**
```javascript
import { Kbd } from 'webcoreui/astro'
<Kbd keys={['cmd', 'shift']}>K</Kbd>
```

**Svelte:**
```javascript
<script>
    import { Kbd } from 'webcoreui/svelte'
</script>
<Kbd keys={['cmd', 'shift']}>K</Kbd>
```

**React:**
```javascript
import React from 'react'
import { Kbd } from 'webcoreui/react'

const Component = () => (
    <Kbd keys={['cmd', 'shift']}>K</Kbd>
)

export default Component
```

### Response
#### Success Response (200)
N/A (Component)

#### Response Example
```json
{
  "example": "Rendered Kbd component displaying keyboard shortcuts"
}
```

## Variations

### No Keys
```html
<Kbd>K</Kbd>
```

### No Text
```html
<Kbd keys={['cmd']} />
```

### No Keys and No Text
(This combination is not explicitly shown but implied by the individual options)

## API Reference

```typescript
type KbdProps = {
    keys?: ('cmd' |
        'shift' |
        'ctrl' |
        'option' |
        'enter' |
        'del' |
        'esc' |
        'tab' |
        'capslock' |
        'up' |
        'down' |
        'left' |
        'right' |
        'pageup' |
        'pagedown' |
        'home' |
        'end' |
        'help' |
        'space')[]
    className?: string
}
```

### Prop Details

| Prop | Purpose |
|---|---|
| `keys` | Sets keyboard icons. |
| `className` | Pass additional CSS classes for the element. |
```

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

### Configure Themes with WebcoreUI Styles

Source: https://webcoreui.dev/docs/theme-switcher

This snippet demonstrates how to configure custom themes (dark, light, blue, yellow) using WebcoreUI's setup mixin. It requires the 'webcoreui/styles' import and defines theme mappings to CSS classes. Ensure your body tag is updated to reflect the default theme.

```scss
@use 'webcoreui/styles' as *;
@include setup((
    ...
    themes: (
        dark: '.theme-dark',
        light: '.theme-light',
        midnight: '.theme-blue',
        amber: '.theme-yellow'
    )
));
```

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

### Inverse Linear Interpolation (Invlerp) with WebcoreUI

Source: https://webcoreui.dev/docs/utilities

Determines the fraction at which a given value lies between a start and end value. Useful for mapping values between ranges and calculating progress. The function takes the start, end, and the value as arguments.

```javascript
import { invlerp } from 'webcoreui'


// Map 5 from [0, 10] to [0, 1]
invlerp(0, 10, 5) -> .5


// Map 50 from [0, 100] to [0, 1]
invlerp(0, 100, 50) -> .5


// Map 20 from [0, 100] to [0, 1]
invlerp(0, 100, 20) -> .2


// Map 120 from [100, 200] to [0, 1]
invlerp(100, 200, 120) -> .2
```

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

### DOM Utilities: Getting Elements

Source: https://webcoreui.dev/docs/utilities

The `get` utility function simplifies selecting DOM elements. It accepts a CSS selector string and an optional boolean. When the second parameter is omitted or false, it returns the first matching element. If true, it returns a NodeList of all matching elements. It can be used in Astro components.

```javascript
import { get } from 'webcoreui'


const element = get('.selector')        // Get a single DOM element
const element = get('.selectors', true) // Get all DOM elements with the selector
```

```typescript
const get: (selector: string, all?: boolean) => Element | NodeListOf<Element> | null
```

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

### ThemeSwitcher with Images (Astro/Svelte/React)

Source: https://webcoreui.dev/docs/theme-switcher

Demonstrates how to replace icons with custom images in the ThemeSwitcher component across Astro, Svelte, and React.

```APIDOC
## POST /websites/webcoreui_dev/ThemeSwitcher/Images

### Description
Replace icons with custom images in the `ThemeSwitcher` component. Use slots for Astro/Svelte and props for React.

### Method
POST (conceptual)

### Endpoint
/websites/webcoreui_dev

### Parameters
#### Request Body
- **themes** (object) - Required - Define your themes.
- **toggle** (boolean) - Optional - Set to `true` for toggle functionality.

#### Slots/Props for Images
- **primaryIcon** (slot/prop) - For the primary image.
- **secondaryIcon** (slot/prop) - For the secondary image.

### Request Example (Astro)
```astro
---
import { ThemeSwitcher } from 'webcoreui/astro'

const themes = {
    '#252525': 'theme-dark',
    '#DDD': 'theme-light'
}
---

<ThemeSwitcher
    themes={themes}
    toggle={true}
>
    <img src="/path/to/img.png" slot="primaryIcon" />
    <img src="/path/to/img1.png" slot="secondaryIcon" />
</ThemeSwitcher>
```

### Request Example (Svelte)
```svelte
<script>
    import { ThemeSwitcher } from 'webcoreui/svelte'

    const themes = {
        '#252525': 'theme-dark',
        '#DDD': 'theme-light'
    }
</script>

<ThemeSwitcher
    themes={themes}
    toggle={true}
>
    <span slot="primaryIcon"><img src="/path/to/img.png" /></span>
    <span slot="secondaryIcon"><img src="/path/to/img1.png" /></span>
</ThemeSwitcher>
```

### Request Example (React)
```jsx
import React from 'react'
import { ThemeSwitcher } from 'webcoreui/react'

const themes = {
    '#252525': 'theme-dark',
    '#DDD': 'theme-light'
}

const Component = () => (
    <ThemeSwitcher
        themes={themes}
        toggle={true}
        primaryIcon={<img src="/path/to/img.png" />}
        secondaryIcon={<img src="/path/to/img1.png" />}
    />
)

export default Component
```

### Response
#### Success Response (200)
- **(UI Rendered)** - The ThemeSwitcher component is rendered with custom images.

#### Response Example
(Visual representation of the ThemeSwitcher with custom images)
```

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

### Toast Component Themes

Source: https://webcoreui.dev/docs/toast

Demonstrates how to apply different themes to the Toast component using the `theme` prop.

```APIDOC
## Themes

The `Toast` component comes with four different themes out of the box that can be configured with the `theme` prop: `info`, `success`, `warning`, `alert`.

### Request Example

```astro
<Toast title="Information" theme="info">Toast with info theme.</Toast>
<Toast title="Congratulations!" theme="success">Toast with success theme.</Toast>
<Toast title="Important" theme="warning">Toast with warning theme.</Toast>
<Toast title="Irreversible action" theme="alert">Toast with alert theme.</Toast>
```

### Response Example

(No direct response example, as this is a UI component)

### API

#### ToastProps

- **theme** (string) - Optional - Sets the theme of the toast. Can be one of `info`, `success`, `warning`, `alert`. Defaults to `info`.
```

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

### SpeedDial Positioning

Source: https://webcoreui.dev/docs/speed-dial

Examples demonstrating how to set the position of the SpeedDial component.

```APIDOC
## Positions

### Description
The `SpeedDial` component can be positioned in different corners of the screen. By default, it is fixed in the bottom-right corner. The `position` prop allows you to change this behavior.

### Examples

#### Top-left position
```jsx
<SpeedDial
    items={items}
    position="top-left"
/>
```

#### Top-right position
```jsx
<SpeedDial
    items={items}
    position="top-right"
/>
```

#### Bottom-left position
```jsx
<SpeedDial
    items={items}
    position="bottom-left"
/>
```

### Horizontal Layout

The layout of the navigation items can be changed from vertical to horizontal by setting the `horizontal` prop to `true`.

#### Top-left horizontal layout
```jsx
<SpeedDial
    items={items}
    position="top-left"
    horizontal={true}
/>
```

#### Top-right horizontal layout
```jsx
<SpeedDial
    items={items}
    position="top-right"
    horizontal={true}
/>
```

#### Bottom-left horizontal layout
```jsx
<SpeedDial
    items={items}
    position="bottom-left"
    horizontal={true}
/>
```
```

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

### Slider Component Usage

Source: https://webcoreui.dev/docs/slider

Examples of how to implement the Slider component in Astro, Svelte, and React, including dynamic label updates.

```APIDOC
## Slider Component with Dynamic Labels

This section demonstrates how to add dynamic labels to the Slider component by synchronizing a separate element with the slider's current value.

### Astro Example

```astro
import { Slider } from 'webcoreui/astro'
<script>
    let value = 40;
</script>

<span>{value}</span>
<Slider
    min={0}
    max={100}
    value={value}
    on:change={e => value = e.target.value}
/>
```

### Svelte Example

```svelte
<script>
    import { Slider } from 'webcoreui/svelte'

    let value = 40
</script>

<span>{value}</span>
<Slider
    min={0}
    max={100}
    value={value}
    onChange={e => value = e.target.value}
/>
```

### React Example

```jsx
import React, { useState } from 'react'
import { Slider } from 'webcoreui/react'

const Component = () => {
    const [value, setValue] = useState(40)

    return (
        <React.Fragment>
            <span>{value}</span>
            <Slider
                min={0}
                max={100}
                value={value}
                onChange={e => setValue(e.target.value)}
            />
        </React.Fragment>
    )
}

export default Component
```
```

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

### Rating with Default Text Example

Source: https://webcoreui.dev/docs/rating

Displays a rating with the default 'x out of y' text. Requires the 'score' and 'showText' props to be set.

```jsx
<Rating
    score={3}
    showText={true}
/>
```

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

### Configure Default Theme in Webcore UI

Source: https://webcoreui.dev/docs/themes

This snippet demonstrates how to set a default theme for Webcore UI by modifying the 'setup' mixin. It shows how to change the theme from the default 'dark' to 'light' or other available options. Dependencies include the webcoreui styles.

```scss
@use 'webcoreui/styles' as *;
@include setup((
    ...
    theme: 'light'
));

```

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

### Create and Trigger Modal Component with WebCoreUI

Source: https://webcoreui.dev/docs/utilities

Demonstrates how to create a basic Modal component using WebCoreUI's Button and Modal components, and then trigger its opening using JavaScript. The `modal` function can accept a configuration object with a `trigger` selector to open the modal when the trigger is clicked.

```html
<Button className="my-button">Open Modal</Button>
<Modal className="my-modal">
    Modal with text only.
</Modal>
```

```javascript
import { modal } from 'webcoreui'


modal({
    trigger: '.my-button',
    modal: '.my-modal'
})
```

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

### Kbd Component Usage (Astro)

Source: https://webcoreui.dev/docs/kbd

Demonstrates how to use the Kbd component in Astro to display keyboard shortcuts. The 'keys' prop accepts an array of keywords to render corresponding icons.

```astro
---
import { Kbd } from 'webcoreui/astro'
---


<Kbd keys={['cmd', 'shift']}>K</Kbd>

```

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

### Create Webcore Project with Template using CLI

Source: https://webcoreui.dev/docs/astro

Generate a new Webcore project from a specific template using the CLI. You can specify the template name and a destination directory for the new project.

```bash
npm create webcore@latest template [TemplateName] [destination]
npm create webcore@latest template Portfolio
npm create webcore@latest template Portfolio ./portfolio

```

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

### Spoiler Component in React

Source: https://webcoreui.dev/docs/spoiler

Provides an example of using the Spoiler component in a React functional component. The component hides its children until interacted with. Depends on 'webcoreui/react'.

```javascript
import React from 'react'
import { Spoiler } from 'webcoreui/react'


const Component = () => (
    <Spoiler>This text is only visible after click.</Spoiler>
)


export default Component
```

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

### Input Component Theming Options

Source: https://webcoreui.dev/docs/input

Showcases the different built-in themes available for the Input component, configurable via the `theme` prop. These themes include `info`, `success`, `warning`, `alert`, and `fill`, allowing for visual distinction and feedback. Additional styles can be applied using the `className` prop.

```html
<Input placeholder="Default input without theme" />
<Input theme="info" placeholder="Theme set to info" />
<Input theme="success" placeholder="Theme set to success" />
<Input theme="warning" placeholder="Theme set to warning" />
<Input theme="alert" placeholder="Theme set to alert" />
<Input theme="fill" placeholder="Theme set to fill" />
```

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

### Group with Separator (Buttons)

Source: https://webcoreui.dev/docs/group

Demonstrates how to enable separators between elements within a Group component using the `withSeparator` prop. This example uses Button components.

```html
<Group withSeparator={true}>
    <Button theme="secondary">Profile</Button>
    <Button theme="secondary">Preferences</Button>
    <Button theme="secondary">Settings</Button>
</Group>
```

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

### Automate Webcore Configuration in Existing Project

Source: https://webcoreui.dev/docs/astro

Automatically update configuration files for integrating Webcore into an existing project. This CLI command simplifies the manual configuration steps.

```bash
npm create webcore config

```

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

### Collapsible Component Without Animation

Source: https://webcoreui.dev/docs/collapsible

Provides an example of using the Collapsible component without animation by omitting the `maxHeight` prop. This is useful for static content toggling.

```html
This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.
Show more
Show less
```

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

### Basic RangeSlider Setup

Source: https://webcoreui.dev/docs/range-slider

This snippet demonstrates the basic usage of the RangeSlider component with a single label above the input. This is useful for simple filtering scenarios.

```jsx
<RangeSlider label="Filter for price" />
```

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

### Basic Spinner Integration (Astro, Svelte, React)

Source: https://webcoreui.dev/docs/spinner

Demonstrates the fundamental usage of the Spinner component in Astro, Svelte, and React projects. This serves as a starting point for integrating loading indicators into your application.

```astro
import { Spinner } from 'webcoreui/astro'
---

<Spinner />

```

```svelte
<script>
    import { Spinner } from 'webcoreui/svelte'
</script>


<Spinner />

```

```react
import React from 'react'
import { Spinner } from 'webcoreui/react'


const Component = () => <Spinner />


export default Component

```

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

### Textarea Component Usage (React/JSX)

Source: https://webcoreui.dev/docs/textarea

Demonstrates how to use the Textarea component with a default value and how to disable it. These examples show basic configuration for label and value props.

```jsx
<Textarea
    label="Textarea with default value"
    value="This textarea has a default value"
/>
<Textarea
    label="Disabled textarea"
    disabled={true}
    value="This textarea has a default value, but it's disabled."
/>
```
Tokens:
Raw