Shuriken UI

https://shurikenui.com/docs
Admin
Shuriken UI is an accessible and customizable component library built on Tailwind CSS and Reka UI,...
Tokens:98,856
Snippets:426
Trust Score:5.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Chip Examples

Source: https://shurikenui.com/docs/components/chip

Examples demonstrating the usage of the Chip component's props.

```APIDOC
## Chip Examples

### Chip Placement
Use the `placement` prop to change the chip's placement relative to the element it wraps.

```html
<template>
  <BaseChip placement="bottom-end">
    <div />
  </BaseChip>
</template>
```

### Chip Offset
Use the `offset` prop to move the chip from its default position.

```html
<template>
  <BaseChip :offset="6">
    <div />
  </BaseChip>
</template>
```

### Chip Colors
Use the `color` prop to change the chip's color. Set it to `custom` to use a custom color.

```html
<template>
  <BaseChip color="primary">
    <div />
  </BaseChip>
  <BaseChip color="custom" class="text-yellow-400">
    <div />
  </BaseChip>
</template>
```

### Pulse Animation
Use the `pulse` prop to add a pulse animation to the chip.

```html
<template>
  <BaseChip pulse>
    <div />
  </BaseChip>
</template>
```
```

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

### Install Dependencies with pnpm

Source: https://shurikenui.com/docs/advanced/contributing

Installs the project's dependencies using pnpm. This command should be run after cloning the repository.

```bash
pnpm install

```

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

### Default tailwind.config.js Example

Source: https://shurikenui.com/docs/components/prose

Demonstrates the default structure of a tailwind.config.js file, commonly used for configuring Tailwind CSS. This example shows the basic setup for purging unused styles, extending theme properties, defining variants, and including plugins.

```javascript
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

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

### Toast Provider Setup

Source: https://shurikenui.com/docs/components/toast

Example of setting up the `BaseProviders` component to manage toast notifications, including maximum toast count and position.

```APIDOC
## POST /websites/shurikenui/toast/provider

### Description
This section shows how to configure the `BaseProviders` component for toast notifications, specifying the maximum number of toasts and their display position.

### Method
POST

### Endpoint
/websites/shurikenui/toast/provider

### Parameters
#### Request Body
- **toast** (object) - Configuration object for toast notifications.
  - **max** (number) - Optional - The maximum number of toasts to display at once. Defaults to 3.
  - **position** (string) - Optional - The position of the toasts on the screen. Accepts 'top-center', 'top-left', 'top-right', 'bottom-center', 'bottom-left', 'bottom-right'. Defaults to 'top-center'.

### Request Example
```json
{
  "toast": {
    "max": 3,
    "position": "top-center"
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation that the toast provider has been configured.

#### Response Example
```json
{
  "message": "Toast provider configured successfully"
}
```
```

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

### Install Shuriken UI and Tailwind CSS

Source: https://shurikenui.com/docs/installation

Command to install Shuriken UI and Tailwind CSS as development dependencies in a Nuxt project using pnpm.

```bash
pnpm add -D @shuriken-ui/nuxt@next tailwindcss
```

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

### Snack Component Examples

Source: https://shurikenui.com/docs/components/snack

Examples demonstrating how to use the Snack component with different sizes.

```APIDOC
## Snack Component Examples

### Size
Use the `size` prop to change size of the snack.

#### Examples

##### Size xs
```vue
<template>
  <BaseSnack label="React" color="default" size="xs" />
</template>
```

##### Size sm
```vue
<template>
  <BaseSnack label="Angular" color="default" size="sm" />
</template>
```

##### Size md
```vue
<template>
  <BaseSnack label="Vue" color="default" size="md" />
</template>
```
```

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

### Vue Placeholder Page: Starting Soon Example

Source: https://shurikenui.com/docs/components/placeholder

Demonstrates the use of the BasePlaceholderPage component in Vue.js to display a 'Starting Soon' message with cancel and confirm buttons. It utilizes slots for image and content customization.

```vue
<template>
  <BasePlaceholderPage
    title="Starting Soon!"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges."
  >
    <template #image>
      <img
        img-size="md"
        src="/img/illustrations/vector/placeholder-1.svg"
        alt="placeholder-image"
      >
    </template>

    <div class="mt-2 flex justify-center gap-2">
      <BaseButton rounded="md" class="w-32">
        Cancel
      </BaseButton>
      <BaseButton variant="primary" rounded="md" class="w-32">
        Confirm
      </BaseButton>
    </div>
  </BasePlaceholderPage>
</template>

```

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

### Tag Component Examples

Source: https://shurikenui.com/docs/components/tag

Examples demonstrating the usage of the size and rounded props for the Shuriken UI Tag component.

```APIDOC
## Tag Component Examples

### Size
Use the `size` prop to change the size of the tag.

```html
<template>
  <BaseTag size="sm">
    Label
  </BaseTag>
  <BaseTag size="md">
    Label
  </BaseTag>
  <BaseTag size="lg">
    Label
  </BaseTag>
