### Install Storefront UI and Tailwind Dependencies

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Installs Tailwind CSS, PostCSS, Autoprefixer, and the Storefront UI React package using pnpm.

```bash
pnpm add -D tailwindcss postcss autoprefixer @storefront-ui/react
```

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

### Install Storefront UI and Tailwind Dependencies (Next.js)

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Installs the Storefront UI React library and necessary Tailwind CSS packages for a Next.js project.

```bash
# npm
npm i @storefront-ui/react
npm i -D tailwindcss postcss autoprefixer

# yarn
yarn add @storefront-ui/react
yarn add -D tailwindcss postcss autoprefixer

# pnpm
pnpm add @storefront-ui/react
pnpm add -D tailwindcss postcss autoprefixer
```

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

### Install Storefront UI and Tailwind Dependencies (Vite)

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Installs the Storefront UI React library and necessary Tailwind CSS packages for a Vite project.

```bash
# npm
npm i -D tailwindcss postcss autoprefixer @storefront-ui/react

# yarn
yarn add -D tailwindcss postcss autoprefixer @storefront-ui/react

# pnpm
pnpm add -D tailwindcss postcss autoprefixer @storefront-ui/react
```

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

### Add Vue and Tailwind Integrations to Astro

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

This command installs the necessary Vue and Tailwind CSS integrations for an Astro project. It simplifies the setup process by automatically handling dependency installation and basic configuration.

```bash
# npm
npx astro add vue tailwind

# yarn
yarn astro add vue tailwind

# pnpm
pnpm astro add vue tailwind
```

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

### Initialize Tailwind CSS

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Generates the `tailwind.config.js` and `postcss.config.js` files in the project root.

```bash
npx tailwindcss init -p
```

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

### Create Next.js Project

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Commands to create a new Next.js application using npm, yarn, or pnpm.

```bash
# npm
npx create-next-app@latest

# yarn
yarn create next-app

# pnpm
pnpm create next-app
```

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

### Install Storefront UI Vue Dependencies for Astro

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

Installs the `@storefront-ui/vue` library and its Tailwind preset as development dependencies for an Astro project. This step is crucial for enabling Storefront UI components and styles.

```bash
# npm
npm i -D @storefront-ui/vue

# yarn
yarn add -D @storefront-ui/vue

# pnpm
pnpm add -D @storefront-ui/vue
```

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

### Install @storefront-ui/nuxt Module

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/packages/sfui/frameworks/nuxt/README.md

Installs the Storefront UI Nuxt module using package managers like npm, yarn, or pnpm. This module simplifies integration with Nuxt 3 and automatically handles Tailwind CSS setup.

```bash
# npm
npm i -D @storefront-ui/nuxt

# yarn
yarn add -D @storefront-ui/nuxt

# pnpm
pnpm add -D @storefront-ui/nuxt
```

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

### Install Storefront UI Nuxt Module

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

Installs the `@storefront-ui/nuxt` module, which automatically handles Tailwind CSS integration and other necessary configurations for Nuxt 3 projects. Supports npm, yarn, and pnpm.

```bash
# npm
npm i -D @storefront-ui/nuxt

# yarn
yarn add -D @storefront-ui/nuxt

# pnpm
pnpm add -D @storefront-ui/nuxt
```

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

### Create Vite + React Project

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Commands to create a new Vite project with React and TypeScript using npm, yarn, or pnpm.

```bash
# npm 6.x
npm create vite@latest my-sfui-app --template react-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-sfui-app -- --template react-ts

# yarn
yarn create vite my-sfui-app --template react-ts

# pnpm
pnpm create vite my-sfui-app --template react-ts
```

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

### Storefront UI Local Development Setup

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/README.md

Instructions for installing dependencies and running the Storefront UI project locally. It also details how to run specific previews for Vue or React applications and mentions the need to build subdependencies.

```shell
yarn
yarn dev
```

```shell
# To run only Vue preview:
cd /apps/preview/nuxt
yarn dev
```

```shell
# To run only React preview:
cd /apps/preview/next
yarn dev
```

```shell
# Example for building a subdependency:
yarn build @storefront-ui/shared
```

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

### Initialize Tailwind CSS

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Command to generate Tailwind CSS configuration files (`tailwind.config.js` and `postcss.config.js`).

```bash
npx tailwindcss init -p
```

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

### Install Storefront UI & Tailwind Dependencies (Vite)

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

