Slider
A slider component
Installation
Loading Image
A loading image component
loading 
...
{#snippet loading()}
...
{/snippet}
{#snippet error()}
:(
{/snippet}
Installation
Page Progress
A page loading progress bar.
Installation
Custom Toast
A toast component with customized look.
toaster.pushToast({message: 'Test', type: 'success'});
Installation
DataTable
Fully functional data table: sort, filter, column toggle, row selection, row expansion and pagination
| Keine Daten gefunden | ||||
0 von
63 Zeile(n) ausgewählt
Zeilen pro Seite
Seite 1 von
7
row.toggleExpanded()}
>
{#snippet expandedRow(row)}
{JSON.stringify(row.original, null, 4)}
{/snippet}
{#snippet dataTableActions(row: Row)}
...
Actions
Edit
Delete
Send Confirmation Email
{/snippet} Installation
Navbar
A navbar component
HR Manager
HR-Manager
Verrechnung
Dienstplan
Zeitaufzeichnung
KI-Chatbot
Zaunmontagen
Terminplaner
Bestellverwaltung
{#snippet right()}
Peter Arnold
Peter Arnold
Einstellungen
Abmelden
{/snippet}
{#snippet logo()}
{/snippet}
Termine
Bewerbungen
Stellenausschreibungen
{#snippet right()}
{/snippet}
Alle Bewerbungen
Aufgaben
Evidenz
Archiv
Installation
Zaunkonfigurator Button
A button component from the Zaunkonfigurator project
Base
Secondary
Outline
Ghost
Link
Destructive
Installation
Posthog
Dynamically load posthog into browser environments
// hooks.client.ts
import { posthog } from 'posthog-js';
posthog.init('YOUR_PROJECT_API_KEY', {
api_host: 'https://us.i.posthog.com',
});
// $lib/analytics/index.ts
import { browser } from '$app/environment';
import type { PostHog } from 'posthog-js';
/**
* Execute a callback with the PostHog instance.
* @param callback - The callback to execute.
* @example
* ```ts
* withPosthog((posthog) => {
* posthog.identify('user@example.com');
* });
* ```
*/
export async function withPosthog(callback: (posthog: PostHog) => void): Promise {
if (browser) {
await import('posthog-js')
.then(({ default: posthog }) => {
try {
callback(posthog);
} catch (error) {
console.log('Failed to execute analytics callback:', error);
}
})
.catch((error) => {
console.log('Failed to load PostHog:', error);
});
}
}
export function captureEvent(eventName: string, properties?: Record) {
// Only capture events on the client side
withPosthog((posthog) => {
posthog.capture(eventName, properties);
});
}
Posthog Feedback Button
A feedback button with modal dialog integrated with Posthog
Click the button in the bottom-right corner to open the feedback modal.
