Feedback

Loading placeholders and toast notifications — the two ways this design system tells you something is happening.

Primitives

The base primitive plus three shape presets — every skeleton is built from these, radius and variant (pulse/shimmer) included.

Skeleton

SkeletonCircle

SkeletonButton

SkeletonText

Code

<Skeleton w="100%" h="1rem" />
<SkeletonCircle size="md" />
<SkeletonButton />
<SkeletonText lines={3} lastLineWidth="70%" />

Composites

Composites for the two most common loading shapes — a card header and a table/list row.

Code

<SkeletonCard avatar lines={2} />
<SkeletonRow avatar cols={3} />

Toast

svelte-sonner, styled to match the design tokens (see the .toast* rules in zeyo-ui/template.css). <Toaster> is mounted once in the root layout.

Code

import { toast } from 'svelte-sonner';

toast.success('Campaign sent.');
toast.error('Could not save changes.');
toast.warning('This will affect 4 lists.');
toast('Just an update.');