</template>
```

### Radius and Variant
Use the `variant` prop to change the variant of the tag.

```html
<template>
  <BaseTag variant="default">
    Label
  </BaseTag>
  <BaseTag variant="muted">
    Label
  </BaseTag>
  <BaseTag variant="primary">
    Label
  </BaseTag>
  <BaseTag variant="dark">
    Label
  </BaseTag>
</template>
```
```

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

### Install Tailwind Typography Plugin

Source: https://shurikenui.com/docs/components/prose

Installs the @tailwindcss/typography plugin as a development dependency using pnpm.

```shell
pnpm add -D @tailwindcss/typography
```

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

### Message Component Examples

Source: https://shurikenui.com/docs/components/message

Examples demonstrating how to use the `variant` prop to control the color of the message component.

```APIDOC
## Message Component Examples

### Type
Use the `variant` prop to control the color of the message.

#### Default Message
```vue
<template>
  <BaseMessage>
    A default message.
  </BaseMessage>
</template>
```

#### Primary Message
```vue
<template>
  <BaseMessage variant="primary">
    A primary message.
  </BaseMessage>
</template>
```

#### Success Message
```vue
<template>
  <BaseMessage variant="success">
    A successful message.
  </BaseMessage>
</template>
```

#### Info Message
```vue
<template>
  <BaseMessage variant="info">
    An information message.
  </BaseMessage>
</template>
```

#### Warning Message
```vue
<template>
  <BaseMessage variant="warning">
    A warning message.
  </BaseMessage>
</template>
```

#### Destructive Message
```vue
<template>
  <BaseMessage variant="destructive">
    A destructive message.
  </BaseMessage>
</template>
```
```

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

### Install Corepack with npm

Source: https://shurikenui.com/docs/advanced/contributing

Installs Corepack globally using npm. This command is necessary if your Node.js version is below v16.9.x.

```bash
npm install -g corepack
```

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

### Create New Nuxt Project

Source: https://shurikenui.com/docs/installation

Command to create a new Nuxt.js project using pnpm and navigate into the project directory.

```bash
pnpm dlx nuxi@latest init my-shuriken-app
cd my-shuriken-app
```

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

### Button Component - Link Example

Source: https://shurikenui.com/docs/components/button

Shows how to use the Button component as a link by utilizing the 'to' prop.

```APIDOC
## POST /websites/shurikenui/components/button/link

### Description
This endpoint demonstrates how to use the Button component as a navigation link. By providing a URL to the `to` prop, the button will render as an anchor tag (`<a>`).

### Method
POST

### Endpoint
/websites/shurikenui/components/button/link

### Parameters
#### Request Body
- **slot** (any) - Required - The content to be displayed as the link text.
- **to** (string) - Required - The URL to navigate to.
- **size** (string) - Optional - The size of the button. Allowed values: "sm", "md", "lg", "xl", "icon-sm", "icon-md", "icon-lg", "icon-xl". Defaults to "md".

### Request Example
{
  "slot": "Google.com",
  "to": "https://google.com",
  "size": "md"
}

### Response
#### Success Response (200)
- **html_output** (string) - The HTML representation of the button rendered as a link.

#### Response Example
{
  "html_output": "<a href=\"https://google.com\" class=\"shuriken-button shuriken-button--md\">Google.com</a>"
}
```

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

### Run Development Server

Source: https://shurikenui.com/docs/advanced/contributing

Starts the development server for the Nuxt playground app, allowing you to test changes to Shuriken UI Nuxt in real-time.

```bash
pnpm dev

```

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

### Configure Tailwind CSS and Shuriken UI Theme

Source: https://shurikenui.com/docs/installation

Main CSS file (`~/assets/css/main.css`) to import Tailwind CSS and the Shuriken UI theme.

```css
@import 'tailwindcss';
@import '@shuriken-ui/nuxt';
```

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

### Install @nuxt/fonts Module

Source: https://shurikenui.com/docs/theming/typography

Installs the `@nuxt/fonts` module as a development dependency in your Nuxt.js project.

```bash
pnpm add -D @nuxt/fonts

```

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

### Slider Examples

Source: https://shurikenui.com/docs/components/slider

Examples demonstrating the usage of different variants, multiple handles, and orientations for the Shuriken UI Slider component.

```APIDOC
## Slider Examples

### Variants

Use the `variant` prop to change the color of the progress bar. Set it to `none` to remove the default color and apply your own.

```vue
<template>
  <BaseSlider v-model="range" />
  <BaseSlider v-model="range" variant="primary" />
  <BaseSlider v-model="range" variant="dark" />
  <BaseSlider
    v-model="range"
    variant="none"
    class="text-pink-500"
    :classes="{
      tooltip: 'bg-pink-100 dark:bg-pink-900 text-pink-900 dark:text-pink-50',
      tooltipArrow: 'fill-pink-100 dark:fill-pink-900',
    }"
  />
