More Shadcn

https://more-shadcn.noair.fun
Admin
A collection of high-quality, copy-paste components for Svelte 5 built on top of shadcn-svelte,...
Tokens:13,260
Snippets:164
Trust Score:4.5
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install Verify Human Component using npx

Source: https://more-shadcn.noair.fun/components/verify-human

This command installs the 'verify-human' components from More Shadcn. It uses the shadcn-svelte CLI to add the component from a specified JSON URL. This is the primary installation method.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/verify-human.json
```

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

### Install Spotlight Card Component

Source: https://more-shadcn.noair.fun/components/spotlight-card

Installs the spotlight-card components using the shadcn-svelte CLI. This command fetches the necessary files from the provided URL.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/spotlight-card.json
```

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

### Install Phone Input Component

Source: https://more-shadcn.noair.fun/components/phone-input

Installs the phone-input components using the shadcn-svelte CLI. This command fetches the necessary files from the specified URL.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/phone-input.json
```

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

### Install Color Picker Component

Source: https://more-shadcn.noair.fun/components/color-picker

Installs the color-picker components using the shadcn-svelte CLI. This command fetches the necessary files from the provided URL.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/color-picker.json
```

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

### Install Video Components using npm

Source: https://more-shadcn.noair.fun/components/video

This command installs the 'video' components from More Shadcn using npm. It fetches the component configuration from the provided URL.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/video.json
```

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

### Install Choicebox Component with npm

Source: https://more-shadcn.noair.fun/components/choicebox

Installs the 'choicebox' components from more-shadcn.noair.fun using npx. This command fetches and adds the necessary files to your project.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/choicebox.json
```

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

### Svelte Walkthrough Component Basic Setup

Source: https://more-shadcn.noair.fun/components/walkthrough

This snippet demonstrates the basic setup for the Walkthrough component in Svelte. It defines the steps for the tour, including target element IDs, titles, descriptions, and positioning. The `Walkthrough` component is then rendered, bound to an `openTour` variable and configured with the defined steps and padding.

```svelte
<script>
  // Define IDs that exist in your +layout.svelte
  const steps = [
    { target: "layout-sidebar", title: "Sidebar", description: "...", position: "right" },
    { target: "layout-search", title: "Search", description: "...", position: "bottom" }
  ];
</script>

<Walkthrough bind:open={openTour} {steps} padding={2}/>
```

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

### Install Timeline Component (CLI)

Source: https://more-shadcn.noair.fun/components/timeline

Command to install the timeline components using npx with shadcn-svelte. This command fetches the necessary files from the provided URL.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/timeline.json
```

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

### Install Autocomplete Component (CLI)

Source: https://more-shadcn.noair.fun/components/autocomplete

Command to install the Autocomplete component and its dependencies using the shadcn-svelte CLI. This command fetches the necessary files from the provided URL.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/autocomplete.json
```

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

### Install Chip Component

Source: https://more-shadcn.noair.fun/components/chip

Command to install the Chip component from more-shadcn.noair.fun using npx. This command fetches the necessary files to integrate the chip functionality into your project.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/chip.json
```

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

### Install Audio Wave Component with Shadcn Svelte

Source: https://more-shadcn.noair.fun/components/audio-wave

Installs the 'audio-wave' component using the shadcn-svelte CLI. This command fetches the component's configuration and adds it to your project.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/audio-wave.json
```

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

### Install Number Ticker Component

Source: https://more-shadcn.noair.fun/components/number-ticker

Installs the 'number-ticker' component using the shadcn-svelte CLI. This command fetches and adds the necessary component files to your project.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/number-ticker.json
```

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

### Install Collaborative Cursor Component

Source: https://more-shadcn.noair.fun/components/cursor

Installs the cursor component using the shadcn-svelte CLI. This command fetches the necessary files to integrate the collaborative cursor functionality into your Svelte project.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/cursor.json
```

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

### Choicebox Visual Selection Example in HTML

Source: https://more-shadcn.noair.fun/components/choicebox

Illustrates creating a visual selection interface, similar to a theme selector, by combining icons, images, and hidden indicators within Choicebox.Item elements. This example shows light, dark, and system theme options.

```html
<Choicebox.Root {onThemeChange} class="grid grid-cols-3 gap-4">
  <Choicebox.Item value="light" class="p-2 overflow-hidden flex flex-col gap-0">
    <img src="light.png" alt="Light Mode" class="w-full h-full" />
    <Choicebox.Title class="p-2 pb-0 w-full text-center">Light</Choicebox.Title>
    <div class="sr-only"><Choicebox.Indicator /></div>
  </Choicebox.Item>
  ...
</Choicebox.Root>
```

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

### Install Image Zoom Component

Source: https://more-shadcn.noair.fun/components/image-zoom

Command to install the image-zoom components using the shadcn-svelte CLI. This command fetches the necessary files to integrate the image zoom functionality into your project.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/image-zoom.json
```

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

### Install Status Dot Component

Source: https://more-shadcn.noair.fun/components/status-dot

Command to install the status-dot components using shadcn-svelte. This command fetches the component configuration from the provided JSON URL.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/status-dot.json
```

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

### Choicebox Grid Layout Example in HTML

Source: https://more-shadcn.noair.fun/components/choicebox

Shows how to apply CSS grid classes to the Choicebox.Root element to create horizontal card layouts for options. This example displays a pricing plan selection.

```html
<Choicebox.Root class="grid grid-cols-3 gap-4">
  <Choicebox.Item value="basic" class="flex-col items-start">
     <div class="flex justify-between w-full">
        <Choicebox.Title>Basic</Choicebox.Title>
        <Choicebox.Indicator />
     </div>
     <Choicebox.Description>...</Choicebox.Description>
  </Choicebox.Item>
  ...
</Choicebox.Root>
```

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

