Kokonut UI
100+ free, open-source UI components for React and Tailwind CSS.
FrameworkWorkflowsWebFree
4.6Visit
Framework
Spectrum UI
Open-source animated React components and blocks for SaaS and AI apps.
Day 43 since launch · Launched 25 August 2026
Made by Shushant LakhyaniKnow about Shushant Lakhyani hereGet all my visual guides hereSee what I can build for youAI+Tech+No-Code+Online Business Mini GuidesJoin the newsletter
Made by Shushant LakhyaniKnow about Shushant Lakhyani hereGet all my visual guides hereSee what I can build for youAI+Tech+No-Code+Online Business Mini GuidesJoin the newsletterBuilt with love by Shushant Lakhyani. Building bestproductivityresources.com
Screenshot or bookmark this page so you find it later, then share it with your network.
What is Spectrum UI?
Spectrum UI is an open-source collection of animation-ready React components and blocks built with Next.js, Tailwind CSS, Motion, TypeScript and shadcn/ui. Copy the pieces you need and give SaaS and AI products polished motion out of the box.
Pros
- Animation-ready components and blocks
- Free and open source
- Fits the Next.js, Tailwind and shadcn/ui stack
Cons
- Tied to the React ecosystem
- Animations need tuning to match your brand
Who should use Spectrum UI
Developers building SaaS or AI products who want motion-rich UI without hand-writing animations.
Who may not need it
Teams on Vue, Svelte or other non-React stacks.
Spectrum UI alternatives
Similar resources to Spectrum UI, picked from the directory.
ObsidianUI
React and Tailwind components, blocks and landing templates with motion built in.
FrameworkWorkflowsWebFreemium
4.5Visit
pdfcn
Beautiful PDF components for React, 100% free with zero config and one-command setup.
FrameworkWorkflowsWeb, Cross-PlatformFree
4.4Visit
Tween UI
GSAP and CSS animated components for React that you copy and own.
FrameworkWorkflowsWebFree
4.3Visit
21st
12,000+ hand-crafted React and Tailwind components, templates and shadcn themes.
WebsiteWorkflowsWebFreemium
4.7Visit
Rare UI
A free, open-source registry of rare animated React components.
WebsiteWorkflowsWebFree
4.6Visit
Free alternatives to Spectrum UI
Free resources that cover similar ground.
shadercn
Beautiful WebGPU/WGSL shader components for React, built on vgpu and TypeGPU and distributed via shadcn.
WebsiteWorkflowsWebFree
4.5Visit
Animate UI
Animated React components you can copy and paste.
No-Code ToolWorkflowsWebFree
4.4Visit
shadcn/ui
Beautifully designed, accessible components you own and customize.
FrameworkWorkflowsWebFree
4.9Visit
Storybook
Frontend workshop for building UI components and pages in isolation.
FrameworkWorkflowsWebFree
4.7Visit
Astryx Design System
An open-source design system that is fully customizable and agent ready.
FrameworkWorkflowsWebFree
4.6Visit
Coded Visuals
Animated visual compositions for React and shadcn/ui marketing and landing pages.
FrameworkWorkflowsWebFree
4.6Visit
Featured on Best Productivity Resources
Made Spectrum UI? Add this free badge to your website or README. It links to this page.
<a href="https://bestproductivityresources.com/resources/spectrum-ui" target="_blank" rel="noopener"><img src="https://bestproductivityresources.com/badges/featured-light.svg" alt="Featured on Best Productivity Resources" width="250" height="54" /></a>