DOCSEARCHbyAlgolia
Submit Docs

react-shadcn-components

repository·main·Indexed 21 days ago

https://github.com/shadcnio/react-shadcn-components

A collection of production-ready React components built with Tailwind CSS, TypeScript, and Radix UI. The library features AI-specific UI patterns, animated button and text components using Framer Motion, and a comprehensive suite of TypeScript-ready React hooks for state management, browser APIs, DOM interactions, and performance optimization.

Tokens
4.5K
Snippets
2
Records
5
Agent score
24%

What's inside react-shadcn-components

  1. Overview of Modern React Components

    main

    This project provides production-ready React components built on shadcn/ui principles. The components are designed to be:

    • TypeScript-first: Full type safety for all props and interfaces.
    • Tailwind-styled: Uses Tailwind CSS for styling, allowing for easy customization.
    • Radix-powered: Leverages Radix UI primitives for accessible and robust component behavior.

    The toolkit is divided into specialized categories including AI-specific components, advanced button components, and hook components to help developers build high-quality interfaces quickly while maintaining complete ownership of the code.

  2. Available React Text Components

    main

    The library includes several specialized text components built with Framer Motion, TypeScript, and shadcn/ui, primarily focused on high-quality animations for Next.js applications.

    Animation Styles

    • Counting & Numeric: Counting Number (spring animations with in-view detection) and Sliding Number (digit-by-digit mechanical counter effects).
    • Text Reveals: Splitting Text (staggered character/word/line reveals), Typing Text (realistic typewriter effect), Writing Text (word-by-word reveals), and Rolling Text (3D character-by-character reveals).
    • Visual Effects: Gradient Text (flowing colors and neon effects), Highlight Text (expanding background highlights), Rotating Text (vertical phrase transitions), and Shimmering Text (wave animations).

  3. Reference: React Button Components

    main

    A collection of highly interactive and animated button components. Many of these utilize Framer Motion for smooth transitions and advanced visual effects like 3D perspective, particle bursts, and liquid animations.

    | Name | Description |
| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **[Animated Modal](https://www.shadcn.io/button/animated-modal)** | React animated modal button with 3D perspective and backdrop blur. Framer Motion creates smooth modal transitions with TypeScript and shadcn/ui styling. |
| **[Copy](https://www.shadcn.io/button/copy)** | React copy button with one-click clipboard copying and visual feedback. Smooth animations and state management with TypeScript and shadcn/ui styling. |
| **[Corner Accent](https://www.shadcn.io/button/corner-accent-button)** | React button with animated corner accents and sliding background effect. Features expanding corners and smooth transitions with TypeScript and shadcn/ui. |
| **[Counter](https://www.shadcn.io/button/counter)** | React counter button with animated number display and increment/decrement controls. Framer Motion creates sliding number transitions with TypeScript and shadcn/ui. |
| **[Flip](https://www.shadcn.io/button/flip)** | React flip button with 3D animations that reveal hidden messages on hover. Smooth transitions and customizable directions with TypeScript and shadcn/ui. |
| **[GitHub Stars](https://www.shadcn.io/button/github-stars)** | React GitHub stars button with live API counts and particle effects. Social proof component with animated transitions, TypeScript, and shadcn/ui styling. |
| **[Icon](https://www.shadcn.io/button/icon)** | React icon button with particle burst and glow effects on activation. Lucide icons with smooth animations, TypeScript support, and shadcn/ui styling. |
| **[Input](https://www.shadcn.io/button/input)** | React input button that transforms into input field with smooth transitions. Framer Motion animations and compound patterns with TypeScript and shadcn/ui. |
| **[Liquid](https://www.shadcn.io/button/liquid)** | React liquid button with fluid fill animations and gradient effects. Multiple color variants and smooth hover transitions with TypeScript and shadcn/ui styling. |
| **[Magnetic](https://www.shadcn.io/button/magnetic-button)** | React magnetic button with animated particles that attract to center on hover. Features Framer Motion spring physics and customizable particle effects with TypeScript. |
| **[Rating](https://www.shadcn.io/button/rating)** | React rating button with interactive star ratings and hover effects. Lucide icons with keyboard navigation and form integration using TypeScript and shadcn/ui. |
| **[Ripple](https://www.shadcn.io/button/ripple)** | React ripple button with Material Design click animations. Position-aware ripple effects and multiple color variants with TypeScript and shadcn/ui styling. |
| **[Text Reveal](https://www.shadcn.io/button/text-reveal)** | React button with animated text reveal effect on hover. Smooth border animation unveils text with glowing shadows and stroke effects using TypeScript and shadcn/ui. |
| **[Theme Switcher](https://www.shadcn.io/button/theme-switcher)** | React theme switcher with light, dark, and system modes. Three-way toggle with system preference detection and smooth icon transitions using TypeScript and shadcn/ui. |
| **[Theme Toggle](https://www.shadcn.io/button/theme-toggle)** | React dark mode toggle with animated sun/moon icons and View Transitions API. Smooth theme switching with multiple animation effects, TypeScript, and shadcn/ui. |

  4. Reference: React AI Components

    main

    A collection of specialized components designed for building AI-driven conversational interfaces and chat UIs. These components handle common AI patterns like streaming, tool use, and reasoning transparency.

    | Name | Description |
| ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **[Actions](https://www.shadcn.io/ai/actions)** | Interactive AI action buttons for React chat interfaces. Build engaging conversational UIs with TypeScript, tooltips, and shadcn/ui styling. |
| **[Branch](https://www.shadcn.io/ai/branch)** | Branch between AI response variations like ChatGPT. React component for exploring multiple answers with TypeScript and shadcn/ui styling. |
| **[Code Block](https://www.shadcn.io/ai/code-block)** | Syntax-highlighted code blocks with copy buttons for AI responses. React component with TypeScript, theme-aware colors, and shadcn/ui design. |
| **[Conversation](https://www.shadcn.io/ai/conversation)** | Auto-scrolling chat container that stays at bottom during streaming. React component with TypeScript and shadcn/ui for smooth AI conversations. |
| **[Image](https://www.shadcn.io/ai/image)** | Display AI-generated images with loading states and error handling. React component for DALL-E and Midjourney with TypeScript and shadcn/ui. |
| **[Inline Citation](https://www.shadcn.io/ai/inline-citation)** | Inline citations with hover previews like Perplexity AI. React component for credible AI responses with TypeScript and shadcn/ui styling. |
| **[Loader](https://www.shadcn.io/ai/loader)** | Animated loader for AI streaming responses. Smooth spinning indicator with React, TypeScript, and shadcn/ui that shows users AI is thinking. |
| **[Message](https://www.shadcn.io/ai/message)** | Chat messages with avatars that distinguish user from AI. React component for clean conversation displays with TypeScript and shadcn/ui. |
| **[Prompt Input](https://www.shadcn.io/ai/prompt-input)** | ChatGPT-style input with auto-resize and model selector. React component with TypeScript, keyboard shortcuts, and shadcn/ui for AI chat. |
| **[Reasoning](https://www.shadcn.io/ai/reasoning)** | Show AI thinking process like Claude's "thinking" blocks. Collapsible React component with TypeScript and shadcn/ui for transparent AI. |
| **[Response](https://www.shadcn.io/ai/response)** | Markdown renderer optimized for streaming AI responses. Handles incomplete code blocks and formatting with React, TypeScript, and shadcn/ui. |
| **[Sources](https://www.shadcn.io/ai/sources)** | Expandable source citations like Perplexity's "Used 5 sources". React component for transparent AI with TypeScript and shadcn/ui styling. |
| **[Suggestion](https://www.shadcn.io/ai/suggestion)** | Suggestion chips like ChatGPT's follow-up prompts. Scrollable React pills for guiding conversations with TypeScript and shadcn/ui. |
| **[Task](https://www.shadcn.io/ai/task)** | Task lists showing AI's work progress like Claude Artifacts. React component with file references, TypeScript, and shadcn/ui styling. |
| **[Tool](https://www.shadcn.io/ai/tool)** | Display AI function calls like OpenAI's tool use. Collapsible React component showing parameters and results with TypeScript and shadcn/ui. |
| **[Web Preview](https://www.shadcn.io/ai/web-preview)** | Preview AI-generated websites like v0.dev's live viewer. React iframe component with navigation controls, TypeScript, and shadcn/ui design. |

  5. Available React Hooks

    main

    The library provides a comprehensive suite of TypeScript-ready React hooks designed for Next.js and React applications. These hooks cover state management, browser APIs, DOM interactions, and performance optimizations.

    State & Logic Hooks

    • useBoolean: Manage boolean state with true/false/toggle helpers.
    • useCounter: Numeric state management with increment, decrement, and reset.
    • useCountdown: Flexible countdown timers with start/stop/reset.
    • useMap: Type-safe Map state management with immutable updates.
    • useStep: Manage multi-step processes with progress tracking.
    • useToggle: Boolean toggle management using a useState-like array pattern.

    Browser & Environment Hooks

    • useDarkMode / useTernaryDarkMode: Manage dark mode with OS preference sync and localStorage persistence.
    • useIsClient: Detect client-side rendering to prevent hydration mismatches.
    • useIsMounted: Detect component mount state to avoid setState warnings.
    • useIsomorphicLayoutEffect: SSR-safe layout effects to prevent hydration warnings.
    • useLocalStorage / useReadLocalStorage / useSessionStorage: Persistent state management with automatic serialization and cross-tab synchronization.
    • useMediaQuery: Track responsive breakpoints and user preferences.
    • useWindowSize / useScreen: Track window dimensions, orientation, and display capabilities.
    • useDocumentTitle: Dynamically update browser tab titles.

    DOM & Event Hooks

    • useClickAnywhere: Global click detection.
    • useOnClickOutside: Detect clicks outside specific elements (useful for modals/dropdowns).
    • useEventListener: Manage DOM event listeners with automatic cleanup.
    • useHover: Track mouse hover states.
    • useIntersectionObserver: Detect element visibility in the viewport.
    • useMousePosition: Track real-time cursor coordinates.
    • useResizeObserver: Monitor DOM element size changes.
    • useScrollLock: Prevent scrolling on the document or specific elements.

    Performance & Async Hooks

    • useDebounceCallback: Debounce function calls (e.g., for API requests).
    • useDebounceValue: Debounce state values (e.g., for search inputs).
    • useEventCallback: Provide stable event callbacks to solve useCallback dependency issues.
    • useInterval / useTimeout: Manage setInterval and setTimeout with automatic cleanup and control.
    • useScript: Dynamically load third-party scripts with status tracking.
    • useUnmount: Handle cleanup logic specifically for component unmounting.