</template>

<script setup lang="ts">
const range = ref(76)
</script>
```

### Multiple handles

Use the `v-model` prop to set the value of the slider. You can also use an array to set multiple values.

```vue
<template>
  <BaseSlider v-model="range" />
</template>

<script setup lang="ts">
const range = ref([29, 62, 77])
</script>
```

### Orientation

Use the `orientation` prop to change the direction of the slider. Set it to `vertical` to make it vertical.

```vue
<template>
  <BaseSlider v-model="range" orientation="vertical" />
</template>

<script setup lang="ts">
const range = ref(76)
</script>
```
```

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

### Shuriken UI SwitchBall Variants Example (Vue)

Source: https://shurikenui.com/docs/components/switch-ball

This Vue component example demonstrates how to use the `variant` prop on the `BaseSwitchBall` component to apply different color schemes ('default', 'primary', 'dark'). It includes the template for rendering switches and the script setup for managing their state.

```vue
<template>
  <BaseSwitchBall
    v-model="ballValues.one"
    variant="default"
  >
    Default
  </BaseSwitchBall>
  <BaseSwitchBall
    v-model="ballValues.two"
    variant="primary"
  >
    Primary
  </BaseSwitchBall>
  <BaseSwitchBall
    id="dark"
    v-model="ballValues.three"
    variant="dark"
  >
    Dark
  </BaseSwitchBall>
</template>

<script setup lang="ts">
const ballValues = reactive({
  one: true,
  two: true,
  three: true,
})
</script>

```

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

### Placeholder Component - Basic Usage

Source: https://shurikenui.com/docs/components/placeholder

A basic example of how to use the BasePlaceholderPage component with title, subtitle, and a call-to-action button.

```APIDOC
## BasePlaceholderPage

### Description
A placeholder component, for empty states.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **title** (string) - Optional - The title of the placeholder.
- **subtitle** (string) - Optional - The subtitle of the placeholder.
- **image-size** (string) - Optional - The size of the featured image. Allowed values: "xs", "sm", "md", "lg", "xl". Defaults to "xs".
- **as-child** (boolean) - Optional - Change the default rendered element for the one passed as a child, merging their props and behavior.
- **as** (AsTag | Component) - Optional - The element or component this component should render as. Can be overwritten by `asChild`.

#### Slots
- **#image** - The slot for the media element (e.g., an image).
- **#default** - The default slot for custom content.

### Request Example
```html
<template>
  <BasePlaceholderPage
    title="Looks like you are new!"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges."
  >
    <template #image>
      <img class="dark:invert" src="/img/vector/placeholders/placeholder-1.svg" alt="placeholder-image">
    </template>

    <div class="mt-2 flex justify-center gap-2">
      <BaseButton variant="primary" rounded="md" class="w-40">
        Take some action
      </BaseButton>
    </div>
  </BasePlaceholderPage>
</template>
```

### Response
#### Success Response (N/A)
This is a UI component, no direct API response.

#### Response Example
N/A
```

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

### BaseInput Component

Source: https://shurikenui.com/docs/components/input

Documentation for the BaseInput component, including its features, anatomy, API reference, customization, and examples.

```APIDOC
## BaseInput Component

### Description
A user input component, providing an editable field.

### Features
- Handles model binding
- Color customization
- Sizes and radius support

### Anatomy
This component is self-closing and can be used to create an input field. You can customize the input's visual style by using the available props.

### API Reference
This component has props that you can use to modify its visual style and behavior.

**Model**
| Type | 
|---| 
| `string | number` |

**Props**
| Prop | Type | Default | Description |
|---|---|---|---|
| `id` | `string` | `-` | The form input identifier. |
| `type` | `string` | `"text"` | The type of input. |
| `placeholder` | `string` | `-` | The placeholder to display for the input. |
| `variant` | `"default" | "muted"` | `"default"` | The variant of the input. |
| `rounded` | `"none" | "md" | "sm" | "lg" | "full"` | `"md"` | The radius of the input. |
| `size` | `"md" | "sm" | "lg" | "xl"` | `"md"` | The size of the input. |

### Customization
Your can override the component default CSS variables in your `main.css` file.

```css
@theme {
  /* Default input variables */
  --color-input-default-border: var(--color-muted-300);
  --color-input-default-bg: var(--color-white);
  --color-input-default-text: var(--color-muted-600);
  --color-input-default-placeholder: var(--color-muted-300);
  --color-input-default-button-bg: var(--color-muted-100);
  --color-input-default-button-bg-active: var(--color-muted-200);
  --color-input-default-button-text: var(--color-muted-700);

  /* Muted input variables */
  --color-input-muted-border: var(--color-muted-300);
  --color-input-muted-bg: var(--color-muted-50);
  --color-input-muted-text: var(--color-muted-600);
  --color-input-muted-placeholder: var(--color-muted-300);
  --color-input-muted-button-bg: var(--color-muted-200);
  --color-input-muted-button-bg-active: var(--color-muted-300);
  --color-input-muted-button-text: var(--color-muted-700);
}
```

### Examples

#### Size
Use the `size` prop to change the size of the input.

```vue
<template>
  <BaseInput
    v-model="value"
    size="md"
    placeholder="Ex: username"
  />