Installs the necessary dependencies for Storefront UI's Vue library and Tailwind CSS, including Tailwind CSS itself, PostCSS, and Autoprefixer. Supports npm, yarn, and pnpm.

```bash
# npm
npm i -D tailwindcss postcss autoprefixer @storefront-ui/vue

# yarn
yarn add -D tailwindcss postcss autoprefixer @storefront-ui/vue

# pnpm
pnpm add -D tailwindcss postcss autoprefixer @storefront-ui/vue
```

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

### Initialize Tailwind CSS

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

Command to initialize Tailwind CSS in your project, generating `tailwind.config.js` and `postcss.config.js` files.

```bash
npx tailwindcss init -p
```

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

### Create Vite Project

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

Commands to create a new Vue 3 project using Vite with TypeScript template. Supports npm, yarn, and pnpm package managers.

```bash
# npm 6.x
npm create vite@latest my-vue-app --template vue-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue-ts

# yarn
yarn create vite my-vue-app --template vue-ts

# pnpm
pnpm create vite my-vue-app --template vue-ts
```

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

### Add Tailwind CSS Directives

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Includes the necessary Tailwind CSS layers in the global CSS file.

```css
/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

### Configure Tailwind for Storefront UI

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Modifies `tailwind.config.js` to include the Storefront UI Tailwind preset and content paths.

```javascript
// tailwind.config.js
const { tailwindConfig } = require('@storefront-ui/react/tailwind-config');

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [tailwindConfig],
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@storefront-ui/react/**/*.{js,mjs}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

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

### Install SF Typography Plugin

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/packages/sfui/typography/README.md

Installs the Storefront UI Typography plugin as a development dependency using npm. This command is essential before configuring the plugin in your Tailwind CSS setup.

```bash
npm install --save-dev @storefront-ui/typography
```

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

### SfTooltip Basic Usage Example

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/tooltip.md

Illustrates the fundamental implementation of the SfTooltip component. This example showcases how to integrate the tooltip for displaying additional information on user interaction in both Vue and React environments.

```vue
<<<../../../../preview/nuxt/pages/showcases/Tooltip/BasicTooltip.vue
```

```react
<<<../../../../preview/next/pages/showcases/Tooltip/BasicTooltip.tsx
```

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

### Custom Tailwind CSS File Setup

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/packages/sfui/frameworks/nuxt/README.md

Demonstrates how to set up a custom Tailwind CSS file (e.g., ~/assets/css/tailwind.css) by including the necessary @tailwind directives for base, components, and utilities.

```css
/* ~/assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

### Next.js ESM Module Workaround

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Configuration for `next.config.js` to resolve ESM module issues with Storefront UI in Next.js 13.

```javascript
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@storefront-ui/react'],
};

module.exports = nextConfig;
```

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

### Configure Tailwind with Storefront UI Preset

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Modifies `tailwind.config.js` to include the Storefront UI Tailwind preset and configure content paths for Tailwind to detect utility classes.

```ts
// tailwind.config.js
import { tailwindConfig } from '@storefront-ui/react/tailwind-config';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [tailwindConfig],
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/@storefront-ui/react/**/*.{js,mjs}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

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

### SfInput Full Example

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/input.md

A comprehensive example of SfInput demonstrating label, help text, character counting, and dynamic styling based on input state. This showcases a real-world application of the component's features.

```vue
<template>
  <SfInput
    v-model="value"
    label="Your Name"
    help-text="Enter your full name"
    :maxlength="50"
    placeholder="Type here..."
    :invalid="isInvalid"
    @input="checkInput"
  />
  <p v-if="isInvalid" style="color: red;">Name cannot be empty.</p>
  <p>Characters left: {{ 50 - value.length }}</p>
</template>

<script setup>
import { SfInput } from '@storefront-ui/vue';
import { ref } from 'vue';

const value = ref('');
const isInvalid = ref(false);

const checkInput = (event) => {
  isInvalid.value = event.target.value.length === 0;
};
</script>
```

```react
import React, { useState } from 'react';
import { SfInput } from '@storefront-ui/react';

function App() {
  const [value, setValue] = useState('');
  const [isInvalid, setIsInvalid] = useState(false);

  const handleInput = (e) => {
    setValue(e.target.value);
    setIsInvalid(e.target.value.length === 0);
  };

  return (
    <div>
      <SfInput
        value={value}
        onChange={handleInput}
        label="Your Name"
        helpText="Enter your full name"
        maxLength={50}
        placeholder="Type here..."
        invalid={isInvalid}
      />
      {isInvalid && <p style={{ color: 'red' }}>Name cannot be empty.</p>}
      <p>Characters left: {50 - value.length}</p>
    </div>
  );
}

export default App;
```

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

