### SignIn Component Example (Svelte)

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

An example of using the SignIn component for user authentication. It includes customizable fields for email and password, along with options for 'remember me', 'lost password', and 'create account' links.

```svelte
<script>
  import { SignIn } from 'flowbite-svelte-admin-dashboard';
  import { Label, Input } from 'flowbite-svelte';
</script>

<SignIn
  title="Sign in to platform"
  rememberMe={true}
  lostPassword={true}
  createAccount={true}
  lostPasswordLink="/forgot-password"
  registerLink="/signup"
  loginTitle="Login to your account"
  createAccountTitle="Create account"
>
  <Label class="space-y-2">
    <span>Email</span>
    <Input name="email" type="email" placeholder="name@company.com" required />
  </Label>
  <Label class="space-y-2">
    <span>Password</span>
    <Input name="password" type="password" placeholder="••••••••" required />
  </Label>
</SignIn>
```

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

### CardWidget Component Example (Svelte)

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

Illustrates the usage of the CardWidget component, a versatile container for displaying content such as tables or lists. It supports a title, subtitle, and custom content, making it suitable for summarizing information.

```svelte
<script>
  import { CardWidget } from 'flowbite-svelte-admin-dashboard';
  import { Table, TableBody, TableBodyCell, TableBodyRow } from 'flowbite-svelte';
</script>

<CardWidget
  title="Latest Transactions"
  subtitle="This is a list of latest transactions"
  class="mb-4"
>
  <Table>
    <TableBody>
      <TableBodyRow>
        <TableBodyCell>Payment from Bonnie Green</TableBodyCell>
        <TableBodyCell>$2,300</TableBodyCell>
      </TableBodyRow>
      <TableBodyRow>
        <TableBodyCell>Payment from Jese Leos</TableBodyCell>
        <TableBodyCell>$5,600</TableBodyCell>
      </TableBodyRow>
    </TableBody>
  </Table>
</CardWidget>
```

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

### Stats Component Example (Svelte)

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

Demonstrates the Stats component for displaying key metrics in a tabbed interface. It can show 'Top products' and 'Top customers', each with relevant details like images, prices, and performance changes.

```svelte
<script>
  import { Stats } from 'flowbite-svelte-admin-dashboard';

  const products = [
    {
      src: 'iphone.png',
      image: 'iPhone 14 Pro',
      label: 'iPhone 14 Pro',
      price: '$999',
      change: 12.5
    },
    {
      src: 'macbook.png',
      image: 'MacBook Pro',
      label: 'MacBook Pro 16"',
      price: '$2499',
      change: -5.2
    }
  ];

  const customers = [
    {
      name: 'Neil Sims',
      email: 'neil.sims@flowbite.com',
      avatar: 'neil-sims.png'
    },
    {
      name: 'Bonnie Green',
      email: 'bonnie@flowbite.com',
      avatar: 'bonnie-green.png'
    }
  ];
</script>

<Stats
  {products}
  {customers}
  title="Acquisition Overview"
  popoverTitle="Traffic analysis"
  tab1Title="Top products"
  tab2Title="Top customers"
>
  {#snippet popoverDesc()}
    <p>Monitor product performance and customer engagement metrics.</p>
  {/snippet}
</Stats>
```

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

### ChartWidget Component Example (Svelte)

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

Shows how to implement the ChartWidget for data visualization, featuring integrated ApexCharts support. This component allows for displaying charts with dynamic data, date range selectors, and performance indicators.

```svelte
<script>
  import { ChartWidget, getChartOptions } from 'flowbite-svelte-admin-dashboard';

  const chartOptions = {
    ...getChartOptions(false),
    series: [
      {
        name: 'Revenue',
        data: [6356, 6218, 6156, 6526, 6356, 6256, 6056],
        color: '#1A56DB'
      }
    ],
    xaxis: {
      categories: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb']
    }
  };
</script>

<ChartWidget
  title="Sales this week"
  subtitle="Total revenue generated"
  chartOptions={chartOptions}
  value={12.5}
  cardClass="mb-4"
/>
```

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

### Import TypeScript Types for Component Props

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

Imports various TypeScript types from the 'flowbite-svelte-admin-dashboard/types' module for defining component props and data structures. Examples demonstrate the usage of 'ProductType' and 'CustomerType' for creating product and customer data objects.

