flowbite-svelte-admin-dashboard

To use the flowbite-svelte-admin-dashboard in a new Svelte project, follow these steps:

1. Create a new Svelte project using sv: npx sv create my-app
2. Navigate to your project directory: cd my-app
3. Install the dashboard package as a development dependency using pnpm: pnpm i -D flowbite-svelte-admin-dashboard
4. Update your dependencies to ensure compatibility: pnpm update
5. Start the development server: pnpm dev

The dashboard provides a predefined set of time slots via DEFAULT_TIMESLOTS. You can use the TimeSlot type to ensure compatibility with components like DateRangeSelector.

export const DEFAULT_TIMESLOTS = {
  Yesterday: -1,
  Today: 0,
  'Last 7 days': 7,
  'Last 30 days': 30,
  'Last 90 days': 90
};

export type TimeSlot = keyof typeof DEFAULT_TIMESLOTS;

The project uses Playwright for end-to-end (e2e) testing. The configuration defines where tests are located and how the local development server should be started before running tests.

• testDir: Set to e2e, meaning all Playwright test files should be placed in the e2e directory.
• webServer: Configures the local server used during testing. It runs npm run build && npm run preview and listens on port 4173.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  webServer: {
    command: 'npm run build && npm run preview',
    port: 4173
  },
  testDir: 'e2e'
});

The dashboard uses a base directory for all image assets. By default, it points to https://flowbite-admin-dashboard.vercel.app/images. You can override this by setting the VITE_IMG_DIR environment variable in your project configuration (e.g., in a .env file).

VITE_IMG_DIR=https://your-custom-cdn.com/images

The library exports a wide range of pre-built Svelte components for building admin dashboards, including UI elements (Cards, Badges, Modals), data visualization (Charts, Stats), and full-page views (SignIn, SignUp, NotFound). You can import these components directly from the library entry point.

<script>
  import { 
    Accounts, 
    CardWidget, 
    ChartWidget, 
    StatusBadge, 
    SignIn, 
    UserMenu 
  } from 'flowbite-svelte-admin-dashboard';
</script>

<StatusBadge>Active</StatusBadge>
<CardWidget>
  <ChartWidget />
</CardWidget>

The project provides utility functions to construct full URLs for images based on the configured MY_IMG_DIR.

• avatarPath(src: string): Returns the full path to a user avatar located in the /users/ subdirectory.
• imagesPath(src: string, ...subdirs: string[]): Returns a joined path starting from MY_IMG_DIR, followed by any provided subdirectories, and ending with the filename. It automatically filters out empty segments.

import { avatarPath, imagesPath } from '$lib/variables';

// Get avatar URL
const avatar = avatarPath('user-1.png'); 
// Result: https://flowbite-admin-dashboard.vercel.app/images/users/user-1.png

// Get custom image URL with subdirectories
const logo = imagesPath('logo.png', 'branding', 'assets');
// Result: https://flowbite-admin-dashboard.vercel.app/images/branding/assets/logo.png

In addition to components, the library exports utility functions and TypeScript types. Specifically, getChartOptions is available for configuring chart behavior, and all core types are exported for use in your own component props or data structures.

import { getChartOptions, type SomeType } from 'flowbite-svelte-admin-dashboard';

const options = getChartOptions();

The mapUsersWithAvatars function takes an array of user objects and ensures their avatar property is a full URL.

If the avatar string already starts with http, it remains unchanged. Otherwise, it prepends the MY_IMG_DIR and the /users/ path to the filename. This is useful for transforming raw data from an API into UI-ready data.

import { mapUsersWithAvatars } from '$lib/variables';

const rawUsers = [
  { name: 'John Doe', avatar: 'john.jpg' },
  { name: 'External User', avatar: 'https://other-site.com/photo.png' }
];

const usersWithFullUrls = mapUsersWithAvatars(rawUsers);
/*
[
  { name: 'John Doe', avatar: 'https://flowbite-admin-dashboard.vercel.app/images/users/john.jpg' },
  { name: 'External User', avatar: 'https://other-site.com/photo.png' }
]
*/

The following components are available for direct import:

• Auth & User: Accounts, ForgotPassword, ProfileLock, ResetPassword, SignIn, SignUp, UserMenu, UserModal, UserProfile
• Data & Analytics: ActivityList, CategorySalesReport, ChartWidget, ComparisonTable, DarkChart, ProductMetricCard, Stats, Traffic
• UI Elements: CardList, CardWidget, EmptyCard, IconAvatar, Notification, NotificationCard, NotificationList, PriceCard, PriceCardPrice, PriceCardListItem, SmallPanel, StatusBadge
• Layout & Navigation: AppsMenu, Footer, LanguageTime, More, UserMenu
• Feedback & Overlays: DeleteDrawer, DeleteModal, Drawer (via ProductDrawer), NotFound, ServerError, Maintenance
• Widgets & Specialized: ChatMsg, DateRangeSelector, GeneralInfo, Faq, Playground

The dashboard provides several specialized props interfaces for authentication flows. Most extend HTMLFormAttributes and allow customization of the UI via CSS classes:

• SingInProps: For login pages. Includes options for rememberMe, lostPassword, and createAccount links.
• SingUpProps: For registration pages. Includes haveAccount and acceptTerms options.
• ForgotPasswordProps: For password recovery flows.
• ProfileLockProps / RestPasswordProps: For security-related user actions.

// Example of SingInProps structure
export interface SingInProps extends HTMLFormAttributes {
  children: Snippet;
  site?: SiteType;
  rememberMe?: boolean;
  title?: string;
  lostPassword?: boolean;
  createAccount?: boolean;
  // ... other styling and link props
}

The FooterProps interface defines the layout for the site footer, requiring a brand (name, link, image) and an array of menus. Each menu contains a title and a list of FooterLinkType items.

export type BrandType = {
  name: string;
  href: string;
  src: string;
  alt: string;
};

export type FooterLinkType = {
  className: string;
  href: string;
  item: string;
};

export type Menu = {
  title: string;
  links: FooterLinkType[];
};

export interface FooterProps {
  brand: BrandType;
  description?: Snippet;
  menus: Menu[];
}