### Configure Tailwind for Storefront UI (Vite)

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

Modifies the `tailwind.config.js` file to include Storefront UI's Tailwind preset and configure the content paths for Tailwind to scan your Vue files and the Storefront UI package.

```typescript
// tailwind.config.js
import { tailwindConfig } from '@storefront-ui/vue/tailwind-config';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [tailwindConfig],
  content: ['./index.html', './**/*.vue', './node_modules/@storefront-ui/vue/**/*.{js,mjs}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

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

### Install Storefront UI Typography Plugin

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/3.customization/typography.md

Installs the @storefront-ui/typography plugin using package managers like npm, yarn, or pnpm. This is the first step to integrate typography utilities into your project.

```bash
# npm
npm i -D @storefront-ui/typography

# yarn
yarn add -D @storefront-ui/typography

# pnpm
pnpm add -D @storefront-ui/typography
```

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

### Add Tailwind Directives to CSS

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/react.md

Includes the necessary Tailwind CSS directives (`@tailwind base`, `@tailwind components`, `@tailwind utilities`) in the main CSS file to apply Tailwind's styles.

```css
/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

### Configure Nuxt for Storefront UI

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

Adds the `@storefront-ui/nuxt` module to your `nuxt.config.ts` file to enable Storefront UI and its Tailwind CSS integration within your Nuxt 3 application.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@storefront-ui/nuxt']
})
```

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

### Configure Astro Tailwind CSS with Storefront UI Preset

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

This JavaScript configuration file (`tailwind.config.cjs`) integrates the Storefront UI Tailwind preset into an Astro project. It merges the preset with project-specific content paths and theme extensions for a unified styling approach.

```javascript
const { tailwindConfig } = require('@storefront-ui/vue/tailwind-config');

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [tailwindConfig],
  content: ['./index.html', './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', './node_modules/@storefront-ui/vue/**/*.{js,mjs}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

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

### Basic Usage Example

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/dropdown.md

Demonstrates the default behavior of the SfDropdown component, where the floating content is positioned below the trigger element. This example showcases the component's fundamental functionality.

```vue
<<<../../../../preview/nuxt/pages/showcases/Dropdown/BasicDropdown.vue
```

```react
<<<../../../../preview/next/pages/showcases/Dropdown/BasicDropdown.tsx
```

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

### Add Tailwind CSS Directives

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

Adds the necessary Tailwind CSS directives (`@tailwind base`, `@tailwind components`, `@tailwind utilities`) to your main CSS file, enabling Tailwind's styles and Storefront UI's integration.

```css
/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

### Install Storefront UI Peer Next Plugin

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/packages/sfui/tw-plugin-peer-next/README.md

Install the `@storefront-ui/tw-plugin-peer-next` package using npm. This plugin enhances Tailwind CSS by allowing styling of adjacent siblings.

```bash
npm install --save-dev @storefront-ui/tw-plugin-peer-next
```

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

### Link Variants Example

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/link.md

Demonstrates the usage of the SfLink component with its 'primary' and 'secondary' variants.

```react
<<<<../../../../preview/next/pages/showcases/Link/LinkVariants.tsx
```

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

### Link Variants Example

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/link.md

Demonstrates the usage of the SfLink component with its 'primary' and 'secondary' variants.

```vue
<<<<../../../../preview/nuxt/pages/showcases/Link/LinkVariants.vue
```

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

### Basic Search with Autocomplete

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_blocks/Search.md

Demonstrates the basic Search component with live autocomplete suggestions. This example uses mock data for suggestions and is suitable for showcasing the core functionality and keyboard accessibility.

```vue
<template>
  <SfInput
    v-model="search"
    placeholder="Search for products..."
    aria-label="Search"
    class="search-input"
  />
  <div v-if="suggestions.length > 0" class="suggestions-list">
    <!-- Render suggestions here -->
    <div v-for="suggestion in suggestions" :key="suggestion.id">
      {{ suggestion.name }}
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
// import { SfInput } from '@storefront-ui/vue'; // Assuming SfInput is imported

const search = ref('');
const suggestions = ref([]);

// Mock autocomplete data
const mockSuggestions = [
  { id: 1, name: 'T-Shirt' },
  { id: 2, name: 'Jeans' },
  { id: 3, name: 'Sneakers' },
  { id: 4, name: 'Hoodie' },
];

watch(search, (newValue) => {
  if (newValue.length > 2) {
    // Simulate API call or filtering
    suggestions.value = mockSuggestions.filter(item =>
      item.name.toLowerCase().includes(newValue.toLowerCase())
    );
  } else {
    suggestions.value = [];
  }
});
</script>

<style>
.search-input { /* Add styles if needed */ }
.suggestions-list { /* Add styles for suggestions */ }
</style>
```

```react
import React, { useState, useEffect } from 'react';
// import { SfInput } from '@storefront-ui/react'; // Assuming SfInput is imported

const SearchBasic = () => {
  const [search, setSearch] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  // Mock autocomplete data
  const mockSuggestions = [
    { id: 1, name: 'T-Shirt' },
    { id: 2, name: 'Jeans' },
    { id: 3, name: 'Sneakers' },
    { id: 4, name: 'Hoodie' },
  ];

  useEffect(() => {
    if (search.length > 2) {
      // Simulate API call or filtering
      const filteredSuggestions = mockSuggestions.filter(item =>
        item.name.toLowerCase().includes(search.toLowerCase())
      );
      setSuggestions(filteredSuggestions);
    } else {
      setSuggestions([]);
    }
  }, [search]);

  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search for products..."
        aria-label="Search"
        className="search-input"
      />
      {suggestions.length > 0 && (
        <div className="suggestions-list">
          {suggestions.map(suggestion => (
            <div key={suggestion.id}>{suggestion.name}</div>
          ))}
        </div>
      )}
    </div>
  );
};

