Accessible React and Tailwind CSS v4 components, blocks, templates, charts and themes for shadcn/ui, with keyboard, screen reader, reduced motion and dark mode support on every item, and an MCP server for AI coding agents.
Read the system light or dark preference as a string, updating live, with a server default, for canvas, charts and embeds that CSS cannot theme.
State that works controlled or uncontrolled: pass value to control it, or defaultValue to let the hook own it, and onChange fires either way.
A countdown from a number of seconds that does not drift, with start, pause, resume and reset, and a callback when it reaches zero.
A number with increment, decrement, set and reset, optional min, max and step, always clamped into range.
Turn a function into one that runs only after calls have stopped for a delay, with cancel, flush and an optional leading call.
Follow a fast-changing value only after it has settled for a delay, with an isPending flag and a flush to apply it now.
Set document.title from a component, and restore the previous title when it unmounts, so each view of a single-page app names itself.
Drag an element with the pointer and keep its x and y offset in state, with axis lock, bounds, tap tolerance, spring-back and arrow-key movement as a keyboard alternative.
Attach a typed event listener to the window, the document or an element, always calling your newest handler and removing it on cleanup.
Put an element, or the page, in full screen with enter, exit and toggle, an isFullscreen flag that follows the Escape key, and a supported flag.
Typo-tolerant search over a list of strings or objects with Fuse.js, returning ranked results with match positions, and a helper to highlight them.
Bind a keyboard shortcut such as mod+k to a handler, with sensible defaults, form-field safety and a formatHotkey helper that shows the right keys for Mac and PC.
Track whether a mouse or pen pointer is over an element, with optional open and close delays so a popover does not flicker, and touch ignored.
Report true after a period with no pointer, keyboard, scroll or touch activity, and false again as soon as the person returns.
Call a loader when a sentinel at the end of a list scrolls near the view, again after each load while it is still visible, and stop when there is no more.
Watch an element with an IntersectionObserver and get its latest entry and an isIntersecting flag, with threshold, root, margin and freeze-once-visible options.
A declarative setInterval: pass a delay to run a callback repeatedly, or null to pause, and the callback always sees the newest props and state.
A single true or false for whether an element is on screen, with an amount to show, a margin and a once option for reveal-on-scroll.
A function that tells you whether the component is still mounted, to skip state updates after an async call finishes late.
useLayoutEffect on the client and useEffect on the server, so layout measurements never log the server-rendering warning.
True while a key (or any of several) is held down, resetting when the window loses focus so a stuck key never lingers.
Run a callback when a sequence of keys is typed in order, such as g then i or the Konami code, with a timeout between keys.
A ref that always holds the newest value, so a timer, listener or async callback can read current props and state without being re-created.
State saved in localStorage that is safe to server-render, syncs across tabs and components, ignores unreadable values and works when storage is blocked.
Detect a press held for a set time with pointer or keyboard, with start, cancel and click handlers, and cancel when the pointer moves away.
Subscribe to any CSS media query and get a boolean that stays in sync, with a server default so hydration does not mismatch.
Combine several refs, callback or object, into one ref callback, so a component can forward a ref and keep its own.
Turn a loading flag into one that waits a short delay before showing and, once shown, stays on for a minimum time, so spinners never flash.
Run a callback when an element's attributes, children or text change, with the observed node given as a ref, an element or a selector.
True while the browser reports a network connection, updating when it goes offline or comes back, safe for server rendering.
Report whether the tab is visible or hidden, so you can pause polling, video and animation when nobody is looking.
Page numbers, page ranges with ellipses and from-to counts for a paginated list or table, controlled or uncontrolled.
Track the pointer inside an element as pixels and as 0 to 1 fractions, with an inside flag, updated once per frame for spotlight, tilt and parallax effects.
True when the person asked their system for less motion, updating live, and assuming reduced motion on the server so no animation flashes.
Return the value from before the latest change, so you can compare it with the current one, for example to animate a change or detect a direction.
Measure an element and keep its width and height up to date as it resizes, with a choice of content box or border box.
One tab stop for a group of items with arrow-key, Home and End movement, wrapping and RTL support, for toolbars, tab lists, radio groups and grids you build yourself.
Report whether the page or an element is scrolling up or down, ignoring small movements, plus whether it is at the top.
Lock page scrolling while a modal, drawer or menu is open, without the layout shifting when the scrollbar disappears, and safe for nested locks.
Track the scroll offset of the window or of one element, batched to one update per frame, with horizontal and vertical values.
Multi-select state for rows or items with toggle, shift-click range selection, select all, and the all, some and none states a header checkbox needs.
State for a Set with add, delete, toggle, has, clear and reset that always returns a new Set, so React sees the change.
A function with a stable identity that always calls the newest version of your handler, so memoised children and effects never re-run for it.
A stopwatch that counts up from the clock, with start, stop, reset and lap times, and does not drift when the tab is throttled.
Detect swipes left, right, up and down on an element with a distance threshold and a time limit, returning props to spread on it.
Scope a set of theme tokens to one element, so many themes can live on the same page, with an optional light, dark or inherited mode.
Run a theme change inside a View Transition with a circular reveal, falling back to an instant change when motion is reduced or unsupported.
Turn a function into one that runs at most once per interval, on the first call and again with the latest arguments when the interval ends.