Hooks
useLocalStorage
Persist client state into local or session storage for simple settings and drafts.
Current theme preference: light
import { Button } from '@tile-ui/react';
import { useLocalStorage } from '@tile-ui/react/hooks';
export default function UseLocalStorageDemo() {
const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light');
Use this hook when a local preference or draft should survive page refreshes without introducing a larger state layer.
Registry install
pnpm dlx shadcn@latest add @tile-ui/use-local-storageUsage
const [value, setValue] = useLocalStorage('theme', 'light');What it covers
- Local storage reads and writes
- Safe initialization in browser-only contexts
- A simple setter API that mirrors React state
Common use cases
- Theme preferences
- Persisted filters
- Draft values in admin tools