export default SearchBasic;

```

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

### Badge Basic Usage Example

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/badge.md

Demonstrates the basic usage of the SfBadge component, requiring a relative container. Shows how to use the 'dot' variant and the 'max' prop for numeric content.

```vue
import { SfBadge } from '@storefront-ui/vue';

export default {
  components: {
    SfBadge
  }
};

```

```react
import { SfBadge } from '@storefront-ui/react';

export default function MyComponent() {
  return (
    <>
      {/* Basic usage */}
      <div className="relative">
        <SfBadge content="3">
          <button>Notifications</button>
        </SfBadge>
      </div>

      {/* Dot variant */}
      <div className="relative">
        <SfBadge variant="dot">
          <button>Status</button>
        </SfBadge>
      </div>

      {/* Max limit */}
      <div className="relative">
        <SfBadge content="150" max={99}>
          <button>Messages</button>
        </SfBadge>
      </div>
    </>
  );
}

```

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

### SelectDropdown Basic Usage

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_blocks/SelectDropdown.md

Demonstrates the basic usage of the SelectDropdown component with a preselected option. This example shows how to initialize the dropdown with a default value, providing a starting point for user interaction.

```vue
import { SfSelect } from '@storefront-ui/vue';

export default {
  components: {
    SfSelect
  },
  data() {
    return {
      selectedOption: 'Option 2'
    };
  }
};

```

```react
import React, { useState } from 'react';
import { SfSelect } from '@storefront-ui/react';

const SelectDropdownPreselected = () => {
  const [selectedOption, setSelectedOption] = useState('Option 2');

  return (
    <SfSelect
      label="Select an option"
      value={selectedOption}
      onChange={(e) => setSelectedOption(e.target.value)}
    >
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
    </SfSelect>
  );
};

export default SelectDropdownPreselected;

```

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

### SfTooltip API Documentation

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/tooltip.md

Comprehensive API documentation for the SfTooltip component, detailing its available props, their types, default values, and possible options, as well as its slots.

```apidoc
SfTooltip Component API:

Props:
  label: string (required)
    Description: The text content to be displayed in the tooltip.
    Default value: undefined

  showArrow: boolean
    Description: Controls the visibility of the tooltip arrow.
    Default value: false

  placement: SfPopoverPlacement
    Description: Defines the position of the tooltip relative to its target element. Accepts values from SfPopoverPlacement.
    Default value: undefined

  arrowSize: "${number}px" | "${number}em" | "${number}rem"
    Description: Specifies the size of the tooltip arrow. Can be a number followed by 'px', 'em', or 'rem'.
    Default value: undefined

  children: ReactNode (React only)
    Description: The content that the tooltip describes.
    Default value: undefined

