@keenmate/svelte-pure-admin

Svelte 5 component library for Pure Admin CSS framework — 100+ ready-to-use components for building admin dashboards and data-heavy applications.

Ships with AI reference files — 14 plain-text docs in ai/ optimized for LLM-assisted development (Claude, ChatGPT, Copilot). Point your AI assistant at node_modules/@keenmate/svelte-pure-admin/ai/INDEX.txt for instant component knowledge.

What's New in 1.6.1

• No more sidebar flash — Submenu expansion state loads synchronously from localStorage, eliminating the collapsed-then-expanded flash on page load
• Page loader waits for hydration — Spinner overlay stays visible until both fonts and Svelte components are ready (documented pattern for consumer apps)

What's New in 1.6.0

• Command palette home screen & hotkeys — Opens with categorized commands and search contexts. hotkey prop on commands enables Alt+key shortcuts (e.g., Alt+D for /deploy). Global search returns matching commands and contexts alongside data. code on step options for quick /go 24 navigation. Inline/tokens display style prop.
• Toast actions, maxWidth, progressColor — actions snippet for action buttons in toasts. maxWidth prop per toast. progressColor for custom progress bar colors. Container width ratchet prevents shimmer.
• Split button rework — icon snippet on main button. __menu-inner wrapper (core v2.3.2). Menu items with icon and action snippets for inline action buttons. Chevron points up for top-end placement.
• Command palette badges — Item badges now use standard pa-badge pa-badge--{variant} with badgeVariant on search results.

Installation

npm install @keenmate/svelte-pure-admin @keenmate/pure-admin-core

Quick Start

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

