React Resources

Overview

Awesome React/NextJS Links

UI Blocks and Component Collections

• Origin UI
• Blocks.so - nice Dialog, Forms examples.
• kibo-ui - shadcn custom components registry with logs of AI UI components, Status component
• tailark - pre-built shadcn-UI and Tailwindcss blocks designed for marketing websites. support MCP and CLI
• Shadcn UI Blocks - Effortless Shadcn UI Component Previews & Code Snippets, part of Dice UI
• Dice UI - Useful custom shadcn Components
• shadcnstudio lots of copy-past free components and code blocks.
• Shadcn Blocks - The ultimate block set for Shadcn UI & Tailwind
• Shadcn UI Kit - A large collection of admin dashboards, website templates, UI components, and ready-to-use blocks - notifications, command-k, Theme Preset, Dashboard Demo
• MagicUI - UI library for Design Engineers
• reui - UI Library for React, Pairs with shadcn/ui CLI.
  • features: Motion, Data Grid, Autocomplete/Async Search, Date Range Picker, Command, Combobox, Kanban, Resizable, Stepper, Scrollspy, Sortable, Toggle Group.
  • Bonus: Special Effects, Background Effects
  • Works with : React Hook Form, TanStack Table, TanStack Query, Sonner, Cmdk
• PatternCraft - Craft Beautiful Patterns Backgrounds
• Forms
  • React Select - most popular. support Multi select, Creatable selector and Async search with debounce, built-in animations
  • Multiple Selector - shadcn version of React Select. Grouping, Async search with debounce, Creatable selector, Working with react-hook-form,
  • Multi Select Component
  • WDS Multi Select, Tags
  • TagPicker - Used for multiple data selection, support grouping.
  • Multiple Selector
  • Rich Text Editor
    • TipTap
    • Novel - An open-source Notion-style WYSIWYG editor with AI-powered auto completions. build on TipTap
  • Better Upload - File upload components with shadcn/ui styles. Supports drag-and-drop, progress bars, file validation, and previews.

Libraries and Util Components

Auth

• Better Auth UI - About Beautiful shadcn/ui components built for better-auth.
• Better Admin Dashboard - A better-Auth powered admin dashboard.

Animates

• Animate UI - Motion and Shadcn CLI

AI

• prompt-kit - High-quality, accessible, and customizable components for AI interfaces.
• CopilotKit - AI Components for AG-UICopilotKit
• AgenticGenUI - library for building AI-powered, generative user interfaces
  • CopilotKit Integration: Seamless compatibility with CopilotKit
• Assistant-UI - Similar to CopilotKit, works with Mastra
• AI Elements - is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications.
• liveblocks - Ready-made AI copilots and collaboration for your product. Similar to CopilotKit and AG-UI
• AI Tools Registry - Install AI SDK tools into your project with the shadcn CLI.
• Cedar-OS -An open-source framework for building the next generation of AI native software
  • Works with Mastra

Data Tables