```typescript
import type {
  SingInProps,
  CardWidgetProps,
  ChartWidgetProps,
  StatsProps,
  UserMenuProps,
  NotificationListProps,
  ProductDrawerProps,
  DeleteModalProps,
  TrafficProps,
  ProductType,
  CustomerType,
  NotificationData
} from 'flowbite-svelte-admin-dashboard/types';

const product: ProductType = {
  id: '1',
  name: 'MacBook Pro',
  price: '$2499',
  change: 5.2,
  attributes: {
    color: 'Silver',
    storage: '512GB'
  }
};

const customer: CustomerType = {
  id: 1,
  name: 'Neil Sims',
  email: 'neil@example.com',
  avatar: '/images/avatar.png',
  status: 'active'
};
```

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

### Import Admin Dashboard Components (TypeScript)

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

Demonstrates how to import individual Svelte components from the 'flowbite-svelte-admin-dashboard' package. This allows for flexible integration of specific UI elements into your SvelteKit application.

```typescript
import {
  SignIn,
  CardWidget,
  ChartWidget,
  Stats,
  UserMenu,
  NotificationList
} from 'flowbite-svelte-admin-dashboard';
```

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

### SvelteKit Integration with Server-Side Data Loading

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

Demonstrates how to use Flowbite Svelte Admin Dashboard components like CardWidget, Stats, and Traffic within SvelteKit page routes. It includes a Svelte component ('+page.svelte') for rendering UI elements and a server-side route ('+page.server.ts') for fetching and providing data to the page.

```svelte
<!-- +page.svelte -->
<script>
  import { CardWidget, Stats, Traffic } from 'flowbite-svelte-admin-dashboard';

  let { data } = $props();
</script>

<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
  <CardWidget title="Overview" subtitle="Monthly statistics">
    <p>Revenue: ${data.revenue}</p>
  </CardWidget>

  <Stats
    products={data.products}
    customers={data.customers}
    title="Top Performers"
  />
</div>

<!-- +page.server.ts -->
export const load = async () => {
  return {
    revenue: 45000,
    products: [
      { label: 'Product A', price: '$99', change: 10.5 }
    ],
    customers: [
      { name: 'John Doe', email: 'john@example.com' }
    ]
  };
};
```

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

### Generate ApexCharts Configuration with Dark Mode Support

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

Utility function to generate ApexCharts configuration, supporting dark mode. It allows for generating default options for light or dark modes and customizing series, axes, and data formatting. This function is part of the 'flowbite-svelte-admin-dashboard' library.

```typescript
import { getChartOptions } from 'flowbite-svelte-admin-dashboard';

// Generate chart options for light mode
const lightChartOptions = getChartOptions(false);

// Generate chart options for dark mode
const darkChartOptions = getChartOptions(true);

// Customize with your data
const customOptions = {
  ...getChartOptions(false),
  series: [
    {
      name: 'Sales',
      data: [1500, 1800, 2200, 1900, 2400, 2600, 2800],
      color: '#1A56DB'
    },
    {
      name: 'Profit',
      data: [800, 950, 1100, 980, 1200, 1350, 1450],
      color: '#7E3BF2'
    }
  ],
  xaxis: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yaxis: {
    labels: {
      formatter: (value) => `$${value}`
    }
  }
};
```

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

### Traffic Component for Analytics Visualization

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

An analytics component that visualizes traffic metrics by device type. It includes a chart visualization and small panels displaying statistics for Desktop, Mobile, and Tablet. Dependencies include `flowbite-svelte-admin-dashboard`, `flowbite-svelte-icons`, and `@flowbite-svelte-plugins/chart`.

```svelte
<script>
  import { Traffic, SmallPanel } from 'flowbite-svelte-admin-dashboard';
  import { DesktopPcSolid, MobilePhoneSolid, TabletSolid } from 'flowbite-svelte-icons';
  import { Chart } from '@flowbite-svelte-plugins/chart';

  const devices = [
    {
      title: 'Desktop',
      subtitle: '234,567',
      change: 12.5,
      IconOption: {
        icon: DesktopPcSolid,
        iconClass: 'text-gray-500',
        size: 'lg'
      }
    },
    {
      title: 'Mobile',
      subtitle: '94,567',
      change: 8.3,
      IconOption: {
        icon: MobilePhoneSolid,
        iconClass: 'text-gray-500',
        size: 'lg'
      }
    },
    {
      title: 'Tablet',
      subtitle: '12,345',
      change: -3.1,
      IconOption: {
        icon: TabletSolid,
        iconClass: 'text-gray-500',
        size: 'lg'
      }
    }
  ];

  const chartOptions = {
    series: [52.8, 26.8, 20.4],
    labels: ['Desktop', 'Mobile', 'Tablet']
  };
</script>

<Traffic
  title="Traffic by device"
  subtitle="Desktop"
  more={{ title: 'Full report', href: '/reports' }}
  {devices}
>
  {#snippet chart()}
    <Chart options={chartOptions} />
  {/snippet}
</Traffic>
```

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