</template>

<script setup lang="ts">
const value = ref('')
</script>
```
```

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

### VSCode Tailwind CSS IntelliSense Configuration

Source: https://shurikenui.com/docs/installation

VSCode settings file (`.vscode/settings.json`) to enable Tailwind CSS IntelliSense for better autocompletion in CSS files.

```json
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}
```

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

### Primitive Field Component - Usage Example

Source: https://shurikenui.com/docs/components/primitive-field

An example of how to use the BasePrimitiveField component with input, loading, success, and error indicators.

```APIDOC
## GET /websites/shurikenui/components/primitive-field

### Description
This endpoint provides documentation and usage examples for the Primitive Field component.

### Method
GET

### Endpoint
/websites/shurikenui/components/primitive-field

### Request Example
```html
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <BasePrimitiveField required>
    <div class="relative">
      <BasePrimitiveFieldController>
        <BaseInput
          v-model="value"
          rounded="md"
          placeholder="Username"
        />
      </BasePrimitiveFieldController>
      <div class="absolute z-0 end-4 top-3 pointer-events-none">
        <BasePrimitiveFieldLoadingIndicator />
        <BasePrimitiveFieldSuccessIndicator />
        <BasePrimitiveFieldErrorIndicator />
      </div>
    </div>
  </BasePrimitiveField>
</template>
```

### Response
#### Success Response (200)
- **Content**: HTML and Vue component code for the Primitive Field.

#### Response Example
```html
<!-- HTML and Vue component code as shown in the Request Example -->
```
```

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

### Button as a Link Example (Vue)

Source: https://shurikenui.com/docs/components/button

Demonstrates how to use the `to` prop with the BaseButton component to render a button that functions as a hyperlink, navigating to a specified URL.

```vue
<template>
  <BaseButton to="https://google.com" size="md">
    Google.com
  </BaseButton>
</template>

```

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

### BaseHeading Component Example (Vue)

Source: https://shurikenui.com/docs/components/heading

Demonstrates the usage of the BaseHeading component in Vue.js, showcasing its props for size, weight, and leading. It can be rendered as any HTML tag.

```vue
<template>
  <BaseHeading as="h1" size="xl" weight="semibold" lead="normal">
    Iam a page heading
  </BaseHeading>
</template>
```

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

### Add Shuriken UI Base Providers

Source: https://shurikenui.com/docs/installation

Vue component (`~/app.vue`) to wrap the Nuxt application with Shuriken UI's base providers for context.

```vue
<template>
  <BaseProviders>
    <NuxtPage />
  </BaseProviders>
</template>
```

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

### BaseInput Component Size Example (Vue)

Source: https://shurikenui.com/docs/components/input

Illustrates changing the size of the BaseInput component using the 'size' prop.

```vue
<template>
  <BaseInput
    v-model="value"
    size="md"
    placeholder="Ex: username"
  />
</template>

<script setup lang="ts">
const value = ref('')
</script>

```

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

### Placeholder Component - Image Size Example

Source: https://shurikenui.com/docs/components/placeholder

Illustrates how to adjust the image size within the Placeholder component using the 'image-size' prop.

```APIDOC
## Placeholder Component - Image Size

### Description
Use the `image-size` prop to control the width of the image slot within the placeholder component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **image-size** (string) - Optional - The size of the featured image. Allowed values: "xs", "sm", "md", "lg", "xl". Defaults to "xs".

### Request Example
```html
<template>
  <BasePlaceholderPage image-size="lg">
    <template #image>
      <img src="/img/vector/placeholders/placeholder-1.svg" alt="large-placeholder-image">
    </template>
    <p>This placeholder has a large image.</p>
  </BasePlaceholderPage>
</template>
```

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

#### Response Example
N/A
```

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

### Example: Single Accordion

Source: https://shurikenui.com/docs/components

Demonstrates how to use the Accordion component to display items where only one can be open at a time.

```APIDOC
## Example: Single Accordion

### Description

Use the `type="single"` prop to ensure that only one accordion item can be expanded at any given time. This is a common pattern for displaying sequential information.

### Code Example

```vue
<template>
  <BaseAccordion
    :items="accordion"
    type="single"
  />
</template>

