Deckweiss Component Registry

A custom registry for distributing code using shadcn-svelte.


Use these first:

Slider

A slider component

Installation

pnpm dlx shadcn-svelte@next add https://components.deckweiss.at/r/slider.json

Loading Image

A loading image component

loading
...

Installation

pnpm dlx shadcn-svelte@next add https://components.deckweiss.at/r/loading-image.json

Page Progress

A page loading progress bar.

Installation

pnpm dlx shadcn-svelte@next add https://components.deckweiss.at/r/page-progress.json

Custom Toast

A toast component with customized look.

Installation

pnpm dlx shadcn-svelte@next add https://components.deckweiss.at/r/toaster.json

DataTable

Fully functional data table: sort, filter, column toggle, row selection, row expansion and pagination

E-Mail
Keine Daten gefunden
0 von 63 Zeile(n) ausgewählt

Zeilen pro Seite

Seite 1 von 7

Installation

pnpm dlx shadcn-svelte@next add https://components.deckweiss.at/r/data-table.json

A navbar component

Installation

pnpm dlx shadcn-svelte@next add https://components.deckweiss.at/r/navbar.json

Zaunkonfigurator Button

A button component from the Zaunkonfigurator project

Installation

pnpm dlx shadcn-svelte@next add https://components.deckweiss.at/r/zaunkonfigurator-button.json

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.

Installation

pnpm dlx shadcn-svelte@next add https://components.deckweiss.at/r/posthogfeedback-button.json