### UserMenu Component for User Profile

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

A dropdown menu component for displaying user profile information such as avatar, name, and email. It allows for customizable menu items and actions like 'Sign out'. Dependencies include `flowbite-svelte-admin-dashboard` and `flowbite-svelte` for dropdown elements.

```svelte
<script>
  import { UserMenu } from 'flowbite-svelte-admin-dashboard';
  import { DropdownDivider, DropdownItem } from 'flowbite-svelte';

  const menuItems = [
    'Dashboard',
    'Settings',
    'Earnings',
    'Sign out'
  ];
</script>

<UserMenu
  name="Neil Sims"
  email="neil.sims@flowbite.com"
  avatar="/images/users/neil-sims.png"
  {menuItems}
  placement="bottom-end"
>
  <DropdownDivider />
  <DropdownItem>Sign out</DropdownItem>
</UserMenu>
```

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

### ProductDrawer Component for Product Management

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

A side drawer form component for adding or editing product details. It supports dynamic fields, pre-filling existing data, and includes form validation. The component requires `flowbite-svelte-admin-dashboard` and uses Svelte's state management (`$state`).

```svelte
<script>
  import { ProductDrawer } from 'flowbite-svelte-admin-dashboard';

  let open = $state(false);

  const productData = {
    name: 'Apple iMac 27"',
    price: '$2999',
    description: 'Standard glass, 3.8GHz 8-core 10th-generation Intel Core i7'
  };

  const additionalFields = [
    {
      name: 'category',
      label: 'Category',
      placeholder: 'Select category',
      options: [
        { value: 'electronics', label: 'Electronics' },
        { value: 'accessories', label: 'Accessories' }
      ]
    },
    {
      name: 'brand',
      label: 'Brand',
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'samsung', label: 'Samsung' }
      ]
    }
  ];

  const handleSubmit = (e) => {
    const formData = new FormData(e.target);
    console.log(Object.fromEntries(formData));
  };
</script>

<button onclick={() => open = true}>Add Product</button>

<ProductDrawer
  bind:open
  title="Add new product"
  data={productData}
  {additionalFields}
  onsubmit={handleSubmit}
/>
```

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

### NotificationList Component for Recent Notifications

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

A notification bell component that displays a popover with recent notifications. Each notification can include an icon, timestamp, sender's avatar, and read/unread status. It utilizes `flowbite-svelte-admin-dashboard` and `flowbite-svelte-icons` for icons.

```svelte
<script>
  import { NotificationList } from 'flowbite-svelte-admin-dashboard';
  import { MessageDotsSolid, UserAddSolid } from 'flowbite-svelte-icons';

  const notifications = [
    {
      src: '/images/users/bonnie-green.png',
      Icon: MessageDotsSolid,
      when: '2 minutes ago',
      color: 'blue',
      content: '<strong>Bonnie Green</strong> sent you a message'
    },
    {
      src: '/images/users/jese-leos.png',
      Icon: UserAddSolid,
      when: '10 minutes ago',
      color: 'green',
      content: '<strong>Jese Leos</strong> started following you'
    }
  ];
</script>

<NotificationList {notifications} />
```

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

### DeleteModal Component for Confirmation

Source: https://context7.com/themesberg/flowbite-svelte-admin-dashboard/llms.txt

A confirmation modal component designed for destructive actions, such as deleting an item. It features a customizable title and action buttons ('Yes', 'No'). The component is part of `flowbite-svelte-admin-dashboard` and uses Svelte's state management (`$state`) to control visibility.

```svelte
<script>
  import { DeleteModal } from 'flowbite-svelte-admin-dashboard';

  let open = $state(false);

  const handleDelete = () => {
    console.log('Item deleted');
    open = false;
  };
</script>

<button onclick={() => open = true}>Delete Item</button>

<DeleteModal
  bind:open
  title="Are you sure you want to delete this product?"
  yes="Yes, I'm sure"
  no="No, cancel"
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.