@keenmate/svelte-pure-admin is a Svelte 5 component library that wraps the Pure Admin CSS framework (@keenmate/pure-admin-core) into type-safe, reactive Svelte components.

Built using modern Svelte 5 features (runes, snippets), this library provides ready-to-use components that follow the HTML patterns defined in the core framework's snippet library.

This documentation site showcases the svelte-pure-admin component library with multiple theme options. Use the settings panel (gear icon) to switch between themes and customize the appearance.

The SettingsPanel component (gear icon in the corner) is primarily a demo and development tool to showcase what's possible with pure-admin-core. It's not typically something you'd expose to end users in production.

<script>
  let profileHasAvatar = $state(true);
  let profileIconOnlyTabs = $state(false);

  function handleSettingsChange(settings) {
    profileHasAvatar = settings.profileHasAvatar;
    profileIconOnlyTabs = settings.profileIconOnlyTabs;
  }
</script>

<SettingsPanel onsettingschange={handleSettingsChange} />
<ProfilePanel
  hasAvatar={profileHasAvatar}
  hasIconOnlyTabs={profileIconOnlyTabs}
  ...
/>

Install the library and your preferred theme:

npm install @keenmate/svelte-pure-admin @keenmate/pure-admin-theme-audi

Or with your package manager of choice:

# pnpm
pnpm add @keenmate/svelte-pure-admin @keenmate/pure-admin-theme-audi

# yarn
yarn add @keenmate/svelte-pure-admin @keenmate/pure-admin-theme-audi

After installation, import your chosen theme CSS and wrap your app in the PureAdminProvider component.

1. Import the theme (in your root layout)

<script>
  // Import your chosen theme - pick ONE
  import '@keenmate/pure-admin-theme-audi';
  // or: import '@keenmate/pure-admin-theme-corporate';
  // or: import '@keenmate/pure-admin-theme-dark';
  // etc.
</script>

2. Wrap your app with PureAdminProvider

<script>
  import { PureAdminProvider, Layout, Navbar, Sidebar, Main } from '@keenmate/svelte-pure-admin';
  import '@keenmate/pure-admin-theme-corporate';

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

<PureAdminProvider>
  <Navbar>
    <!-- Your navbar content -->
  </Navbar>

  <Layout>
    <Sidebar>
      <!-- Your sidebar content -->
    </Sidebar>

    <Main>
      {@render children()}
    </Main>
  </Layout>
</PureAdminProvider>

3. Use components anywhere in your app

<script>
  import { Button, Card, Alert, Input } from '@keenmate/svelte-pure-admin';
</script>

<Card titleText="My Card">
  <Alert variant="info">Welcome to Pure Admin!</Alert>

  <Input placeholder="Enter your name" />

  <Button variant="primary">Submit</Button>
</Card>

PureAdminProvider is a context provider that wraps your application and provides two main features:

interface PureAdminConfig {
  app: {
    name: string;
    copyright: string;
    version?: string;
    logo?: string;
  };
  defaults: {
    pageSize: number;
    connectionTimeout: number;
    requestTimeout: number;
    dateFormat: string;
    timeFormat: string;
    locale: string;
  };
  ui: {
    theme: 'light' | 'dark';
    animations: boolean;
    sidebarCollapsed: boolean;
    compact: boolean;
  };
  features?: { [key: string]: boolean };
}

<script>
  import { PureAdminProvider } from '@keenmate/svelte-pure-admin';

  const config = {
    app: {
      name: 'My Application',
      copyright: '© 2025 My Company'
    },
    defaults: {
      pageSize: 50,
      locale: 'cs-CZ'
    }
  };
</script>

<PureAdminProvider {config}>
  <!-- Your app content -->
</PureAdminProvider>

Pure Admin comes with 5 example themes that serve as starter packs for your own customization. Each theme demonstrates different color schemes and provides a foundation you can build upon.

The library includes 40+ components organized into logical categories:

Explore the sidebar navigation to see detailed examples and documentation for each component.