Utility Components

Theme toggle, loading skeletons, empty states, and other utility components.

ThemeToggle

Sun/moon icon button that toggles between light and dark themes. No props — uses the theme store. Rendered in TopBar.

Click to toggle theme

No props. Uses themeState store internally.

Fixed floating action button that appears after scrolling 400px. Smooth-scrolls to top on click. No props. Rendered in the root layout.

Scroll down this page to see it appear in the bottom-right corner.

Loading placeholder with pulse animation. Four variants for different content types.

variant="heading"

variant="text" lines=3

variant="code"

variant="block"

Prop	Type	Default	Description
variant	'text' \| 'heading' \| 'block' \| 'code'	'text'	Skeleton shape preset
width	string?	varies	Override width (CSS value)
height	string?	varies	Override height (CSS value)
lines	number	1	Number of skeleton lines (last line is 75% width)

Centered empty state placeholder with optional description and action link.

Try adjusting your search terms or filters.