• [tablecn(https://github.com/sadmann7/tablecn) - Build with shadcn, TanStack/react-table, Drizzle ORM by @sadmann17
  • Docs , Demo
• Shadcn Table Views - shadcn table component with server side sorting, pagination, filtering, and custom views. This is built on top of @sadmann17's tablecn.
  • Demo
• Data table filter - This library is an add-on to your existing data table for filtering your data, providing key building blocks for building a powerful filtering experience
  • Integrates with TanStack Table and nuqs. Supports both client and server-side filtering
• ShadCN Table Maker - Build Dynamic Tables in Minutes! - examples
• TanStack Table Builder -A modern, extensible table builder UI for React, powered by TanStack Table. Easily create, configure, and export advanced tables for your applications. Good for creating columns form sample JSON data. Source
• REUI Data Grid - Based on TanStack Table with features like sorting, filtering, pagination, and drag & drop support.
• React Data Table with Filters with AI - Open-source faceted filters, sorting, and infinite scroll with tanstack table, shadcn/ui and state management via nuqs (url-based) or zustand (client-side).
  • Data-Table for Metrics - Data Table for visualizing time-series data like logs and metrics. Features: Infinite scroll, time travel,Faceted search and filtering
  • AI Filters - Type a query like "5xx errors in production last 24h" and the AI translates it into structured filters

Forms

• TanStack Form & Table Builder - Form Builder with: shadcn new Field components and TanStack Form, build on formcn, Repo, Table Builder with TanStack Table
• Formcn - Form Builder with: shadcn and React Hook Form and many custom input components.
  • install components with shadcn CLI: bunx --bun shadcn add @formcn/multi-select
  • AI Powered Form Generator Formcn AI
• TanStack Form Shadcn Field Example - Examples only ⭐⭐⭐. Use new shadcn Field component and TanStack Form
• Shadcn TanStack Form Lib - Provide copy & past code: form.tsx and form-hook.tsx
• Shadcn Form Builder - Form Builder with: Shadcn, React Hook Form, and Zod
• shadcn-tanstack-form - Shadcn UI + TanStack Form Integration

Hooks

• usehooks-ts - React hook library, ready to use, written in Typescript.

Tools

• ReactJust - is a Vite plugin that enables the use of React Server Components (server components and server functions) without relying on a full framework.
• TweakCN - Design Your Perfect shadcn/ui Theme
• shadcnstudio - Shadcn Theme Generator. use customizer component

Server

• Websockets with TanStack Start

Starter Kits

• Awesome TanStack Start - A curated list of TanStack Start resources: articles, projects, videos and more.
• Next.js Admin Dashboard Starter Template With Shadcn-ui. Source, Demo
• Conar - Built with PostgreSQL, Drizzle ORM, Better Auth and AI SDK for SQL tool
• React Starter Kit - Starter - Monorepo, Bun, TanStack Router, ShadCN UI, Better Auth, Drizzle ORM, Vite, Vitest, infra with Terraform
• better-auth-starter - A modern, production-ready Next.js boilerplate with comprehensive authentication, admin dashboard, and user management features.
• Better Auth Starter - The Better Auth Starter is simple starter pack using Next.js, Better Auth, Shadcn, Drizzle, and Neon. Features: - databaseHooks, custom permissions
• Smart Medical Records (SMEDREC) -A modern, open-source medical records system for registering patient cases with treatments, forms, and conclusions.
  • Tech Stack: Turborepo, nextJS, Drizzle ORM, Vitest, Better Auth, cerbos,
  • AI: Mastra to BetterAuth org and sessionData sharing via runtimeContext. copilotkit,
  • FHIR, Transparent Field Encryption in PostgreSQL
• Better-T-Stack - TanStack Start, Expo, shadcn/ui, Starlight, Tauri, Turborepo
• copilotkit-mcp-demo - fill copilotkit demo with MCP server-client integrations, State Management
• Portfolio - Drizzle ORM , Better Auth, TanStack (Start + Router + Query + Form), shadcn/ui
• Cedar-Mastra Starter - Next.js , Cedar-OS, Mastra workflow , voice, Zustand State Management
• shadcn-admin - Admin Dashboard UI built with Shadcn and Vite. loading progress bar, Theme Settings

Guides

• Svelte to React Guide
• A set of nextjs FAQs nextjs-faq.com
• React Libraries for 2025
• How to fetch data in React Guild
• React 19 use() Hook — Async Functions in Client Components Made Easy
• How to Add a Theme Selector to Your Next.js App
• How to implement authentication in Next.js
• Why Are Buttons Losing the Pointer Cursor? ft. ShadCn
• Server and Client Component Composition in Practice
• Parallel and recursive route rendering
• Error Handling for React Server Actions
• Data Grid
  • Hybrid Caching(client & server side) - NextJS Cache + Revalidation Guide
  • Hybrid Pagination(client & server side)
  • Hybrid (Client + Server) Pagination: A hybrid approach can be implemented where data is fetched from the server in larger chunks (e.g., 1000 records at a time), and then client-side pagination is applied within those chunks (e.g., 100 records per page). When the user reaches the end of a client-side chunk, another server-side request is made to fetch the next chunk of data. This approach can optimize performance for large datasets by reducing the frequency of API calls while still providing a smooth user experience. Implementation Considerations for Hybrid Pagination:
    • State Management: Maintain separate state for client-side pageIndex and pageSize within the current chunk, and server-side pageIndex to track which chunk is currently loaded.
    • Data Fetching Logic: Trigger server-side data fetching when the client-side pageIndex indicates the end of the current chunk.
    • Data Merging/Appending: When new chunks are fetched from the server, append or merge them with the existing client-side data.
    • Navigation: Ensure that going to previous pages within a fetched chunk does not trigger unnecessary server-side calls.

TODO

• Mastra + CopilotKit example
• Implement bytedash restaurant food delivery service, video
• UnDocs , example h3
• Upstash workflow - For Long-Running AI Workflows
• Add Visual Workflow Builder
• Command Interface for Metadata Input data-table-filter-command