# Hook components

> Streamline state and logic in your React projects with 33 practical hooks, ready to boost productivity in Tailwind CSS and Next.js apps.

38 components available. Showing all of them below.

- [useMousePositionRef](https://21st.dev/@danielpetho/components/use-mouse-position-ref.md) — by Daniel Petho
- [Use Mobile](https://21st.dev/@shadcn/components/use-mobile.md) — by shadcn
- [useMediaQuery](https://21st.dev/@serafimcloud/components/use-media-query.md) — by Serafim
- [useScreenSize](https://21st.dev/@danielpetho/components/use-screen-size.md) — by Daniel Petho
- [useDimensions](https://21st.dev/@danielpetho/components/use-debounced-dimensions.md) — by Daniel Petho
- [Loop Animation Hook](https://21st.dev/@reuno-ui/components/loop-animation-hook.md) — by reuno-ui
- [useItemOverflow](https://21st.dev/@hihahihahoho/components/use-item-overflow.md) — by oc tung
- [useDebounce](https://21st.dev/@serafimcloud/components/use-debounce.md) — by Serafim
- [useMousePosition](https://21st.dev/@danielpetho/components/use-mouse-position.md) — by Daniel Petho
- [useMouseVector](https://21st.dev/@danielpetho/components/use-mouse-vector.md) — by Daniel Petho
- [useElasticLineEvents](https://21st.dev/@danielpetho/components/use-elastic-line-events.md) — by Daniel Petho
- [useClickOutside](https://21st.dev/@serafimcloud/components/use-click-outside.md) — by Serafim
- [useToggle](https://21st.dev/@strlrd-29/components/use-toggle.md) — by Ghribi Ouassim
- [useDebounceCallback](https://21st.dev/@strlrd-29/components/use-debounce-callback.md) — by Ghribi Ouassim
- [useResponsive](https://21st.dev/@shugar/components/use-responsive.md) — by tigran tumasov
- [useImageUpload](https://21st.dev/@originui/components/use-image-upload.md) — by Origin UI
- [Animated Text](https://21st.dev/@builduilabs/components/animated-text.md) — by Build UI
- [usePagination](https://21st.dev/@originui/components/use-pagination.md) — by Origin UI
- [useTags](https://21st.dev/@kokonutd/components/use-tags.md) — by Kokonut Baffier
- [useExpandable](https://21st.dev/@Codehagen/components/use-expandable.md) — by Prism UI
- [useCharacterLimit](https://21st.dev/@originui/components/use-character-limit.md) — by Origin UI
- [useAutoResizeTextarea](https://21st.dev/@kokonutd/components/use-auto-resize-textarea.md) — by Kokonut Baffier
- [useFileInput](https://21st.dev/@kokonutd/components/use-file-input.md) — by Kokonut Baffier
- [useTextareaResize](https://21st.dev/@Alwurts/components/use-textarea-resize.md) — by simple-ai
- [useCopyToClipboard](https://21st.dev/@strlrd-29/components/use-copy-to-clipboard.md) — by Ghribi Ouassim
- [useSliderWithInput](https://21st.dev/@originui/components/use-slider-with-input.md) — by Origin UI
- [Infinite List](https://21st.dev/@joyco/components/infinite-list.md) — by JOYCO
- [Pending](https://21st.dev/@diceui/components/pending.md) — by Dice UI
- [Reshaped Toast](https://21st.dev/@reshaped/components/reshaped-toast.md) — by reshaped
- [Reshaped Toast](https://21st.dev/@reshaped/components/reshaped-toast/colors.md) — by reshaped
- [Reshaped Toast](https://21st.dev/@reshaped/components/reshaped-toast/banner.md) — by reshaped
- [Reshaped Toast](https://21st.dev/@reshaped/components/reshaped-toast/avatar.md) — by reshaped
- [Reshaped Toast](https://21st.dev/@reshaped/components/reshaped-toast/vertical.md) — by reshaped
- [Reshaped Toast](https://21st.dev/@reshaped/components/reshaped-toast/position.md) — by reshaped
- [Pending](https://21st.dev/@diceui/components/pending/pending-link-demo.md) — by Dice UI
- [Pending](https://21st.dev/@diceui/components/pending/pending-form-demo.md) — by Dice UI
- [Pending](https://21st.dev/@diceui/components/pending/pending-wrapper-demo.md) — by Dice UI
- [Pending](https://21st.dev/@diceui/components/pending/pending-switch-demo.md) — by Dice UI

Full component directory: https://21st.dev/llms.txt