Slots:
  default: Content being described by the tooltip.
    Description: The default slot content is the element that the tooltip will be attached to and describe.
```

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

### SfInput Component API Documentation

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/input.md

Comprehensive API documentation for the SfInput component, detailing its props, slots, and events across different frameworks. This includes type definitions, default values, possible values, and descriptions for each property and slot.

```APIDOC
SfInput Component API Documentation

Props:
  - size: (SfInputSize) Controls the visual size of the input. Possible values: 'sm', 'base', 'lg'. Default: 'base'.
  - invalid: (boolean) Indicates if the input has an invalid state. Default: false.
  - wrapperTag: (string) Specifies the HTML tag for the input wrapper. Default: 'span'.
  - wrapperAs: (string) Alias for wrapperTag, specifically for React. Default: 'span'.
  - className: (string) Custom CSS class for the input element (React only).
  - slotPrefix: (ReactNode) Content to be rendered in the prefix slot (React only).
  - slotSuffix: (ReactNode) Content to be rendered in the suffix slot (React only).

Slots:
  - prefix: Custom content for the prefix area of the input.
  - suffix: Custom content for the suffix area of the input.

Events:
  - update:modelValue: Emitted when the input's value changes, used for v-model binding in Vue.
```

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

### Add Tailwind Directives to Nuxt CSS

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

Demonstrates how to set up a custom Tailwind CSS file in a Nuxt.js application. It includes the essential `@tailwind` directives for base, components, and utilities layers, which are necessary for Tailwind to function correctly.

```css
/* ~/assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

### Import and Use SfButton in Astro with Vue

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

Demonstrates how to import a Storefront UI Vue component, SfButton, and use it directly within an Astro component. This allows leveraging Vue's component model within the Astro framework.

```vue
---
import { SfButton } from '@storefront-ui/vue';
---

<SfButton> Hello </SfButton>
```

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

### Running Coverage Tests

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/packages/tests/README.md

Provides commands for checking code coverage, which is currently implemented only for Vue. It includes instructions for running coverage locally for all tests or specific files using environment variables.

```bash
# Run all Vue coverage tests from root
yarn test:ci:vue

# Run all coverage tests from apps/preview/vue
yarn test:ci

# Run coverage for a single test file (e.g., SfAlert)
SPEC=SfAlert yarn test:ci
```

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

### Configure Nuxt Tailwind CSS

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

This snippet shows how to configure Tailwind CSS within a Nuxt.js project using the `nuxt.config.ts` file. It specifies the content paths for Tailwind to scan for classes, ensuring proper utility class detection.

```typescript
import type { Config } from 'tailwindcss';

export default <Config>{
  content: ['./**/*.vue'],
};
```

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

### Generate Icons with Yarn

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/packages/sfui/README.md

This command sequence is used to generate icons for the project. First, install dependencies using `yarn`, then run `yarn generate-icons` to process assets and create the necessary icon files.

```shell
yarn
yarn generate-icons
```

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

### Add Tailwind Directives to Astro CSS

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/2.getting-started/vue.md

This snippet shows how to add the necessary Tailwind CSS directives to the main CSS file (`src/style.css`) in an Astro project. Including `@tailwind base`, `@tailwind components`, and `@tailwind utilities` ensures that Tailwind's styles are applied correctly.

```css
/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

### SfTooltip Source Code

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/tooltip.md

Provides the source code for the SfTooltip component, allowing developers to inspect its implementation details for both Vue and React frameworks.

```vue
<<<../../../../../packages/sfui/frameworks/vue/components/SfTooltip/SfTooltip.vue
```

```react
<<<../../../../../packages/sfui/frameworks/react/components/SfTooltip/SfTooltip.tsx
```

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

### Animated Accordion Example

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/accordionitem.md

Illustrates how to add smooth transitions to the SfAccordionItem component for a better user experience. This example focuses on the visual animation of the expand/collapse action.

```vue
<<../../../../preview/nuxt/pages/showcases/AccordionItem/AccordionAnimate.vue
```

```react
<<../../../../preview/next/pages/showcases/AccordionItem/AccordionAnimate.tsx
```

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

### Basic SfDrawer Usage (React)

Source: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/docs/components/content/_components/drawer.md

Demonstrates the basic usage of SfDrawer in React, controlling its open/close state using the `open` prop and handling the `onClose` event. It highlights the `placement` prop for positioning.

```react
<<<../../../../preview/next/pages/showcases/Drawer/Placement.tsx
```