What it does
This gallery documents the hooks exported from packages/components/src/lib. Each route demonstrates one hook with minimal UI so you can verify behavior before wiring it into production screens.
How previews work
Demos run entirely in the browser inside client components. Source hooks are imported from published-style paths so copy-pasted imports match what your app should use after install.
Common use cases
- Persist UI state with useLocalStorage or useSessionStorage.
- Drive tables and lists with usePagination or buildPaginationItems.
- Respond to viewport and motion preferences with useMediaQuery and usePrefersReducedMotion.
- Manage overlays with useBodyScrollLock, useClickOutside, and useFocusManagement.
- Observe layout and visibility with useResizeObserver, useInView, and useIntersectionObserver.
Accessibility
Previews favor clear focus rings and native controls, but your integration must still meet WCAG expectations for real user journeys.
Test with keyboard-only navigation whenever hooks change focus or trap it.
Next.js integration notes
Set NEXT_PUBLIC_SITE_URL for accurate canonical and Open Graph URLs. Keep heavy interactive demos out of the critical path for LCP on marketing pages.
FAQ
Are these hooks safe to use in Next.js App Router?
Yes when imported from client components or client modules. Do not call them from server components because they rely on browser APIs or client-only React lifecycle.
How do imports map to npm?
Use subpaths such as @zentauri-ui/zentauri-components/lib/useToggle. The preview app resolves the same exports via the workspace package.
Do hooks replace accessible markup?
No. Hooks implement behavior; you still supply semantic HTML, labels, and keyboard support appropriate to your product.