flowbite-svelte 0.44.11 → 0.44.12

package/src/routes/docs/pages/colors.md

@@ -1,152 +0,0 @@
----
-layout: componentLayout
-title: Colors - Flowbite Svelte
-breadcrumb_title: Colors - Flowbite Svelte
-component_title: Colors
-dir: Pages
-description: Customize your project and the color of the components from Flowbite Svelte by editing the Tailwind configuration file from the root folder
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils';
-  import { A, Img, P } from '$lib';
-</script>
-
-## Primary color in tailwind.config.cjs
-
-There are 22 colors defined in the <A href="https://github.com/themesberg/flowbite-svelte/blob/main/tailwind.config.cjs">tailwind.config.cjs</A>.
-
-<Img src="/images/colors.webp" alt="Primary colors" class="flex justify-center rounded-lg p-8" />
-
-In the provided code, you can customize the primary color by modifying the appropriate color values. To change the primary color, simply uncomment the desired color object and modify the corresponding color values as needed.
-
-```js
-const config = {
-  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
-
-  plugins: [require('flowbite/plugin')],
-
-  darkMode: 'class',
-
-  theme: {
-    extend: {
-      colors: {
-        // flowbite-svelte
-        primary: {
-          50: '#FFF5F2',
-          100: '#FFF1EE',
-          200: '#FFE4DE',
-          300: '#FFD5CC',
-          400: '#FFBCAD',
-          500: '#FE795D',
-          600: '#EF562F',
-          700: '#EB4F27',
-          800: '#CC4522',
-          900: '#A5371B'
-        }
-
-        // pink
-        // primary: {"50":"#fdf2f8","100":"#fce7f3","200":"#fbcfe8","300":"#f9a8d4","400":"#f472b6","500":"#ec4899","600":"#db2777","700":"#be185d","800":"#9d174d","900":"#831843"}
-
-        // fuchsia
-        // primary: {"50":"#fdf4ff","100":"#fae8ff","200":"#f5d0fe","300":"#f0abfc","400":"#e879f9","500":"#d946ef","600":"#c026d3","700":"#a21caf","800":"#86198f","900":"#701a75"}
-
-        // purple
-        // primary: {"50":"#faf5ff","100":"#f3e8ff","200":"#e9d5ff","300":"#d8b4fe","400":"#c084fc","500":"#a855f7","600":"#9333ea","700":"#7e22ce","800":"#6b21a8","900":"#581c87"}
-
-        // violet
-        // primary: {"50":"#f5f3ff","100":"#ede9fe","200":"#ddd6fe","300":"#c4b5fd","400":"#a78bfa","500":"#8b5cf6","600":"#7c3aed","700":"#6d28d9","800":"#5b21b6","900":"#4c1d95"}
-
-        // indigo
-        // primary: {"50":"#eef2ff","100":"#e0e7ff","200":"#c7d2fe","300":"#a5b4fc","400":"#818cf8","500":"#6366f1","600":"#4f46e5","700":"#4338ca","800":"#3730a3","900":"#312e81"}
-
-        // blue
-        // primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a"}
-
-        // sky
-        // primary: {"50":"#f0f9ff","100":"#e0f2fe","200":"#bae6fd","300":"#7dd3fc","400":"#38bdf8","500":"#0ea5e9","600":"#0284c7","700":"#0369a1","800":"#075985","900":"#0c4a6e"}
-
-        // cyan
-        // primary: {"50":"#ecfeff","100":"#cffafe","200":"#a5f3fc","300":"#67e8f9","400":"#22d3ee","500":"#06b6d4","600":"#0891b2","700":"#0e7490","800":"#155e75","900":"#164e63"}
-
-        // teal
-        // primary: {"50":"#f0fdfa","100":"#ccfbf1","200":"#99f6e4","300":"#5eead4","400":"#2dd4bf","500":"#14b8a6","600":"#0d9488","700":"#0f766e","800":"#115e59","900":"#134e4a"}
-
-        // emerald
-        // primary: {"50":"#ecfdf5","100":"#d1fae5","200":"#a7f3d0","300":"#6ee7b7","400":"#34d399","500":"#10b981","600":"#059669","700":"#047857","800":"#065f46","900":"#064e3b"}
-
-        // green
-        // primary: {"50":"#f0fdf4","100":"#dcfce7","200":"#bbf7d0","300":"#86efac","400":"#4ade80","500":"#22c55e","600":"#16a34a","700":"#15803d","800":"#166534","900":"#14532d"}
-
-        // lime
-        // primary: {"50":"#f7fee7","100":"#ecfccb","200":"#d9f99d","300":"#bef264","400":"#a3e635","500":"#84cc16","600":"#65a30d","700":"#4d7c0f","800":"#3f6212","900":"#365314"}
-
-        // yellow
-        // primary: {"50":"#fefce8","100":"#fef9c3","200":"#fef08a","300":"#fde047","400":"#facc15","500":"#eab308","600":"#ca8a04","700":"#a16207","800":"#854d0e","900":"#713f12"}
-
-        // amber
-        // primary: {"50":"#fffbeb","100":"#fef3c7","200":"#fde68a","300":"#fcd34d","400":"#fbbf24","500":"#f59e0b","600":"#d97706","700":"#b45309","800":"#92400e","900":"#78350f"}
-
-        // orange
-        // primary: {"50":"#fff7ed","100":"#ffedd5","200":"#fed7aa","300":"#fdba74","400":"#fb923c","500":"#f97316","600":"#ea580c","700":"#c2410c","800":"#9a3412","900":"#7c2d12"}
-
-        // red
-        // primary: {"50":"#fef2f2","100":"#fee2e2","200":"#fecaca","300":"#fca5a5","400":"#f87171","500":"#ef4444","600":"#dc2626","700":"#b91c1c","800":"#991b1b","900":"#7f1d1d"}
-
-        // stone
-        // primary: {"50":"#fafaf9","100":"#f5f5f4","200":"#e7e5e4","300":"#d6d3d1","400":"#a8a29e","500":"#78716c","600":"#57534e","700":"#44403c","800":"#292524","900":"#1c1917"}
-
-        // neutral
-        // primary: {"50":"#fafafa","100":"#f5f5f5","200":"#e5e5e5","300":"#d4d4d4","400":"#a3a3a3","500":"#737373","600":"#525252","700":"#404040","800":"#262626","900":"#171717"}
-
-        // zinc
-        // primary: {"50":"#fafafa","100":"#f4f4f5","200":"#e4e4e7","300":"#d4d4d8","400":"#a1a1aa","500":"#71717a","600":"#52525b","700":"#3f3f46","800":"#27272a","900":"#18181b"}
-
-        // gray
-        // primary: {"50":"#f9fafb","100":"#f3f4f6","200":"#e5e7eb","300":"#d1d5db","400":"#9ca3af","500":"#6b7280","600":"#4b5563","700":"#374151","800":"#1f2937","900":"#111827"}
-
-        // slate
-        // primary: {"50":"#f8fafc","100":"#f1f5f9","200":"#e2e8f0","300":"#cbd5e1","400":"#94a3b8","500":"#64748b","600":"#475569","700":"#334155","800":"#1e293b","900":"#0f172a"}
-      }
-    }
-  }
-};
-
-module.exports = config;
-```
-
-## Examples
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import { Button, Alert, Card, Navbar, NavBrand, NavLi, NavUl, NavHamburger, Toast } from 'flowbite-svelte';
-  import { FireOutline } from 'flowbite-svelte-icons';
-</script>
-
-<Button color="primary">Primary</Button>
-<Alert color="primary">Primary</Alert>
-<Card href="/cards" color="primary">
-  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-red-800">Noteworthy technology acquisitions 2021</h5>
-  <p class="font-normal text-gray-700 dark:text-gray-700 leading-tight">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
-</Card>
-<Navbar let:hidden let:toggle color="primary">
-  <NavBrand href="/">
-    <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
-    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-red-800">Flowbite</span>
-  </NavBrand>
-  <NavHamburger on:click={toggle} />
-  <NavUl {hidden}>
-    <NavLi href="/" active={true}>Home</NavLi>
-    <NavLi href="/about">About</NavLi>
-    <NavLi href="/services">Services</NavLi>
-    <NavLi href="/pricing">Pricing</NavLi>
-    <NavLi href="/contact">Contact</NavLi>
-  </NavUl>
-</Navbar>
-<Toast color="primary">
-  <svelte:fragment slot="icon">
-    <FireOutline class="w-6 h-6" />
-  </svelte:fragment>
-  Dismissable user notification.
-</Toast>
-```

package/src/routes/docs/pages/compiler-speed.md

@@ -1,116 +0,0 @@
----
-layout: componentLayout
-breadcrumb_title: Compiler Speed - Flowbite Svelte
-title: Compiler Speed - Flowbite Svelte
-component_title: Compiler Speed
-dir: Pages
-description: Learn how you can manage and improve the Svelte compilation speed when using the Flowbite Svelte library by checking out this tutorial
----
-
-<script>
-  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from '$lib'
-  
-</script>
-
-If your Svelte app only requires a few components, it's recommended that you import them directly. Doing so can help optimize compilation speed and improve performance by reducing the amount of code that needs to be processed during compilation. Since version 0.34.1, it's now possible to import individual components.
-
-```svelte example
-<script>
-  // import Alert from 'flowbite-svelte/Alert.svelte'
-  // TODO: correct that so the above works
-  import { Alert } from 'flowbite-svelte';
-</script>
-
-<div class="p-8">
-  <Alert>
-    <span class="font-medium">Info alert!</span>
-    Change a few things up and try submitting again.
-  </Alert>
-</div>
-```
-
-## Requirements
-
-If you are a TypeScript user, install typescript version 5.0.0 or above.
-
-As of April 2023, the typescript version 5 is available:
-
-```sh
-pnpm i -D typescript@latest
-```
-
-To avoid any complaints from the editor, add node16 or nodenext to moduleResolution in your tsconfig.json file.
-
-```json
-{
-  //...
-  "compilerOptions": {
-    // ...
-    "moduleResolution": "nodenext"
-  }
-}
-```
-
-## Speed comparisons
-
-<Table class="my-8">
-  <TableHead>
-    <TableHeadCell>Files</TableHeadCell>
-    <TableHeadCell>Time</TableHeadCell>
-    <TableHeadCell>Avg</TableHeadCell>
-  </TableHead>
-  <TableBody>
-    <TableBodyRow>
-      <TableBodyCell>1</TableBodyCell>
-      <TableBodyCell>3.3ms</TableBodyCell>
-      <TableBodyCell>3.3ms</TableBodyCell>
-    </TableBodyRow>
-    <TableBodyRow>
-      <TableBodyCell>2</TableBodyCell>
-      <TableBodyCell>9.0ms</TableBodyCell>
-      <TableBodyCell>4.5ms</TableBodyCell>
-    </TableBodyRow>
-    <TableBodyRow>
-      <TableBodyCell>7</TableBodyCell>
-      <TableBodyCell>20.7ms</TableBodyCell>
-      <TableBodyCell>3.0ms</TableBodyCell>
-    </TableBodyRow>
-    <TableBodyRow>
-      <TableBodyCell>7</TableBodyCell>
-      <TableBodyCell>60.6ms</TableBodyCell>
-      <TableBodyCell>8.7ms</TableBodyCell>
-    </TableBodyRow>
-  </TableBody>
-</Table>
-
-The above table shows examples from using `import Alert from 'flowbite-svelte/Alert.svelte'`. Compare these numbers to the following table where using normal import.
-
-<Table class="my-8">
-  <TableHead>
-    <TableHeadCell>Files</TableHeadCell>
-    <TableHeadCell>Time</TableHeadCell>
-    <TableHeadCell>Avg</TableHeadCell>
-  </TableHead>
-  <TableBody>
-    <TableBodyRow>
-      <TableBodyCell>151</TableBodyCell>
-      <TableBodyCell>1.10s</TableBodyCell>
-      <TableBodyCell>7.3ms</TableBodyCell>
-    </TableBodyRow>
-    <TableBodyRow>
-      <TableBodyCell>154</TableBodyCell>
-      <TableBodyCell>0.40s</TableBodyCell>
-      <TableBodyCell>2.6ms</TableBodyCell>
-    </TableBodyRow>
-    <TableBodyRow>
-      <TableBodyCell>151</TableBodyCell>
-      <TableBodyCell>1.04s</TableBodyCell>
-      <TableBodyCell>6.9ms</TableBodyCell>
-    </TableBodyRow>
-    <TableBodyRow>
-      <TableBodyCell>154</TableBodyCell>
-      <TableBodyCell>1.32s</TableBodyCell>
-      <TableBodyCell>8.8ms</TableBodyCell>
-    </TableBodyRow>
-  </TableBody>
-</Table>

package/src/routes/docs/pages/customization.md

@@ -1,103 +0,0 @@
----
-layout: componentLayout
-breadcrumb_title: Customization- Flowbite Svelte
-title: Customization - Flowbite Svelte
-component_title: Customization
-dir: Pages
-description: Learn how you can overwrite the default style with you own CSS
----
-
-<script>
-  
-</script>
-
-When working with components, you may want to customize their default or specific classes. Here's a guide on how to achieve that. Starting from version 0.38.0, we have transitioned from using classnames to tailwind-merge, which allows us to easily overwrite classes and avoid style conflicts. This update brings enhanced flexibility and simplifies the process of customizing component styles.
-
-## Understanding Props
-
-Each component has a props section where you can find information on how to customize classes. For example, let's refer to the [Alert Props section](https://flowbite-svelte.com/docs/components/alert#Props).
-
-![alert prop](/images/alert-prop.png)
-
-In this case, you can overwrite the `defaultClass` by adding the `class` prop. Here's an example:
-
-```svelte example
-<script>
-  import { Alert } from '$lib';
-</script>
-
-<Alert class="text-xl">Add a class to overwrite the default class!</Alert>
-```
-
-Thanks to tailwind-merge, you can efficiently merge Tailwind CSS classes without style conflicts. One of its features is that the last conflicting class wins. Please read more details about [Merging behavior](https://github.com/dcastil/tailwind-merge/blob/v1.13.1/docs/features.md)
-
-## Importance of ! for Some Components
-
-In Tailwind CSS, you can make any utility class important by adding a `!` character at the beginning of the class name. Certain components may require this approach to successfully overwrite styles. Here's an example:
-
-```svelte example
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-
-<Button class="!bg-blue-500">Blue Button</Button>
-<Button class="!bg-green-500">Green Button</Button>
-```
-
-## Overwriting Specific Classes
-
-While the `class` prop can be used for most components, some components with a complex structure may require multiple props. For instance, let's consider [the Banner component](https://flowbite-svelte.com/docs/components/banner) has two relevant props: `classDiv` for `divClass` and `classInner` for `innerClass`. To overwrite the `divClass`, you can use the `classDiv` prop:
-
-```svelte example class="flex flex-col relative"
-<script>
-  import { Banner, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
-</script>
-
-<Skeleton class="py-4" />
-<ImagePlaceholder class="py-4" />
-
-<Banner id="default-banner" position="absolute" classDiv="dark:bg-green-500 dark:border-green-400">
-  <p class="flex items-center text-sm font-normal text-gray-500 dark:text-white">Overwriting divClass and innerClass</p>
-</Banner>
-```
-
-You can test this by switching to dark mode and observing the background color change to green.
-
-We hope these instructions help you confidently customize component classes. Feel free to reach out if you have any further questions!
-
-## Global customization
-
-To customize the Flowbite-Svelte component globally, follow these steps:
-
-Start by creating your own component based on Flowbite-Svelte.
-
-Create a new file for your button component in the lib directory:
-
-```
-// src/lib/MyButton.svelte
-<script>
-  import { Button } from 'flowbite-svelte'
-</script>
-
-<Button color="green" pill class="p-8">
-  <slot />
-</Button>
-```
-
-Once you have created your button component, you can use it in your project.
-
-In your project, import your custom button component:
-
-```
-<script>
-  import MyButton from "$lib/MyButton.svelte"
-</script>
-```
-
-Use the custom button component in your project by adding the following code:
-
-```
-<MyButton>My New Button</MyButton>
-```
-
-With these steps, you can customize and use your own button component globally based on Flowbite-Svelte. Feel free to modify the styles and properties of the component according to your requirements.

package/src/routes/docs/pages/how-to-contribute.md

@@ -1,138 +0,0 @@
----
-layout: componentLayout
-breadcrumb_title: How to Contribute - Flowbite Svelte
-title: How to Contribute - Flowbite Svelte
-component_title: Contributing
-dir: Pages
-description: Learn how you can start contributing to the open-source Flowbite Svelte UI component library
----
-
-<script>
-  
-</script>
-
-Here are some guidelines we'd like you to follow before submitting a PR.
-
-## Create a fork
-
-Create a fork from [Flowbite-Svelte](https://github.com/themesberg/flowbite-svelte) to your repository first.
-
-## Please use pnpm to install
-
-The repo uses `pnpm`, so using `pnpm` is desirable when you fork and install dependencies to avoid unseen problems.
-
-When there is a change in `package.json`, remove `pnpm-lock.yml` and `node_modules` directory and run `pnpm i`.
-
-## Tailwind CSS
-
-[Tailwind warns](https://tailwindcss.com/docs/content-configuration#dynamic-class-names) that you don't construct class names dynamically. Instead of this:
-
-```html
-<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
-```
-
-Always use complete class names:
-
-```html
-<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
-```
-
-## Types and Props
-
-Add a type to `export`-ed variables. When we generate props files, it will automatically pick up types from your file. If you don't add a type, it will break.
-
-Use `lib/types file for nested objects.
-
-```js
-// these work
-export let icons: AccordionIconType = {
-  up: 'chevron-up-solid',
-  down: 'chevron-down-solid'
-};
-
-export let child: TopMenuType[] | undefined = undefined;
-...
-
-// doesn't work
-export let comment: CommentType = {
-  id: number | string;
-  user: {
-    name: string;
-    joined: string;
-  };
-};
-// put it in lib/types
-export interface CommentType {
-  id: number | string;
-  user: {
-    name: string;
-    joined: string;
-  };
-};
-
-// then
-export let comment: CommentType;
-```
-
-See more details in the [createprops' README](https://github.com/shinokada/createprops) file.
-
-Please run the following to update prop files.
-
-```sh
-npm run gen:props
-```
-
-This script will update/generate files in `src/routes/props`.
-
-Again avoid type inference for `export`ed variables.
-
-## Conventional commit
-
-When making a commit, we recommend using [the Conventional commits](https://www.conventionalcommits.org/en/v1.0.0/).
-
-Some examples are:
-
-```sh
-feat: add rating component
-fix: add if statement to Button component
-chore: clean up About page
-docs: add timeline page
-style: update home page
-test: add modal test
-```
-
-Use `!` for a minor bump.
-
-```sh
-feat!: add drawer component and page
-```
-
-When you have a breaking change:
-
-```
-git commit -a "feat: change btnClass name to bClass" -m "BREAKING CHANGE: change the Button component attributes"
-```
-
-## Playwright Test
-
-Before submitting a PR, please run a test:
-
-```sh
-npm run test
-```
-
-If you want to run an single test file, `tests/typography.spec.ts`:
-
-```sh
-npx playwright test tests/typography.spec.ts
-```
-
-## A11y Test
-
-Please test a page with [Nu Html Checker](https://validator.unl.edu/) relating to your change.
-
-Test a page.
-
-```sh
-axe http://localhost:3000/dropdowns/image
-```

package/src/routes/docs/pages/ide-support.md

@@ -1,19 +0,0 @@
----
-layout: componentLayout
-breadcrumb_title: IDE Support - Flowbite Svelte
-title: IDE Support - Flowbite Svelte
-component_title: IDE Support
-dir: Pages
-description: The Flowbite Svelte components support component documentation.
----
-
-## IDE support
-
-If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, features, props, events, and an example.
-
-<script>
-  import { Img } from 'flowbite-svelte';
-  
-</script>
-
-<Img src='/videos/compo-doc.gif' alt="component document demo" />

package/src/routes/docs/pages/introduction.md

@@ -1,131 +0,0 @@
----
-layout: componentLayout
-breadcrumb_title: Svelte UI Components - Flowbite Svelte
-title: Flowbite Svelte - UI Component Library
-component_title: Introduction
-dir: Pages
-description: Learn more about the free and open-source Flowbite Svelte UI components and start building modern web applications using native Svelte components based on Tailwind CSS
----
-
-<script>
-  
-</script>
-
-[Flowbite Svelte](https://github.com/themesberg/flowbite-svelte) is a free and open-source UI component library based on the core Flowbite components and built with native Svelte components and interactivity handling.
-
-This library features hundreds of interactive elements such as navbars, dropdowns, modals, and sidebars all handled by Svelte and based on the utility classes from Tailwind CSS.
-
-## Getting started
-
-Learn how to get started with Flowbite Svelte by following the quickstart guide and start leveraging the interactive Svelte components coupled with Flowbite and Tailwind CSS.
-
-### Using SvelteKit
-
-You can install SvelteKit or Svelte to start your app. For SvelteKit:
-
-```bash example
-npm create svelte@latest my-app
-cd my-app
-pnpm install
-```
-
-### Using Svelte
-
-If you want to get started with Svelte:
-
-```bash
-npm create vite@latest myapp -- --template svelte
-cd myapp
-pnpm install
-```
-
-### Install Tailwind CSS
-
-In order to enable the utility classes from Tailwind CSS install the package using NPM:
-
-```bash
-npx svelte-add@latest tailwindcss
-pnpm install
-```
-
-Run a local development server by running:
-
-```bash
-pnpm dev
-```
-
-### Install Flowbite Svelte
-
-Run the following command to install all Flowbite dependencies and libraries:
-
-```sh
-pnpm i -D flowbite-svelte
-```
-
-### Configuration
-
-Update the `tailwind.config.cjs` file from your root project folder to let the Tailwind CSS compiler know where to look for the utility classes and also set up the Flowbite plugin.
-
-In the provided code below, you can customize the primary color by modifying the appropriate color values. To change the primary color, simply uncomment the desired color object and modify the corresponding color values as needed.
-
-```js
-const config = {
-  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
-
-  plugins: [require('flowbite/plugin')],
-
-  darkMode: 'class',
-
-  theme: {
-    extend: {
-      colors: {
-        // flowbite-svelte
-        primary: {
-          50: '#FFF5F2',
-          100: '#FFF1EE',
-          200: '#FFE4DE',
-          300: '#FFD5CC',
-          400: '#FFBCAD',
-          500: '#FE795D',
-          600: '#EF562F',
-          700: '#EB4F27',
-          800: '#CC4522',
-          900: '#A5371B'
-        }
-      }
-    }
-  }
-};
-
-module.exports = config;
-```
-
-Now you should be able to work with the Flowbite Svelte library and import components such as the navbar, dropdown, modal, and more.
-
-## Svelte
-
-Svelte is a modern and growing front-end compiler. Developers build boilerplate-free components using languages HTML, CSS and JavaScript. Svelte compiles your code to tiny, framework-less vanilla JS.
-
-## Tailwind CSS
-
-Flowbite Svelte leverages the utility classes from the popular [Tailwind CSS](https://tailwindcss.com) framework allowing greater customization capabilities directly from a component level in Svelte.
-
-## Flowbite Ecosystem
-
-[Flowbite](https://flowbite.com) is also available in other frameworks such as vanilla JS with HTML, React, Vue, Angular, and even integration possibilities with back-end frameworks such as Laravel, Django, Flask, and Phoenix.
-
-Check out the main [GitHub repository](https://github.com/themesberg/flowbite) to explore other libraries too as well as the [Figma design system](https://flowbite.com/figma/).
-
-## UI Components
-
-Flowbite Svelte has a rich collection of commonly used components coded with Svelte that leverage the utility classes from Tailwind CSS and you can check out the full list of components by navigating through the components section in the sidebar on the left side of the page.
-
-## Contributing
-
-Flowbite Svelte is a free and open-source UI component library built with Svelte native components and based on the Flowbite ecosystem and contributions are more than welcome.
-
-Check out [contributing guide](/docs/pages/how-to-contribute) to learn how you can be a part of the open-source community.
-
-## License
-
-Flowbite Svelte is a free and open-source UI component library licensed under the [MIT License](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE).