Join our Discord Community
react aria icon

Open source and free shadcn templates using React Aria

5 templates • 5 contributors • Open source & free

5
Templates
5
Authors

Available Templates (5)

Origin UI template preview
Origin UI
Origin UI is an open-source React component library offering an extensive collection of hundreds of copy-and-paste components designed for rapidly building modern application interfaces. Powered by Tailwind CSS v4 and built for seamless integration with Next.js and React projects, Origin UI follows the same shadcn conventions and copy-paste philosophy that developers love, giving you full ownership and control over your components. The library provides beautifully designed, production-ready UI elements spanning forms, navigation, data display, feedback components, and complex interactive widgets, all styled with Tailwind's utility-first approach for easy customization. Each component is built with accessibility in mind, leveraging Radix UI primitives and React Aria for keyboard navigation and screen reader support. Perfect for developers who want a comprehensive component library without the overhead of npm dependencies, Origin UI enables you to quickly scaffold application UIs by simply copying the components you need directly into your codebase, customizing them to match your brand, and shipping faster without sacrificing quality or flexibility.
Intent UI template preview
Intent UI
Intent UI is an accessible React component library built on React Aria Components and Tailwind CSS, emphasizing web accessibility while providing easily customizable components through a copy-paste workflow. Written primarily in TypeScript (78.2%), the MIT-licensed library offers components designed with accessibility as a core principle, leveraging React Aria's robust primitives for keyboard navigation, screen reader support, and ARIA compliance. The chill, developer-friendly approach allows you to copy components directly into React projects and customize them to match specific design requirements without dealing with npm dependencies or version conflicts. With comprehensive documentation at intentui.com and design templates to accelerate interface creation, Intent UI bridges the gap between accessible component libraries and the flexibility of owned code. Perfect for developers who prioritize accessibility standards like WCAG while maintaining full control over component styling and behavior, Intent UI demonstrates how to build inclusive web applications with React Aria's powerful primitives and Tailwind's utility-first approach.
Jolly UI template preview
Jolly UI
Jolly UI is an open-source React component library that provides accessible, customizable components built with React Aria and compatible with shadcn/ui, allowing developers to copy and paste production-ready accessible components into their applications. Written primarily in TypeScript (86.9%), the library combines React Aria's robust accessibility primitives with Tailwind CSS styling and shadcn/ui's design language to deliver components that are both beautiful and fully accessible. Maintained by James Shopland with community contributions, Jolly UI offers comprehensive documentation at jollyui.dev covering component APIs, usage examples, and integration guides. The library focuses on providing high-quality, accessible alternatives to standard UI components, ensuring keyboard navigation, screen reader support, and ARIA compliance work correctly out of the box. Built with Next.js and leveraging React Aria's proven accessibility foundations, Jolly UI components handle complex interactions like focus management, keyboard shortcuts, and touch interactions while maintaining visual consistency with shadcn/ui projects. Perfect for developers who need shadcn/ui-compatible components with React Aria's superior accessibility features, Jolly UI demonstrates how to build inclusive user interfaces that meet WCAG standards without sacrificing design quality or developer experience.
Shadcn UI FullCalendar Example template preview
Shadcn UI FullCalendar Example
The shadcn/ui FullCalendar Example is a practical demonstration of integrating FullCalendar, one of the most popular JavaScript calendar libraries, with Next.js and shadcn/ui components to create modern scheduling and event management interfaces. Built with Next.js 14, React, TypeScript, Tailwind CSS, and React Aria for accessibility, this example project shows developers how to combine FullCalendar's powerful features with shadcn/ui's beautiful component design system. The implementation includes a fully interactive calendar with month, week, and day views, event creation and editing with modal dialogs using shadcn/ui Dialog components, drag-and-drop event rescheduling directly on the calendar, event deletion and management capabilities, responsive design that adapts to mobile and desktop screens, accessible UI patterns through React Aria integration, and customizable styling that matches shadcn/ui's design language. The project demonstrates how to properly initialize FullCalendar in a Next.js environment, manage calendar state in React components, style FullCalendar to match shadcn/ui themes, and handle event CRUD operations with TypeScript type safety. This template is ideal for building appointment scheduling systems for healthcare or service businesses, team calendar applications for project management, event management platforms for conferences or meetups, booking systems for resources or meeting rooms, and any application requiring rich calendar functionality with a modern UI. The example serves as a solid foundation for developers who want to quickly add calendar features to their Next.js applications without starting from scratch.
WordPress Plugin Boilerplate template preview
WordPress Plugin Boilerplate
Pby Prappo
The WordPress Plugin Boilerplate is a comprehensive starter template that brings modern web development practices to WordPress plugin development by integrating React, TypeScript, SASS, Tailwind CSS, shadcn/ui components, Vite for blazing-fast builds, Storybook for component development, and Hot Module Replacement for instant feedback during development. This boilerplate eliminates the traditional pain points of WordPress plugin development by providing a Laravel-inspired custom ORM for database operations, flexible API routing for REST endpoints, simplified shortcode generation with custom rendering, seamless data passing between PHP backend and React frontend, and a CLI tool for rapid plugin scaffolding and configuration. The development workflow is streamlined with npm run dev for full development mode with HMR, separate npm run dev:frontend and npm run dev:admin commands for focused development, npm run build to compile production-ready assets, and npm run release to create distributable plugin packages. The boilerplate includes Storybook integration for isolated component development and documentation, TypeScript for type safety across JavaScript code, SASS and Tailwind CSS for flexible styling options, shadcn/ui and Headless UI for accessible component primitives, and proper WordPress hooks and filters integration maintaining compatibility with the WordPress ecosystem. This template is invaluable for developers building commercial WordPress plugins with modern UIs and complex functionality, agencies developing multiple client plugins who need consistent, maintainable architecture, teams transitioning from jQuery-based WordPress development to React, freelancers who want professional development experience in WordPress projects, and anyone frustrated with traditional WordPress plugin development workflows. The project demonstrates how to integrate modern JavaScript frameworks into WordPress without fighting the platform, structure plugin code for maintainability and testability, implement database models and API routes in WordPress context, build component libraries with Storybook for WordPress admin interfaces, and accelerate WordPress plugin development with contemporary tooling.