<script setup lang="ts">
const accordion = [
  {
    value: 'item-1',
    title: 'Accordion Item 1',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-2',
    title: 'Accordion Item 2',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-3',
    title: 'Accordion Item 3',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
]
</script>
```
```

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

### Primitive Field Usage Example

Source: https://shurikenui.com/docs/components/primitive-field

Demonstrates a basic implementation of the Primitive Field component, including input binding, placeholder text, and loading/success/error indicators. This example shows how to integrate the Primitive Field with other Shuriken UI input components.

```vue
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <BasePrimitiveField required>
    <div class="relative">
      <BasePrimitiveFieldController>
        <BaseInput
          v-model="value"
          rounded="md"
          placeholder="Username"
        />
      </BasePrimitiveFieldController>
      <div class="absolute z-0 end-4 top-3 pointer-events-none">
        <BasePrimitiveFieldLoadingIndicator />
        <BasePrimitiveFieldSuccessIndicator />
        <BasePrimitiveFieldErrorIndicator />
      </div>
    </div>
  </BasePrimitiveField>
</template>
```

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

### Button Anatomy Example (Vue)

Source: https://shurikenui.com/docs/components/button

Illustrates the fundamental structure for using the BaseButton component, highlighting that it accepts any content as a child.

```vue
<template>
  <BaseButton>
    <!-- Content goes here -->
  </BaseButton>
</template>

```

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

### Pagination Anatomy Example

Source: https://shurikenui.com/docs/components/pagination

Illustrates how to customize the pagination layout by using slots to control the placement of navigation buttons and page items.

```APIDOC
## Pagination Anatomy

### Description
This example demonstrates customizing the `BasePagination` component's structure using slots. It shows how to explicitly define the layout for the first/previous buttons, page items, and next/last buttons.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A (Component Usage)

### Request Example
```html
<template>
  <BasePagination>
    <div>
      <BasePaginationButtonFirst />
      <BasePaginationButtonPrev />
    </div>
    <BasePaginationItems />
    <div>
      <BasePaginationButtonNext />
      <BasePaginationButtonLast />
    </div>
  </BasePagination>
</template>
```

### Response
N/A (Component Usage)

```

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

### Configure Nuxt.js with Shuriken UI Module

Source: https://shurikenui.com/docs/installation

Nuxt configuration file (`nuxt.config.ts`) to register the Shuriken UI module and specify the main CSS file.

```js
export default defineNuxtConfig({
  modules: [
    '@shuriken-ui/nuxt',
  ],
  css: [
    '~/assets/css/main.css',
  ],
})
```

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

### BaseMessage Component Example (Vue)

Source: https://shurikenui.com/docs/components/message

Demonstrates the basic usage of the BaseMessage component in Vue.js, including setting an icon and rounded corners.

```vue
<template>
  <BaseMessage
    icon
    rounded="md"
  >
    A default message.
  </BaseMessage>
</template>
```

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

### Vue Placeholder Page: Get Notified Example

Source: https://shurikenui.com/docs/components/placeholder

Illustrates how to use the BasePlaceholderPage component in Vue.js for a 'Get Notified' feature. It includes an input field for email subscription and a primary button to submit.

```vue
<template>
  <BasePlaceholderPage
    title="Get Notified"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges."
  >
    <template #image>
      <img
        src="/img/vector/placeholders/placeholder-3.svg"
        alt="placeholder-image"
      >
    </template>

    <div class="mt-2 flex justify-center gap-2">
      <BaseInput
        rounded="md"
        placeholder="Enter your email"
      />
      <BaseButton variant="primary" rounded="md">
        Subscribe
      </BaseButton>
    </div>
  </BasePlaceholderPage>
</template>

```

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

### Dropdown Item with Start Icon

Source: https://shurikenui.com/docs/components/dropdown

Explains how to insert an icon into a dropdown item using the `#start` slot. This example showcases adding different solar system icons to each dropdown item for visual distinction.

```vue
<template>
  <BaseDropdown label="Dropdown" rounded="md">
    <BaseDropdownItem
      title="Profile"
      text="View your profile"
      class="w-72"
    >
      <template #start>
        <Icon name="solar:user-rounded-linear" class="me-2 block text-[1.15rem]" />
      </template>
    </BaseDropdownItem>
    <BaseDropdownItem
      title="Projects"
      text="View your projects"
    >
      <template #start>
        <Icon name="solar:case-linear" class="me-2 block text-[1.15rem]" />
      </template>
    </BaseDropdownItem>
    <BaseDropdownItem
      title="Team"
      text="Manage your team"
    >
      <template #start>
        <Icon name="solar:widget-3-linear" class="me-2 block text-[1.15rem]" />
      </template>
    </BaseDropdownItem>
    <BaseDropdownSeparator />
    <BaseDropdownItem
      title="Settings"
      text="Set your preferences"
    >
      <template #start>
        <Icon name="solar:settings-linear" class="me-2 block text-[1.15rem]" />
      </template>
    </BaseDropdownItem>
  </BaseDropdown>
</template>
```

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

### Avatar in Dropdown Item (Vue)

Source: https://shurikenui.com/docs/components/dropdown

This example shows how to place a BaseAvatar component within the '#start' slot of a BaseDropdownItem. It iterates through multiple dropdown items, each with a unique avatar source and associated user information.

```vue
<template>
  <BaseDropdown label="Dropdown" rounded="md">
    <BaseDropdownItem
      title="Lana Jensen"
      text="Software Engineer"
      class="w-80"
    >
      <template #start>
        <BaseAvatar
          src="/img/people/36.jpg"
          size="xs"
        />
      </template>
    </BaseDropdownItem>
    <BaseDropdownItem
      title="Shawn Miller"
      text="Product Manager"
    >
      <template #start>
        <BaseAvatar
          src="/img/people/18.jpg"
          size="xs"
        />
      </template>
    </BaseDropdownItem>
    <BaseDropdownItem
      title="John Marynski"
      text="Sales Manager"
    >
      <template #start>
        <BaseAvatar
          src="/img/people/16.jpg"
          size="xs"
        />
      </template>
    </BaseDropdownItem>
    <BaseDropdownItem
      title="Garry Porter"
      text="CEO - Founder"
    >
      <template #start>
        <BaseAvatar
          src="/img/people/6.jpg"
          size="xs"
        />
      </template>
    </BaseDropdownItem>
  </BaseDropdown>
</template>
```

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

### Set BaseSelect to Disabled State (Vue)

Source: https://shurikenui.com/docs/components/select

Illustrates how to disable the `BaseSelect` component using the `disabled` prop. This prevents user interaction with the select input. The example is written in Vue using template and script setup.

```vue
<template>
  <BaseSelect
    v-model="value"
    rounded="md"
    placeholder="Select a hero"
    disabled
  >
    <BaseSelectItem value="Superman">
      Superman
    </BaseSelectItem>
    <BaseSelectItem value="Batman">
      Batman
    </BaseSelectItem>
    <BaseSelectItem value="Iron man">
      Iron man
    </BaseSelectItem>
    <BaseSelectItem value="Magneto">
      Magneto
    </BaseSelectItem>
    <BaseSelectItem value="Cyclops">
      Cyclops
    </BaseSelectItem>
  </BaseSelect>
</template>

<script setup lang="ts">
const value = ref('')
</script>
```

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

### Shuriken UI BaseAutocomplete with BaseField

Source: https://shurikenui.com/docs/components/field

Illustrates integrating the BaseField component with the BaseAutocomplete component in Vue.js. This setup allows for state management and provides props for input attributes and refs. The example includes a placeholder and a clearable option.

```vue
<template>
  <BaseField
    id="options"
    v-slot="{ inputAttrs, inputRef }"
    label="Search an option"
    class="w-full"
  >
    <BaseAutocomplete
      :ref="inputRef"
      v-bind="inputAttrs"
      placeholder="autocomplete placeholder"
      clearable
    >
      <BaseAutocompleteItem value="1">
        Option 1
      </BaseAutocompleteItem>
      <BaseAutocompleteItem value="2">
        Option 2
      </BaseAutocompleteItem>
      <BaseAutocompleteItem value="3">
        Option 3
      </BaseAutocompleteItem>
      <BaseAutocompleteItem value="4">
        Option 4
      </BaseAutocompleteItem>
      <BaseAutocompleteItem value="5">
        Option 5
      </BaseAutocompleteItem>
      <BaseAutocompleteItem value="6">
        Option 6
      </BaseAutocompleteItem>
    </BaseAutocomplete>
  </BaseField>
</template>

```

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

### Set BaseSelect to Error State with aria-invalid (Vue)

Source: https://shurikenui.com/docs/components/select

Demonstrates how to use the `aria-invalid` prop on the `BaseSelect` component to indicate an error state. This is useful for accessibility and user feedback. The example uses Vue's template and script setup syntax.

```vue
<template>
  <BaseSelect
    v-model="value"
    rounded="md"
    placeholder="Select a hero"
    aria-invalid="true"
  >
    <BaseSelectItem value="Superman">
      Superman
    </BaseSelectItem>
    <BaseSelectItem value="Batman">
      Batman
    </BaseSelectItem>
    <BaseSelectItem value="Iron man">
      Iron man
    </BaseSelectItem>
    <BaseSelectItem value="Magneto">
      Magneto
    </BaseSelectItem>
    <BaseSelectItem value="Cyclops">
      Cyclops
    </BaseSelectItem>
  </BaseSelect>
</template>

<script setup lang="ts">
const value = ref('')
</script>
```

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

### Set Input File Size with 'size' prop (Vue)

Source: https://shurikenui.com/docs/components/input-file

Demonstrates how to use the 'size' prop on the BaseInputFile component to control the input's size. The 'md' size is used in this example. It requires a Vue setup with 'ref' for model binding.

```vue
<template>
  <BaseInputFile v-model="file" size="md" placeholder="Upload a file" />
</template>

<script setup lang="ts">
const file = ref<FileList | null>(null)
</script>

```

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

### Kbd Component Usage Example - Vue

Source: https://shurikenui.com/docs/components/kbd

Demonstrates how to use the BaseKbd component in Vue to display keyboard shortcuts like Command + K. It showcases the 'variant' and 'size' props for customization.

```vue
<template>
  <div class="flex items-center gap-1">
    <BaseKbd
      variant="default"
      size="md"
    >
      ⌘
    </BaseKbd>
    +
    <BaseKbd
      variant="default"
      size="md"
    >
      <span class="px-1">k</span>
    </BaseKbd>
  </div>
</template>
```

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

### Input File Component

Source: https://shurikenui.com/docs/components/input-file

Documentation for the Shuriken UI Input File component, a simple file upload input.

```APIDOC
## Input File Component

`<BaseInputFile />` · A simple file upload input

### Description
This component provides a basic file upload input functionality. It supports model binding, color customization, and size/radius adjustments.

### Method
N/A (This is a UI component, not an API endpoint)

### Endpoint
N/A (This is a UI component, not an API endpoint)

### Features
* Handles model binding
* Color customization
* Sizes and radius support

### Anatomy
This component is self-closing and can be used to create a file input. You can customize the input's visual style by using the available props.

### API Reference

#### Model
| Field       | Type              |
|-------------|-------------------|
| `model-value` | `FileList | null` |

#### Props
| Prop          | Type                                                                                     | Default | Description                                                                 |
|---------------|------------------------------------------------------------------------------------------|---------|-----------------------------------------------------------------------------|
| `id`          | `string`                                                                                 | `-`     | The form input identifier.                                                  |
| `placeholder` | `string`                                                                                 | `-`     | The placeholder to display for the file input.                              |
| `disabled`    | `boolean`                                                                                | `-`     | Whether the input is disabled.                                              |
| `multiple`    | `boolean`                                                                                | `-`     | Allows multiple files to be selected.                                       |
| `text-value`  | `((fileList?: FileList | null) => string)`                                              | `-`     | Method to return the text value of the file input.                        |
| `variant`     | `"default" | "primary" | "muted"`                                                               | `"default"` | The variant of the input.                                                   |
| `rounded`     | `"none" | "md" | "sm" | "lg" | "full"`                                                               | `"md"`    | The radius of the file input.                                               |
| `size`        | `"md" | "sm" | "lg" | "xl"`                                                                   | `"md"`    | The size of the input.                                                      |
| `classes`     | `{ root?: string | string[]; button?: string | string[]; text?: string | string[]; placeholder?: string | string[]; }` | `{}`    | Optional classes to pass to the inner components.                           |

### Customization
Override default CSS variables in your `main.css` file.

```css
@theme {
  /* Default input variables */
  --color-input-default-border: var(--color-muted-300);
  --color-input-default-bg: var(--color-white);
  --color-input-default-text: var(--color-muted-600);
  --color-input-default-placeholder: var(--color-muted-300);
  --color-input-default-button-bg: var(--color-muted-100);
  --color-input-default-button-bg-active: var(--color-muted-200);
  --color-input-default-button-text: var(--color-muted-700);

  /* Muted input variables */
  --color-input-muted-border: var(--color-muted-300);
  --color-input-muted-bg: var(--color-muted-50);
  --color-input-muted-text: var(--color-muted-600);
  --color-input-muted-placeholder: var(--color-muted-300);
  --color-input-muted-button-bg: var(--color-muted-200);
  --color-input-muted-button-bg-active: var(--color-muted-300);
  --color-input-muted-button-text: var(--color-muted-700);
}
```
```

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

### Enable Corepack

Source: https://shurikenui.com/docs/advanced/contributing

Command to enable Corepack, a tool for managing Node.js package manager versions. This is a prerequisite for using pnpm.

```bash
corepack enable

```

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

### BaseTag Radius and Variant Examples (Vue)

Source: https://shurikenui.com/docs/components/tag

Provides examples of using the `variant` prop on the BaseTag component in Vue.js to change its appearance. It showcases different variants including default, muted, primary, and dark.

```vue
<template>
  <BaseTag variant="default">
    Label
  </BaseTag>
  <BaseTag variant="muted">
    Label
  </BaseTag>
  <BaseTag variant="primary">
    Label
  </BaseTag>
  <BaseTag variant="dark">
    Label
  </BaseTag>
</template>

```

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

### Vue Nested Typography Formatting Example

Source: https://shurikenui.com/docs/theming/typography

Illustrates how to achieve rich text formatting by nesting typography components within each other. This example shows how to make specific parts of a paragraph bold using the BaseText component.

```vue
<template>
  <BaseParagraph size="sm">
    This is a
    <BaseText weight="semibold">
      very important
    </BaseText>
    message!
  </BaseParagraph>
</template>

```

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

### Shuriken UI Number Input Rounded Example

Source: https://shurikenui.com/docs/components/input-number

Shows how to apply rounded borders to the Shuriken UI Number Input using the `rounded` prop. This example sets the border radius to 'full'.

```vue
<template>
  <BaseInputNumber
    v-model="value"
    rounded="full"
    placeholder="Quantity"
  />
</template>

<script setup lang="ts">
const value = ref(0)
</script>

```

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

### Button Component - Base Usage

Source: https://shurikenui.com/docs/components/button

Demonstrates the basic usage of the BaseButton component from Shuriken UI.

```APIDOC
## POST /websites/shurikenui/components/button

### Description
This endpoint represents the basic usage of the Button component. It shows how to render a simple button with default or specified properties.

### Method
POST

### Endpoint
/websites/shurikenui/components/button

### Parameters
#### Request Body
- **slot** (any) - Required - The content to be rendered inside the button.
- **size** (string) - Optional - The size of the button. Allowed values: "sm", "md", "lg", "xl", "icon-sm", "icon-md", "icon-lg", "icon-xl". Defaults to "md".

### Request Example
{
  "slot": "Button",
  "size": "md"
}

### Response
#### Success Response (200)
- **html_output** (string) - The HTML representation of the rendered button.

#### Response Example
{
  "html_output": "<button class=\"shuriken-button shuriken-button--md\">Button</button>"
}
```

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

### Shuriken UI Number Input Variants Example

Source: https://shurikenui.com/docs/components/input-number

Illustrates the use of the `variant` prop to change the visual style of the Shuriken UI Number Input. Two examples are provided: 'default' and 'muted'.

```vue
<template>
  <BaseInputNumber
    v-model="value"
    variant="default"
    placeholder="Quantity"
  />
  <BaseInputNumber
    v-model="value"
    variant="muted"
    placeholder="Quantity"
  />
</template>

<script setup lang="ts">
const value = ref(0)
</script>

```

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

### Placeholder Component - Anatomy

Source: https://shurikenui.com/docs/components/placeholder

Demonstrates the structure and slot usage for the Placeholder component, showing where to place media and custom content.

```APIDOC
## Placeholder Component Anatomy

### Description
This component accepts any content as a child. You can customize the component visual style by using the available props. The anatomy highlights the primary slots available for customization.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Slots
- **#image** (any) - Slot for media elements like images.
- **#default** (any) - Default slot for any custom content.

### Request Example
```html
<template>
  <BasePlaceholderPage>
    <template #image>
      <!-- Media goes here -->
    </template>
    <template #default>
      <!-- Content goes here -->
    </template>
  </BasePlaceholderPage>
</template>
```

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

#### Response Example
N/A
```

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

### Shuriken UI Number Input Size Example

Source: https://shurikenui.com/docs/components/input-number

Demonstrates how to use the `size` prop to control the dimensions of the Shuriken UI Number Input component. The example sets the size to 'md' and provides a placeholder.

```vue
<template>
  <BaseInputNumber
    v-model="value"
    size="md"
    placeholder="Size: md"
  />
</template>

<script setup lang="ts">
const value = ref(0)
</script>

```

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

### Run Project Tests

Source: https://shurikenui.com/docs/advanced/contributing

Executes the project's tests, including linting, to ensure code quality and functionality after making changes.

```bash
pnpm test

```

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

### Kbd Component

Source: https://shurikenui.com/docs/components/kbd

Documentation for the Kbd component, an abstraction of a keyboard key. It includes features, anatomy, and API reference.

```APIDOC
## Kbd Component

An abstraction of a keyboard key.

### Features

* Easy to use
* Supports variants and sizes

### Anatomy

This component can have any children inside its default slot. You can use the provided slots to create a custom `kbd` element.

```vue
<template>
  <BaseKbd>
    <!-- Your custom content here -->
  </BaseKbd>
</template>
```

### API Reference

This component has props that you can use to modify its visual style.

#### Props

- **variant** (string) - Optional, default: `"default"`. The variant of the kbd. Allowed values: `"default"`, `"none"`, `"muted"`.
- **size** (string) - Optional, default: `"md"`. The size of the kbd. Allowed values: `"md"`, `"sm"`, `"lg"`.
- **as-child** (boolean) - Optional. Change the default rendered element for the one passed as a child, merging their props and behavior.
- **as** (AsTag | Component) - Optional, default: `"kbd"`. The element or component this component should render as. Can be overwritten by `asChild`.

#### Slots

- **#default** (`any`) - The default slot for the content of the Kbd component.
```

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

### Avatar Group Limit Example Vue Component

Source: https://shurikenui.com/docs/components/avatar-group

Demonstrates how to manage the number of avatars displayed in an Avatar Group using the `limit` prop in Vue. This example sets the limit to 8, showing a counter if more avatars are provided than the limit.

```vue
<template>
  <BaseAvatarGroup :avatars="people" :limit="8" />
</template>

<script setup lang="ts">
const people = [
  {
    src: '/img/avatars/19.svg',
  },
  {
    src: '/img/avatars/16.svg',
  },
  {
    src: '/img/avatars/3.svg',
  },
  {
    src: '/img/avatars/22.svg',
  },
  {
    src: '/img/avatars/2.svg',
  },
]
</script>

```
Tokens:
Raw