<PureAdminProvider>
  <Button variant="primary">Click me!</Button>

  <Alert variant="success">
    <strong>Success!</strong> Operation completed.
  </Alert>

  <Card titleText="Card Title">
    Card content goes here.

    {#snippet footer()}
      <Button variant="primary">Action</Button>
    {/snippet}
  </Card>
</PureAdminProvider>

Components

Configuration

Component	Description
PureAdminProvider	Context provider for app-wide configuration
usePureAdminConfig	Hook to access configuration
defaultConfig	Default configuration object
mergeConfig	Utility to merge configurations

Layout

Component	Description
Layout	Main layout container
LayoutInner	Inner layout wrapper
LayoutContent	Content area wrapper
Navbar	Top navigation bar with burger menu, brand, and nav items
NavItem	Navigation item (link or dropdown trigger)
NavDropdown	Dropdown menu for navbar
Sidebar	Collapsible sidebar navigation with localStorage persistence
SidebarItem	Sidebar menu item with icon, label, and submenu support
Main	Main content area
Footer	Page footer with start/end sections
Grid	Row-based grid container with gap and alignment options
Column	Grid column with responsive breakpoints (xs through xxl)
Section	Content section with optional title
Divider	Horizontal divider
SlidePanel	Fixed overlay panel that slides in from the right
SettingsPanel	Settings sidebar for theme, layout, and font controls

Forms

Component	Description
Form	Form wrapper (auto-adds pa-form class)
FormGroup	Form group wrapper with validation states
FormField	Combined label + input + help wrapper
FormLabel	Form label with required indicator
FormHelp	Help text with optional themeColor (1-9)
FormErrorSummary	Validation error summary block
Input	Text input with sizes, validation states, and themeColor
NumberInput	Numeric input with min/max/step
DateInput	Date picker input
FileInput	File upload input
RangeInput	Range slider input
ColorInput	Color picker input
Textarea	Multiline text input
Select	Dropdown select
Checkbox	Checkbox input with label
CheckboxBox	Standalone box-style checkbox (no label wrapper)
CheckboxGroup	Group of checkboxes
Radio	Radio button with label
RadioGroup	Group of radio buttons
InputGroup	Input with prepend/append addons
InputGroupPrepend	Prepend section for input group
InputGroupAppend	Append section for input group
SmallText	Small helper text

Buttons

Component	Description
Button	Button with variants, sizes, outline, block, icon, loading, ripple
ButtonGroup	Horizontal/vertical button group

Feedback

Component	Description
Alert	Alert messages with dismissible, outline, compact, themeColor
Callout	Informational callout boxes with heading
Modal	Modal dialog with sizes, themes, and beforeClose callback
Toast	Toast notifications with auto-dismiss and progress bar
ToastContainer	Container for positioning toasts (logical positions: top-end, etc.)
Spinner	Loading spinner with sizes and colors
Loader	Loading indicator (dots, bars, pulse, ring, wave)
LoaderCenter	Utility wrapper that centers loader content
LoaderOverlay	Semi-transparent overlay with centered loader
Tooltip	CSS hover tooltips
Popover	Click-triggered popovers with title and content
PopoverContainer	Global popover container
Popconfirm	Confirmation popover with confirm/cancel actions
NotificationsPanel	Notifications dropdown panel
DialogContainer	Container for programmatic dialogs
ShortcutHelpDialog	Keyboard shortcuts help dialog

Display — Data Presentation

Component	Description
Field	Single label-value pair with copy-to-clipboard (btn/click/hover)
Fields	Container with layout modifiers (cols, horizontal, bordered, linear, chips)
FieldGroup	Titled section for grouping fields
DescTable	Ant Design-style descriptions table with tinted label cells
DescTableItem	Single label-value pair in DescTable
DotLeaders	Dotted leader lines container (invoice/menu style)
DotLeadersItem	Row with label, dots, and value
PropCard	Bordered property card with row dividers (Stripe-style)
PropCardRow	Single row in PropCard
Banded	Banded rows with fixed-width tinted label column
BandedRow	Single banded row with label + value
AccentGrid	Responsive grid with color-coded left borders
AccentGridItem	Grid cell with variant-colored border

Display — Cards, Badges, Tables, Lists

Component	Description
Card	Card with header, body, footer, ghost mode, live state, tabs, subtitle snippet
FilterCard	Expandable filter card with inline + advanced sections
CardTab	Tab within a card header
CardTabContent	Content panel for card tab
TableCard	Card container optimized for tables
Badge	Status badges with variants, sizes, pill, themeColor
Label	Inline label with variants
CompositeBadge	Badge with icon, label, and action button
BadgeGroup	Group of simple badges
CompositeBadgeGroup	Group of composite badges
Table	Data table with striped, hover, compact, borderless, responsive
TableContainer	Table container with optional panel styling
TableResponsive	Responsive table wrapper (horizontal scroll)
Pager	Pagination controls
LoadMore	Load more button with count display
Stat	Statistics display with label, value, change indicator
MetricList	Vertical list of key metrics
MetricListItem	Single metric with label and value
StatusList	Status indicator list
StatusListItem	Status item with label and value
ActivityFeed	Activity feed container
ActivityFeedItem	Single activity entry with avatar and time
QuickActions	Quick action buttons grid
List	Unordered list
OrderedList	Ordered list
ListItem	List item with title, subtitle, meta
BasicList	Simple list with spacing, bordered, striped options
CheckboxList	List with checkboxes
CheckboxListItem	Checkbox list item with label and description
DefinitionList	Definition list (dt/dd)
DetailView	Detail panel wrapper with overlay/inline split-view modes
DetailPanel	Detail panel content shell (header, tabs, body, footer)
Timeline	Timeline container with start/end positioning
TimelineItem	Timeline entry with avatar, time, content
Code	Inline code
CodeBlock	Code block with optional compact mode
CodeBlockWithHeader	Code block with title bar and copy button

Display — Data Visualization

Component	Description
Progress	Progress bar with sizes, colors, striped, animated
ProgressGroup	Label row + progress bar wrapper
ProgressRing	Circular progress ring via conic-gradient
Gauge	Semicircle gauge with optional multi-zone coloring
DataBar	Inline bar for table cells with negative support
StackedBar	Multi-segment stacked bar
StackedBarSegment	Individual segment in a stacked bar
StackedBarLegend	Legend container for stacked bar
StackedBarLegendItem	Legend item with color swatch
Sparkline	Mini bar chart container
SparklineBar	Individual sparkline bar
Heatmap	Grid heatmap with variant and compact modes
HeatmapCell	Heatmap cell with level (0-4)
HeatmapLegend	Self-contained heatmap legend
BarList	Labeled horizontal bar chart
BarListItem	Bar list item with label, value, and fill

Navigation

Component	Description
Tabs	Tab container with alignment options
TabItem	Individual tab
TabsContent	Tab content wrapper
TabPanel	Tab content panel
TabsContainer	Alternative tab container with bordered/card modes
TabsVerticalLayout	Vertical tabs layout
TabsScrollable	Scrollable tabs with overflow arrows
TabsOverflow	Tabs with dropdown overflow
CommandPalette	Command palette (Ctrl+K) with multi-step commands
NavbarSearch	Search input for navbar

Profile

Component	Description
ProfilePanel	User profile dropdown with avatar, nav, favorites
ProfilePanelNavItem	Profile panel navigation item
ProfilePanelFavorites	Favorites section in profile panel
ProfilePanelFavoriteItem	Single favorite item

Typography

Component	Description
Heading	h1-h6 headings with alignment
Paragraph	Paragraph text with alignment
Strong	Bold text
Em	Italic text
Text	Inline text with variants
Link	Styled link

Services

Export	Description
dialogService	Programmatic confirm/alert/prompt/custom dialogs
dialogStore	Dialog state store
shortcutRegistry	Global keyboard shortcut registry
formatShortcut	Format shortcut for display

Internationalization (i18n)

Export	Description
i18n	Primary i18n service (init, register locales)
_	Translation store ($_('pureAdmin.dialog.confirm'))
locale	Current locale store
locales	Available locales store
en, cs	Built-in English and Czech translations

Built on svelte-i18n. All internal component strings (close buttons, aria labels, etc.) are translatable.

Batch RPC

Export	Description
createBatch	Create a batch of RPC calls
createSignalRTransport	SignalR transport for batch RPC
createPhoenixTransport	Phoenix channel transport
createHttpTransport	HTTP POST transport

Svelte 5 Features

This library uses Svelte 5 runes and snippets exclusively:

<script>
  // Runes for reactivity
  let count = $state(0);
  const doubled = $derived(count * 2);
</script>

<!-- Snippets replace slots -->
<Card titleText="My Card">
  {#snippet header()}
    <h3>Custom Header</h3>
  {/snippet}

  Content here

  {#snippet footer()}
    <Button variant="primary">Save</Button>
  {/snippet}
</Card>

CSS Import

Import Pure Admin CSS in your root layout:

<script>
  import '@keenmate/pure-admin-core/css';
</script>

Or use a theme package:

<script>
  import '@keenmate/pure-admin-theme-audi';     // Audi theme
  import '@keenmate/pure-admin-theme-dark';      // Dark theme
  import '@keenmate/pure-admin-theme-corporate'; // Corporate theme
  import '@keenmate/pure-admin-theme-express';   // Express theme
  import '@keenmate/pure-admin-theme-minimal';   // Minimal theme
</script>

Page Loader (Prevent FOUC)

SvelteKit apps can show a flash of unstyled/unhydrated content before Svelte components mount (~1s on typical loads). Add a page loader to src/app.html that waits for both fonts and Svelte hydration:

1. Add loader HTML + script to app.html <body> (before %sveltekit.body%):

<div class="page-loader" id="pageLoader">
  <div class="page-loader__spinner"></div>
</div>
<script>
  (function() {
    var loader = document.getElementById('pageLoader');
    var fontsReady = false, appReady = false;
    function hide() {
      if (!fontsReady || !appReady) return;
      requestAnimationFrame(function() {
        loader.classList.add('loaded');
        setTimeout(function() { loader.remove(); }, 80);
      });
    }
    if (document.fonts && document.fonts.ready) {
      Promise.race([
        document.fonts.ready,
        new Promise(function(r) { setTimeout(r, 1000); })
      ]).then(function() { fontsReady = true; hide(); });
    } else {
      window.addEventListener('load', function() { fontsReady = true; hide(); });
    }
    window.__pageLoaderReady = function() { appReady = true; hide(); };
    setTimeout(function() { fontsReady = appReady = true; hide(); }, 3000);
  })();
</script>

2. Add critical CSS to <head> (inline):

<style>
  .page-loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--page-loader-bg, rgba(26, 26, 26, 0.95));
    backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
    transition: opacity 0.15s ease, visibility 0.15s ease;
  }
  .page-loader.loaded { opacity: 0; visibility: hidden; }
  .page-loader__spinner {
    width: 50px; height: 50px;
    border: 4px solid var(--page-loader-spinner-border, #333);
    border-top-color: var(--page-loader-spinner-accent, #0066cc);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>

3. Signal from your root layout (+layout.svelte):

<script>
  import { onMount } from 'svelte';
  onMount(() => {
    if (typeof window.__pageLoaderReady === 'function') {
      window.__pageLoaderReady();
    }
  });
</script>

Themeable via CSS variables: --page-loader-bg, --page-loader-spinner-border, --page-loader-spinner-accent. 3s safety timeout ensures it never blocks indefinitely.

Documentation Site

The docs/ folder contains a full documentation site showcasing all components with interactive examples.

cd docs
npm install
npm run dev       # Start docs site (http://localhost:5173)

The docs site includes:

• Interactive component examples matching pure-admin demo
• Form validation patterns (inline errors, summary blocks, timing strategies)
• Dashboard layouts with stats, charts, and activity feeds
• Data visualization components (progress, gauges, heatmaps, sparklines)
• Theme color variants and customization options
• i18n integration examples

AI Reference

The ai/ folder contains plain-text reference files optimized for AI assistants. Use these files to quickly understand component APIs, common patterns, and project setup:

ai/INDEX.txt              # File overview and keyword index
ai/getting-started.txt    # Installation, CSS import, first component
ai/layout.txt             # Layout, Grid, Column, Sidebar
ai/forms.txt              # Form components, validation, input types
ai/display.txt            # Cards, tables, badges, lists, timeline
ai/data-display.txt       # Field/Fields, DescTable, PropCard, etc.
ai/data-visualization.txt # Progress, Gauge, Heatmap, Sparkline, etc.
ai/feedback.txt           # Alerts, modals, toasts, loaders, dialogs
ai/navigation.txt         # Tabs, CommandPalette, NavbarSearch
ai/theming.txt            # CSS import, theme packages, color slots
ai/i18n.txt               # Internationalization setup and usage
ai/typescript-types.txt   # Exported types and prop interfaces
ai/naming-conventions.txt # KeenMate naming methodology (is*, on*, *Text)
ai/common-patterns.txt    # Snippets, $derived classes, event handlers

Development

npm install       # Install dependencies
npm run dev       # Start dev server (http://localhost:5173)
npm run build     # Build library
npm run package   # Package for npm
npm run check     # Type check

Browser Support

• Modern browsers with ES2020+ support
• No IE11 support (Svelte 5 requirement)

License

MIT

Links

• GitHub Repository
• @keenmate/pure-admin-core - Core CSS framework
• Svelte 5 Documentation