### Install Sortable Component using npm

Source: https://more-shadcn.noair.fun/components/sortable

Installs the 'sortable' components from more-shadcn.noair.fun using npx. This command fetches the necessary files to integrate the sortable list functionality into your project.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/sortable.json
```

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

### Add Shiny Button Component

Source: https://more-shadcn.noair.fun/components/shiny-button

Installs the Shiny Button component using the shadcn-svelte CLI. This command fetches and adds the necessary files for the component to your project.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/shiny-button.json
```

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

### Basic Shiny Button Usage

Source: https://more-shadcn.noair.fun/components/shiny-button

A fundamental example of implementing the Shiny Button component. It shows how to include the button in your markup and display text content along with an icon.

```svelte
<ShinyButton>
  Join Waitlist
  <ArrowRight class="ml-2 h-4 w-4" />
</ShinyButton>
```

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

### Add Scrubbable Component to Svelte Project

Source: https://more-shadcn.noair.fun/components/scrubbable

Installs the scrubbable components into your Svelte project using npx. This command fetches the component definitions from the specified URL.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/scrubbable.json
```

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

### Install Horizontal Scroll Component

Source: https://more-shadcn.noair.fun/components/horizontal-scroll

This command installs the 'horizontal-scroll' components from more-shadcn.noair.fun using the shadcn-svelte CLI. It's a prerequisite for using the HorizontalScroll component in your Svelte project.

```bash
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/horizontal-scroll.json
```

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

### Create Action Chip

Source: https://more-shadcn.noair.fun/components/chip

Example of creating a basic action chip using the Chip.Root component. The chip is interactive and can trigger a function when clicked.

```jsx
<Chip.Root onclick={handleClick}>Action Chip</Chip.Root>
```

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

### Svelte Walkthrough Component Customization with Snippet

Source: https://more-shadcn.noair.fun/components/walkthrough

This example showcases how to fully customize the appearance of the Walkthrough component's cards using a Svelte snippet. The custom design features a dark theme with purple accents. The snippet receives a context object (`ctx`) which provides access to methods like `next()` and `close()` to control the tour flow.

```svelte
<Walkthrough bind:open={open} steps={steps}>
  {#snippet children(ctx)}
    <div class="bg-zinc-900 text-white p-6 rounded-xl border border-zinc-800">
      <h3 class="font-bold text-xl text-purple-400">
        {ctx.currentStep()?.title}
      </h3>
      <p class="text-gray-400 my-4">
        {ctx.currentStep()?.description}
      </p>
      <button onclick={ctx.next} class="bg-white text-black px-4 py-1 rounded">
        Next ->
      </button>
    </div>
  {/snippet}
</Walkthrough>
```

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

### Collapsed Wheel Picker Example (Svelte)

Source: https://more-shadcn.noair.fun/components/wheel-picker

Shows a collapsed state for the Wheel Picker component using Svelte. The 'collapsed' prop on the root element reduces its visual footprint, useful for certain UI designs. It still functions with a group of items.

```svelte
<WheelPicker.Root collapsed>
  <WheelPicker.Group bind:value={selectedFramework}>
    {#each frameworks as fw}
      <WheelPicker.Item value={fw}>{fw}</WheelPicker.Item>
    {/each}
  </WheelPicker.Group>
</WheelPicker.Root>
```

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

### Image Zoom Component Basic Usage

Source: https://more-shadcn.noair.fun/components/image-zoom

Example of using the ImageZoom.Root and ImageZoom.Trigger components for a single image. Clicking the image will open it in a larger, centered overlay.

```svelte
<ImageZoom.Root>
  <ImageZoom.Trigger
    src="your-image-1.jpg"
    alt="Description 1"
  />
</ImageZoom.Root>
```

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

### Infinite Loop Wheel Picker (Svelte)

Source: https://more-shadcn.noair.fun/components/wheel-picker

Demonstrates an infinite loop functionality for a Wheel Picker group in Svelte. The 'loop' prop allows the picker to cycle continuously through its items without a defined start or end.

```svelte
<WheelPicker.Root>
  <WheelPicker.Group bind:value={day} loop>
    {#each days as day}
      <WheelPicker.Item value={day}>{day}</WheelPicker.Item>
    {/each}
  </WheelPicker.Group>
</WheelPicker.Root>
```

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

### Icon-Only Bottom Navigation in Svelte

Source: https://more-shadcn.noair.fun/components/bottom-nav

This example shows how to configure the Bottom Navigation component to display only icons, omitting text labels for a more compact interface. It uses the same `BottomNav.Root` and `BottomNav.Item` components but only includes icon elements within each item.

```html
<script>
  import * as BottomNav from "$lib/components/ui/bottom-nav";
  import Mail from "./icons/Mail.svelte";
  import Calendar from "./icons/Calendar.svelte";
</script>

<BottomNav.Root>
  <BottomNav.Item href="/mail"><Mail class="h-6 w-6" /></BottomNav.Item>
  <BottomNav.Item href="/cal"><Calendar class="h-6 w-6" /></BottomNav.Item>
</BottomNav.Root>
```

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

### Tag Input Validation with Email Regex

Source: https://more-shadcn.noair.fun/components/tag-input

Shows how to implement tag validation using a provided regex function. In this example, only valid email formats are accepted as tags.

```svelte
<TagInput
  validate={(tag) => emailRegex.test(tag)}
/>
```

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

### Create Filter Chip

Source: https://more-shadcn.noair.fun/components/chip

Example of creating a filter chip with an outline variant. The 'active' prop is used to indicate selection, and the chip can be toggled.

```jsx
<Chip.Root
  variant="outline"
  active={isSelected}
  onclick={toggle}
>
  {label}
</Chip.Root>
```

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

### Timeline with Rich Content (HTML)

Source: https://more-shadcn.noair.fun/components/timeline

Demonstrates how to embed rich content, such as images, within a Timeline item. This example shows a layout for displaying design assets or other media.

```html
<Timeline.Item>
  <Timeline.Content>
     <Timeline.Title>New Assets</Timeline.Title>
     <div class="grid grid-cols-2 gap-2">
        <img src="..." />
        <img src="..." />
     </div>
  </Timeline.Content>
</Timeline.Item>
```

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

### Table Server Status Display

Source: https://more-shadcn.noair.fun/components/status-dot

A complete example demonstrating how to use the Status Dot component within a table to visually represent server status (e.g., Online, Maintenance).

```svelte
<div class="rounded-md border">
    <div class="flex items-center justify-between p-3 border-b text-sm font-medium bg-muted/40 w-xs">
        <span>Server</span>
        <span>Status</span>
    </div>
    <div class="p-3 flex items-center justify-between text-sm">
        <span>US-East-1</span>
        <div class="flex items-center gap-2">
            <span class="text-muted-foreground">Online</span>
            <StatusDot.Root variant="success" size="sm" pulse />
        </div>
    </div>
    <div class="p-3 border-t flex items-center justify-between text-sm bg-muted/5">
        <span>EU-West-3</span>
        <div class="flex items-center gap-2">
            <span class="text-muted-foreground">Maintenance</span>
            <StatusDot.Root variant="warning" size="sm" />
        </div>
    </div>
</div>
```

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

### Use Custom Video Player Component

Source: https://more-shadcn.noair.fun/components/video

This snippet demonstrates how to use the custom video player component. It requires the 'video' component to be installed. The component accepts props such as src, poster, autoplay, muted, and loop to control video playback.

```html
<Video
    src="/content/video.mp4"
    poster="/content/thumbnail.jpg"
    autoplay
    muted
    loop
/>
```

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

### Customize Audio Wave Component Variants

Source: https://more-shadcn.noair.fun/components/audio-wave

Shows how to customize the AudioWave component using utility classes for bars, color, and size. Examples include 'Small Green', 'Large & Thin', and 'Muted' variants.

```svelte
<!-- Small Green -->
<AudioWave bars={6} class="h-6" barColor="bg-emerald-500" />

<!-- Large & Thin -->
<AudioWave bars={12} class="h-16 gap-0.5" barColor="bg-rose-500 w-0.5" />

<!-- Muted -->
<AudioWave bars={4} class="h-8" barColor="bg-muted-foreground/50" />
```

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

### Create Removable Chip

Source: https://more-shadcn.noair.fun/components/chip

Example of creating a removable chip. The 'removable' prop enables a close button, and the 'onremove' prop defines the handler for removal.

```jsx
<Chip.Root removable onremove={handleRemove}>
  React
</Chip.Root>
```

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

### Style Number Ticker with Gradient and Monospace

Source: https://more-shadcn.noair.fun/components/number-ticker

Demonstrates styling the NumberTicker component using CSS classes. The first example applies a gradient text effect, while the second uses a monospace font with a specific color.

```html
<!-- Gradient -->
<NumberTicker
  value={100}
  class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600"
/>

<!-- Monospace -->
<div class="font-mono text-green-400">
  <NumberTicker value={9999} class="text-green-400"/>
</div>
```

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

### Basic Date Strip Implementation in Svelte

Source: https://more-shadcn.noair.fun/components/date-strip

This snippet shows the fundamental setup for the Date Strip component in Svelte. It imports necessary functions from '@internationalized/date' and uses a Svelte state variable to manage the selected date.

```typescript
import { today, getLocalTimeZone } from "@internationalized/date";
let selectedDate = $state(today(getLocalTimeZone()));

<DateStrip.Root bind:value={selectedDate}>
  {#snippet children({ date })}
    <DateStrip.Item {date} />
  {/snippet}
</DateStrip.Root>
```

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

### Stepper: Read-Only Status Display

Source: https://more-shadcn.noair.fun/components/stepper

Shows how to use the Stepper component in a read-only mode, suitable for displaying status or tracking timelines. By omitting the `Stepper.Trigger`, the items become static. This example visualizes an order status.

```svelte
<Stepper.Root value={2}>
  <Stepper.Item step={0}>
    <!-- Using a div instead of Stepper.Trigger makes it static -->
    <div class="flex flex-col items-center">
      <Stepper.Indicator step={0} />
      <span>Order Placed</span>
    </div>
    <Stepper.Separator />
  </Stepper.Item>
</Stepper.Root>
```

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

### Custom Event Item Rendering in Big Calendar (HTML/Svelte)

Source: https://more-shadcn.noair.fun/components/big-calendar

Shows how to customize the appearance of individual event items within the Big Calendar. This example includes displaying time and title within a custom card structure.

```html
<BigCalendar.Grid>
  {#snippet children(event)} 
    <div class="custom-card">
      <ClockIcon />
      <span>{event.time}</span>
      <span>{event.title}</span>
    </div>
  {/snippet}
</BigCalendar.Grid>

```

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

### Allowing Only Specific Dates in Date Strip (Svelte)

Source: https://more-shadcn.noair.fun/components/date-strip

This example illustrates how to restrict date selection to only a predefined list of dates. It combines custom logic with the `isDateDisabled` prop to check if a date is included in an allowed array.

```typescript
const allowedDates = ["2025-11-24", "2025-11-26", "2025-11-28"];

function isCustomDisabled(date) {
  return !allowedDates.includes(date.toString());
}

<DateStrip.Root isDateDisabled={isCustomDisabled}>
  {#snippet children({ date })}
    <DateStrip.Item {date} />
  {/snippet}
</DateStrip.Root>
```

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

### Compare Slider with Vertical Orientation (HTML)

Source: https://more-shadcn.noair.fun/components/compare-slider

This example shows how to configure the Compare Slider to use a vertical orientation instead of the default horizontal. The 'orientation="vertical"' prop is applied to the root element.

```html
<CompareSlider.Root orientation="vertical">
   ...
</CompareSlider.Root>
```

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

### Avatar Presence with Status Dot

Source: https://more-shadcn.noair.fun/components/status-dot

Example of integrating the Status Dot component with an Avatar to indicate user presence or status. The Status Dot is positioned absolutely at the bottom-right of the avatar.

```svelte
<div class="relative">
  <Avatar>...</Avatar>
  <StatusDot.Root
    variant="success"
    size="sm"
    class="absolute bottom-0 right-0 ring-2 ring-background"
  />
</div>
```

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

### Grid Layout Sortable List in Svelte

Source: https://more-shadcn.noair.fun/components/sortable

Configures a sortable list to use a grid layout with 3 columns. The 'orientation' is set to 'mixed' to enable 2D displacement. This example demonstrates how to apply grid classes directly to the Sortable.Root component.

```svelte
<Sortable.Root
  bind:items={items}
  class="grid grid-cols-3 gap-4"
  orientation="mixed">
  {#each items as item (item.id)}
     <Sortable.Item id={item.id} class="h-24 w-full">
         <div class="card...">...</div>
     </Sortable.Item>
  {/each}
</Sortable.Root>
```

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

### Basic Vertical Sortable List in Svelte

Source: https://more-shadcn.noair.fun/components/sortable

Implements a basic vertical sortable list using the Shadcn Sortable component. It binds the list items to a 'items' variable and renders each item with a handle and title. Requires the 'sortable' components to be installed.

```svelte
<Sortable.Root bind:items={items} orientation="vertical">
  {#each items as item (item.id)}
    <Sortable.Item id={item.id}>
       <div class="border rounded-lg p-4 flex gap-4">
          <Sortable.Handle />
          {item.title}
       </div>
    </Sortable.Item>
  {/each}
</Sortable.Root>
```

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

### Basic Dock Component Usage (Svelte)

Source: https://more-shadcn.noair.fun/components/dock

Demonstrates the basic structure for creating a dock with icon components. It requires importing `Dock.Root`, `Dock.Icon`, and `Dock.Separator` from the library. Icons can be customized with classes and child elements like SVG components.

```svelte
<Dock.Root>
  <Dock.Icon class="bg-indigo-100 text-indigo-600">
    <Home class="size-5" />
  </Dock.Icon>
  <Dock.Icon class="bg-blue-100 text-blue-600">
    <Search class="size-5" />
  </Dock.Icon>
  <Dock.Separator />
  <Dock.Icon>
    <User class="size-5" />
  </Dock.Icon>
</Dock.Root>
```

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

### Spotlight Card Basic Usage and Customization

Source: https://more-shadcn.noair.fun/components/spotlight-card

Demonstrates the basic structure of the Spotlight Card component and how to apply custom colors and sizes. The `color` prop accepts CSS color strings, and the `size` prop controls the spotlight radius in pixels.

```svelte
<SpotlightCard class="p-6">
  <Zap />
  <h3>Title</h3>
  <p>Description...</p>
</SpotlightCard>

<SpotlightCard color="rgba(239, 68, 68, 0.15)">...</SpotlightCard>
<SpotlightCard color="rgba(59, 130, 246, 0.15)">...</SpotlightCard>
<SpotlightCard color="rgba(16, 185, 129, 0.15)">...</SpotlightCard>

<SpotlightCard color="hsl(var(--primary) / 0.2)">
  <!-- Content -->
</SpotlightCard>

<SpotlightCard size={100}>...</SpotlightCard>
<SpotlightCard size={600}>...</SpotlightCard>
```

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

### Configurable Scrubbable Input with Constraints in Svelte

Source: https://more-shadcn.noair.fun/components/scrubbable

Demonstrates a scrubbable input with a label and value display, configured with minimum and maximum value constraints, a default value, and a step increment. It also uses a 'secondary' variant.

```svelte
<Scrubbable.Root
  min={0}
  max={100}
  defaultValue={50}
  step={5}
  variant="secondary"
>
  <Scrubbable.Label>Volume</Scrubbable.Label>
  <Scrubbable.Value />
</Scrubbable.Root>
```

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

### Basic Choicebox Usage in HTML

Source: https://more-shadcn.noair.fun/components/choicebox

Demonstrates the fundamental structure for using the Choicebox component. It sets up a root element and individual items, allowing users to select an option.

```html
<Choicebox.Root bind:value={val}>
  <Choicebox.Item value="1" class="group justify-between">
    ...content
    <Choicebox.Indicator />
  </Choicebox.Item>
</Choicebox.Root>
```

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

### Multi-Column Wheel Picker with Infinite Loop (Svelte)

Source: https://more-shadcn.noair.fun/components/wheel-picker

Illustrates how to create a multi-column Wheel Picker, suitable for time or date selection, using Svelte. The 'loop' prop enables infinite scrolling for each group. Separators can be placed between columns.

```svelte
<WheelPicker.Root>
  <!-- Use 'loop' prop for infinite scrolling -->
  <WheelPicker.Group bind:value={hours} loop>
     ...
  </WheelPicker.Group>

  <div class="...">:</div> <!-- You can put separators in between -->

  <WheelPicker.Group bind:value={minutes} loop>
     ...
  </WheelPicker.Group>

  <WheelPicker.Group bind:value={period}>
     ...
  </WheelPicker.Group>
</WheelPicker.Root>
```

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

### Basic Phone Input Configuration

Source: https://more-shadcn.noair.fun/components/phone-input

Demonstrates the default configuration of the PhoneInput component. It uses Svelte's state management to bind the input value.

```html
<script>
  let phone = $state("");
</script>

<PhoneInput bind:value={phone} />
```

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

### Dock Component with Tooltips (Svelte)

Source: https://more-shadcn.noair.fun/components/dock

Illustrates how to add tooltips to dock icons. The `Dock.Icon` component internally wraps a Tooltip component, so a simple `tooltip` string prop can be passed to display text on hover.

```svelte
<Dock.Root>
  <Dock.Icon tooltip="GitHub">
    <Github />
  </Dock.Icon>
  ...
</Dock.Root>
```

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

### Basic Wheel Picker Implementation (Svelte)

Source: https://more-shadcn.noair.fun/components/wheel-picker

Demonstrates the fundamental structure of a Wheel Picker component using Svelte. It involves a root element and a group to hold selectable items. The 'bind:value' directive is used to manage the selected item.

```svelte
<WheelPicker.Root>
  <WheelPicker.Group bind:value={selected}>
    {#each items as item}
      <WheelPicker.Item value={item}>{item}</WheelPicker.Item>
    {/each}
  </WheelPicker.Group>
</WheelPicker.Root>
```

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

### Stepper: Basic Usage with Svelte

Source: https://more-shadcn.noair.fun/components/stepper

Demonstrates the fundamental implementation of the Stepper component in Svelte. It iterates through steps, displaying triggers, indicators, titles, and separators to visualize a multi-step process. Requires Svelte and the stepper components.

```svelte
<Stepper.Root bind:value={currentStep}>
  {#each steps as step, i}
    <Stepper.Item step={i}>
      <Stepper.Trigger step={i}>
        <Stepper.Indicator step={i} />
        <Stepper.Title>{step.label}</Stepper.Title>
      </Stepper.Trigger>
      {#if i !== steps.length - 1}
        <Stepper.Separator />
      {/if}
    </Stepper.Item>
  {/each}
</Stepper.Root>
```

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

### Dock Component with Image Icons (Svelte)

Source: https://more-shadcn.noair.fun/components/dock

Shows how to use `<img>` tags within `Dock.Icon` components to create realistic application launchers. The `magnification` prop can be adjusted on `Dock.Root` for visual effect. Icons can be set to transparent backgrounds.

```svelte
<Dock.Root magnification={80}>
  <Dock.Icon class="bg-transparent" transparent>
     <img src="/icons/finder.png" class="size-full" />
  </Dock.Icon>
  <Dock.Icon class="bg-transparent" transparent>
     <img src="/icons/safari.png" class="size-full" />
  </Dock.Icon>
  ...
</Dock.Root>
```

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

### Stepper: Customizing Indicator Content with Svelte Snippets

Source: https://more-shadcn.noair.fun/components/stepper

Demonstrates advanced customization of the Stepper's `Indicator` using Svelte's snippet syntax. This allows for dynamic content based on the step's state, such as displaying different icons for default and success states.

```svelte
<Stepper.Indicator step={i} class="h-12 w-12 rounded-lg">
  {#snippet children()} <Circle /> {/snippet}
  {#snippet success()} <CheckCircle2 /> {/snippet}
</Stepper.Indicator>
```

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

### Color Picker with Opacity and RGB Format (Svelte)

Source: https://more-shadcn.noair.fun/components/color-picker

Shows how to enable the alpha channel and set the default color format to RGB for the Color Picker. The `allowOpacity` prop adds an alpha slider and percentage input.

```svelte
<ColorPicker.Root
  bind:value={alphaColor}
  allowOpacity={true}
  defaultFormat="rgb"
/>
```

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

### Basic Compare Slider Implementation (HTML)

Source: https://more-shadcn.noair.fun/components/compare-slider

This snippet demonstrates the fundamental structure for implementing the Compare Slider component. It requires two image layers, a 'first' and 'second' target, and a handle for interaction. The 'aspect-video' class suggests a default aspect ratio.

```html
<CompareSlider.Root class="aspect-video">
  <CompareSlider.Item target="first">
     <img src="/after.jpg" />
  </CompareSlider.Item>
  <CompareSlider.Item target="second">
     <img src="/before.jpg" />
  </CompareSlider.Item>
  <CompareSlider.Handle />
</CompareSlider.Root>
```

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

### Svelte Kit Tag Input Basic Usage

Source: https://more-shadcn.noair.fun/components/tag-input

Demonstrates the basic implementation of the Tag Input component in a Svelte Kit application. It initializes with predefined tags and binds the tags array to the component.

```svelte
<script lang="ts">
  let tags = $state(['Svelte', 'Kit']);
</script>

<TagInput bind:tags={tags} />
```

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

### Basic QR Code Generation

Source: https://more-shadcn.noair.fun/components/qr-code

Generates a basic QR code using the provided value. This is the simplest way to implement the QR code component.

```svelte
<QRCode.Root value="https://shadcn-svelte.com" />
```

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

### Basic Audio Wave Component Usage

Source: https://more-shadcn.noair.fun/components/audio-wave

Demonstrates the basic usage of the AudioWave component in Svelte. It takes a 'playing' prop to control the animation state.

```svelte
<script>
  import AudioWave from './AudioWave.svelte';
  let isPlaying = true;
</script>

<AudioWave playing={isPlaying} />
```

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

### Basic Color Picker Usage (Svelte)

Source: https://more-shadcn.noair.fun/components/color-picker

Demonstrates the basic integration of the Color Picker component in a Svelte application. It uses `bind:value` to manage the selected color state.

```svelte
<ColorPicker.Root bind:value={color} />
```

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

### Integrate VerifyHuman Component in Svelte

Source: https://more-shadcn.noair.fun/components/verify-human

This snippet demonstrates how to integrate the VerifyHuman component into a Svelte application. It shows how to bind the verified status and handle the verification event. No external dependencies are explicitly mentioned for this integration.

```svelte
<VerifyHuman bind:verified={isVerified} onVerify={() => { ... }}/>
```

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

### Display Basic Collaborative Cursor

Source: https://more-shadcn.noair.fun/components/cursor

Renders a collaborative cursor with specified X and Y coordinates, color, and a name. This is the most basic usage, showing a cursor representing a user's position.

```svelte
<Cursor.Root
  x={280}
  y={80}
  color="#ea580c"
  name="@Kevin"
/>
```

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

### Shiny Button with Variants

Source: https://more-shadcn.noair.fun/components/shiny-button

Demonstrates how to use the Shiny Button with various standard Shadcn button variants. The shine effect dynamically adapts to the button's defined variant.

```svelte
<ShinyButton variant="default">Default</ShinyButton>
<ShinyButton variant="secondary">Secondary</ShinyButton>
<ShinyButton variant="destructive">Destructive</ShinyButton>
<ShinyButton variant="outline">Outline</ShinyButton>
<ShinyButton variant="ghost">Ghost</ShinyButton>
```

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

### Shiny Button with Sizes

Source: https://more-shadcn.noair.fun/components/shiny-button

Illustrates the usage of the Shiny Button component with different size options: sm, default, lg, and icon. The shine effect scales appropriately with the chosen size.

```svelte
<ShinyButton size="sm">Small</ShinyButton>
<ShinyButton size="default">Default</ShinyButton>
<ShinyButton size="lg">Large</ShinyButton>
<ShinyButton size="icon"><Github /></ShinyButton>
```

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

### Tag Input with Max Tags and Custom Chip Variant

Source: https://more-shadcn.noair.fun/components/tag-input

Illustrates customizing the Tag Input component by setting a maximum number of tags and specifying a different chip variant for styling.

```svelte
<TagInput
  maxTags={3}
  chipVariant="default"
/>
```

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

### QR Code with Custom Colors

Source: https://more-shadcn.noair.fun/components/qr-code

Customizes the QR code's module and background colors. Requires specifying the 'color' and 'backgroundColor' props.

```svelte
<QRCode.Root
  value="github.com"
  color="#ffffff"
  backgroundColor="#000000"
/>
```

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

### Image Zoom Component Gallery View

Source: https://more-shadcn.noair.fun/components/image-zoom

Demonstrates integrating multiple ImageZoom.Trigger components within an ImageZoom.Root to create a gallery or album view. This allows users to browse multiple images in full-screen mode.

```svelte
<ImageZoom.Root>
  {#each albumImages as img}
    <ImageZoom.Trigger {img.src} {img.alt} />
  {/each}
</ImageZoom.Root>
```

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

### Autocomplete Component Usage (Svelte)

Source: https://more-shadcn.noair.fun/components/autocomplete

Demonstrates how to use the Autocomplete component in Svelte. It binds the input value to a query variable and filters a list of users based on the query. The component supports custom item rendering using a snippet.

```svelte
<Autocomplete.Root
  id="user-search"
  bind:value={query}
  options={filteredUsers}
  {loading}
>
  {#snippet itemSnippet(user)}
    <Autocomplete.Highlight text={user.name} {query} />
  {/snippet}
</Autocomplete.Root>
```

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

### Stepper: Vertical Orientation with Svelte

Source: https://more-shadcn.noair.fun/components/stepper

Illustrates how to configure the Stepper component for vertical orientation using the `orientation="vertical"` prop. This changes the layout and separator alignment, suitable for side-by-side information display.

```svelte
<Stepper.Root orientation="vertical">
   {#each steps as s, i}
      <Stepper.Item step={i}>
         <Stepper.Trigger step={i}>
            <Stepper.Indicator step={i} />
            <div class="flex flex-col items-start">
               <Stepper.Title>{s.title}</Stepper.Title>
               <Stepper.Description>{s.desc}</Stepper.Description>
            </div>
         </Stepper.Trigger>
         <Stepper.Separator />
      </Stepper.Item>
   {/each}
</Stepper.Root>
```

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

### Bottom Navigation Component in Svelte

Source: https://more-shadcn.noair.fun/components/bottom-nav

This snippet demonstrates how to implement the Bottom Navigation component in a Svelte application. It requires importing the `BottomNav` components and placing the root element within a fixed, full-width div at the bottom of the screen. Each `BottomNav.Item` includes an `href` and child elements for an icon and label.

```html
<script>
  import * as BottomNav from "$lib/components/ui/bottom-nav";
  import Home from "./icons/Home.svelte";
  import Search from "./icons/Search.svelte";
</script>

<!-- Place this in your layout or page wrapper -->
<div class="fixed bottom-0 w-full">
  <BottomNav.Root>
    <BottomNav.Item href="/home">
      <Home class="h-6 w-6" />
      <span>Home</span>
    </BottomNav.Item>

    <BottomNav.Item href="/search">
      <Search class="h-6 w-6" />
      <span>Search</span>
    </BottomNav.Item>
  </BottomNav.Root>
</div>
```

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

### Phone Input Validation and Formatting Callback

Source: https://more-shadcn.noair.fun/components/phone-input

Shows how to use the `onchange` callback to receive validation status, E.164 formatted value, and the selected country code from the PhoneInput component.

```html
<PhoneInput
  onchange={(data) => {
    console.log(data.valid); // true/false
    console.log(data.value); // E.164 format
    console.log(data.country); // ISO code
  }}
/>
```

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

### Basic Scrubbable Input in Svelte

Source: https://more-shadcn.noair.fun/components/scrubbable

Renders a basic scrubbable input component with an 'outline' variant. The input's value is bound to the 'val' variable using Svelte's bind directive.

```svelte
<Scrubbable.Root variant="outline" bind:value={val} />
```

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

### Timeline Git History Layout (HTML)

Source: https://more-shadcn.noair.fun/components/timeline

Illustrates a Timeline layout suitable for displaying git history or changelogs. It includes features like version titles, badges for 'Latest', and descriptions for commits.

```html
<Timeline.Item>
   <Timeline.Separator class="bg-primary">
      <div class="dot" />
   </Timeline.Separator>
   <Timeline.Content>
      <div class="flex items-center gap-2">
         <Timeline.Title>v2.4.0</Timeline.Title>
         <Badge>Latest</Badge>
      </div>
      <div class="code-block">...</div>
   </Timeline.Content>
</Timeline.Item>
```

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

### Implement Hold Button Component

Source: https://more-shadcn.noair.fun/components/hold-button

This snippet demonstrates how to implement the Hold Button component. It takes props such as `variant`, `duration`, `fillColor`, and an `onComplete` callback function. The `onComplete` function is executed once the hold action is successfully completed.

```svelte
<HoldButton
  variant="destructive"
  duration={1500}
  fillColor="bg-black/40"
  onComplete={() => console.log("Action Triggered")}
>
  Hold to Delete
</HoldButton>
```

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

### Timeline Component Basic Structure (HTML)

Source: https://more-shadcn.noair.fun/components/timeline

Demonstrates the fundamental structure of the Timeline component, including root, item, separator, and content elements. This serves as a base for creating timeline entries.

```html
<Timeline.Root>
  <Timeline.Item>
    <Timeline.Separator />
    <Timeline.Content>
       <Timeline.Date>Aug 2024</Timeline.Date>
       <Timeline.Title>Event</Timeline.Title>
       <Timeline.Description>Details...</Timeline.Description>
    </Timeline.Content>
  </Timeline.Item>
</Timeline.Root>
```

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

### Display Cursor with Custom Content

Source: https://more-shadcn.noair.fun/components/cursor

Renders a collaborative cursor with a name and custom content passed as children. This allows for displaying additional information or interactive elements, such as reactions, alongside the cursor.

```svelte
<Cursor.Root x={150} y={80} color="#ef4444" name="Designer">
  <div class="mt-1 flex gap-1">
    <span class="bg-white/20 rounded px-1 text-[10px]">👍</span>
    <span class="bg-white/20 rounded px-1 text-[10px]">🔥</span>
  </div>
</Cursor.Root>
```

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

### Status Dot Component Sizes

Source: https://more-shadcn.noair.fun/components/status-dot

Illustrates how to control the size of the Status Dot component using the `size` prop. Available sizes are 'sm', 'md', and 'lg'.

```svelte
<StatusDot.Root size="sm" />
<StatusDot.Root size="md" />
<StatusDot.Root size="lg" />
```

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

### Display Cursor Only

Source: https://more-shadcn.noair.fun/components/cursor

Renders a collaborative cursor without any associated name or content. This is useful when only the visual representation of a cursor is needed, without user identification.

```svelte
<Cursor.Root x={350} y={95} color="#ef00ef" />
```

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

### QR Code with Snippet Logo

Source: https://more-shadcn.noair.fun/components/qr-code

Embeds a Svelte snippet as a logo in the center of the QR code. Requires setting 'errorCorrection' to 'H' and using the 'logo' slot for the snippet.

```svelte
<QRCode.Root value="...">
  {#snippet logo()}
     <Avatar>...</Avatar>
  {/snippet}
</QRCode.Root>
```

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

### QR Code with Image Logo

Source: https://more-shadcn.noair.fun/components/qr-code

Embeds an image as a logo in the center of the QR code. Requires setting 'errorCorrection' to 'H' for scannability and providing the 'logo' prop with an image path.

```svelte
<QRCode.Root
  value="https://svelte.dev"
  errorCorrection="H"
  logo="/svelte-logo.svg"
/>
```

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

### Big Calendar Component with Event Management (Svelte)

Source: https://more-shadcn.noair.fun/components/big-calendar

Implements a Svelte component for a Big Calendar, allowing users to view events, select date ranges, and add new events. It utilizes Shadcn UI components for buttons and icons.

```typescript
import * as BigCalendar from '$lib/components/ui/big-calendar';
import { Button } from '$lib/components/ui/button';
import { Calendar, ChevronLeft, ChevronRight } from 'lucide-svelte';

// 1. State for date navigation and selection
let currentDate = $state(new Date());
let selectedRange = $state({
    start: new Date(),
    end: new Date()
  });

// 2. Sample Data
let events = $state([
    {
       id: '1',
       title: 'Conference',
       start: new Date('2024-01-01'),
       end: new Date('2024-01-03'),
       type: 'default'
    }
  ]);

// 3. Add Event Handler
function addEvent() {
    if (!selectedRange.start || !selectedRange.end) return;
    const title = prompt('Event Title:');
    if (!title) return;

    events = [...events, {
       id: crypto.randomUUID(),
       title,
       start: new Date(selectedRange.start),
       end: new Date(selectedRange.end),
       type: 'default'
    }];
}

```

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

### Customize Hold Button Styling Variants

Source: https://more-shadcn.noair.fun/components/hold-button

This section shows how to customize the appearance of the Hold Button using the `fillColor` and `from` props. Different `variant` types (outline, ghost, secondary) are used with corresponding `fillColor` values to ensure contrast and visual appeal. The `from` prop controls the direction of the fill animation.

```svelte
<!-- Emerald Fill -->
<HoldButton variant="outline" fillColor="bg-emerald-500/20" from="left" ... />

<!-- Primary Fill -->
<HoldButton variant="ghost" fillColor="bg-primary/10" ... />

<!-- Warning Fill -->
<HoldButton variant="secondary" fillColor="bg-amber-500/20" from="top" ... />
```

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

### Implement Horizontal Scroll with Albums

Source: https://more-shadcn.noair.fun/components/horizontal-scroll

This snippet demonstrates how to use the HorizontalScroll component to display a list of albums, enabling horizontal scrolling. It iterates over an 'albums' array and renders each album's cover and name within a div. This component is useful for showcasing collections of items that might otherwise overflow a vertical layout.

```svelte
<HorizontalScroll class="gap-4">
  {#each albums as album}
     <div class="shrink-0 w-[150px]">
        <img src={album.cover} class="aspect-square rounded-md" />
        <h3>{album.name}</h3>
     </div>
  {/each}
</HorizontalScroll>
```

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

### Timeline with Custom Icon Separator (HTML)

Source: https://more-shadcn.noair.fun/components/timeline

Shows how to customize the Timeline separator with a specific class and an embedded custom icon component (Rocket). This allows for visual distinction of timeline events.

```html
<Timeline.Separator class="bg-primary">
  <Rocket />
</Timeline.Separator>
```

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

### Color Picker within a Popover (Svelte)

Source: https://more-shadcn.noair.fun/components/color-picker

Illustrates embedding the Color Picker component within a Svelte Popover. This allows for a modal-like color selection interface.

```svelte
<Popover.Root>
  <Popover.Trigger>
    {#snippet child({ props })}
        <Button {...props} variant="outline">
            {popoverColor}
        </Button>
    {/snippet}
  </Popover.Trigger>
  <Popover.Content class="w-auto p-0">
    <div class="p-3">
      <ColorPicker.Root bind:value={popoverColor} />
    </div>
  </Popover.Content>
</Popover.Root>
```

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

### Status Dot with Pulsing Animation

Source: https://more-shadcn.noair.fun/components/status-dot

Shows how to add a pulsing animation to the Status Dot component by using the `pulse` prop. This is useful for drawing attention to an active state.

```svelte
<StatusDot.Root variant="success" pulse />
```

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

### Timeline Order Tracking Layout (HTML)

Source: https://more-shadcn.noair.fun/components/timeline

Presents a Timeline layout for order tracking status updates. It uses a colored separator with an icon (Truck) and styled titles to indicate delivery progress.

```html
<Timeline.Item>
   <Timeline.Separator class="bg-blue-500 text-white">
      <Truck />
   </Timeline.Separator>
   <Timeline.Content>
      <Timeline.Title class="text-blue-600">Out for Delivery</Timeline.Title>
      ...
   </Timeline.Content>
</Timeline.Item>
```

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

### Default Status Dot Variants

Source: https://more-shadcn.noair.fun/components/status-dot

Demonstrates the default appearance of the Status Dot component with different variants representing various states like Default, Success, Warning, Error, and Info.

```svelte
<StatusDot.Root variant="success" />
```

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

### Phone Input with Restricted Countries and Sorting

Source: https://more-shadcn.noair.fun/components/phone-input

Configures the PhoneInput component to allow only specific countries in North America and Europe, and sorts them numerically by dial code.

```html
<PhoneInput
  bind:country={country}
  sorting="numeric"
  allowedCountries={['US', 'CA', 'GB', 'DE', 'FR', 'IT', 'AT']}
/>
```

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

### Implement Horizontal Scroll with Tags

Source: https://more-shadcn.noair.fun/components/horizontal-scroll

This snippet shows how to use the HorizontalScroll component for displaying a list of tags or category filters. It iterates over a 'tags' array and renders each tag within a Chip component, allowing for horizontal scrolling of filter options. This is particularly useful for managing overflowing tag lists or navigation filters.

```svelte
<HorizontalScroll class="gap-2">
   {#each tags as tag}
      <Chip>{tag}</Chip>
   {/each}
</HorizontalScroll>
```

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

### Disabling Weekends in Date Strip (Svelte)

Source: https://more-shadcn.noair.fun/components/date-strip

Demonstrates how to disable specific dates, such as weekends, using the `isDateDisabled` prop in the Date Strip component. It utilizes the `isWeekend` function from '@internationalized/date' for this purpose.

```typescript
import { isWeekend } from "@internationalized/date";

<DateStrip.Root
  bind:value={customDate}
  isDateDisabled={(date) => isWeekend(date, "en-US")}>
  {#snippet children({ date })}
    <DateStrip.Item {date} />
  {/snippet}
</DateStrip.Root>
```

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

### Horizontal Sortable List in Svelte

Source: https://more-shadcn.noair.fun/components/sortable

Creates a horizontal sortable list, suitable for elements like tabs or tags. The 'orientation' is set to 'horizontal', and a 'flex-row' class is applied for styling. This allows items to be sorted along the X-axis.

```svelte
<Sortable.Root
    bind:items={items}
    class="flex flex-row items-center"
    orientation="horizontal">
  {#each items as item (item.id)}
     <Sortable.Item id={item.id} class="h-24 w-full"> ... </Sortable.Item>
  {/each}
</Sortable.Root>
```

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

### Display Number Ticker Component

Source: https://more-shadcn.noair.fun/components/number-ticker

Renders a number ticker component with a specified value. It's designed to be styled by parent elements or the 'class' prop, allowing for flexible integration into various UI designs.

```html
<div class="text-7xl font-bold">
  $ <NumberTicker value={52342} />
</div>
```

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

### Disabling Dates in Big Calendar (JavaScript)

Source: https://more-shadcn.noair.fun/components/big-calendar

Demonstrates how to disable specific dates in the Big Calendar component using the `isDateDisabled` prop. This function determines which dates should be non-interactive and visually distinct.

```javascript
const isDateDisabled = (date) => {
    const day = date.getDay();
    return day === 0 || day === 6; // 0=Sun, 6=Sat
  };

<BigCalendar.Root {isDateDisabled} />

```
Tokens:
Raw