Block
Full-page block compositions and templates.
Block
Full-page block compositions that combine multiple components into ready-to-use sections.
Examples
AI card
Generation preview
Recent Chats
Arghya C.
Free TierReact Scroll Progress
Powered by Synapse 2.5
import { useState, useEffect } from "react";
export function useScrollProgress() {
const [progress, setProgress] = useState(0);
useEffect(() => {
const handleScroll = () => {
const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrolled = (window.scrollY / totalHeight) * 100;
setProgress(scrolled);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return progress;
}Craft with precision
build with ease.
A curated collection of 100+ premium UI components crafted with Tailwind CSS and shadcn/ui for modern React and Next.js applications.
Eugene K
Senior Developer
Copy & Paste Ready
Every component is ready to be copied directly into your project.
Fully Customizable
Tailwind-based styling that's easy to modify and extend.
Interactive Elements
Smooth animations and transitions built-in.
export function Button() {
return (
<button className="...">
Click me
</button>
);
}Build beautiful interfaces
A curated collection of beautiful, copy-paste-ready UI components that speed up your React and Next.js development.
Accessible. Fully Styled. Open Source.
components / AI-Input-04
ShowcaseShowcaseShowcase
50+ Components
Ready to Use
Built in minutes
not hours
Fully Customizable
Beautiful interfaces
Beautiful interfaces built in minutes
Analyze your data in real-time
Synapse provides a unified dashboard to monitor performance, optimize conversion funnels, and trigger smart automations automatically.
Trusted by tech teams at
Available Blocks
AI Card Generation
A multi-step AI card generation flow located at src/components/synapse-ui-components/blocks/ai-card-generation/ (installs to components/synapse-ui/blocks/ai-card-generation/).
Includes:
ai-card-generation.tsx— main block wrapperheader-generation.tsx— block headerform-generation.tsx— input form steppreview-generation.tsx— preview steperror-generation.tsx— error state
AI Chat Mockup
An interactive AI chat workspace showcasing clean conversational feeds, code block rendering, collapsible history sidebar, and quick actions. Located at src/components/synapse-ui-components/blocks/ai-chat/ (installs to components/synapse-ui/blocks/ai-chat/).
Includes:
ai-chat.tsx— main chat workspace and history sidebar
SaaS Product Landing Hero
A modern SaaS dashboard hero layout showing real-time query charts, daily visitors statistics, conversion metrics, and simulated webhook notifications. Located at src/components/synapse-ui-components/blocks/saas-landing/ (installs to components/synapse-ui/blocks/saas-landing/).
Includes:
saas-landing.tsx— main SaaS landing container and layout
Landing Navigation Header
A responsive navigation header with top promo bar, brand logo, light/dark mode toggler, and mobile-friendly drawer menu. Located at src/components/synapse-ui-components/blocks/landing-header/ (installs to components/synapse-ui/blocks/landing-header/).
Includes:
landing-header.tsx— main header wrapper
Landing Hero Section
A modern conversion-oriented landing hero section with gradient typography, product copy-paste badges, features, and an interactive grid previewing components. Located at src/components/synapse-ui-components/blocks/landing-hero/ (installs to components/synapse-ui/blocks/landing-hero/).
Includes:
landing-hero.tsx— main hero sectionfeatchers.tsx— custom features grid
Landing Interactive Features Preview
An interactive feature showcase with accordion selectors and dynamic preview blocks displaying animations and transitions. Located at src/components/synapse-ui-components/blocks/landing-interactive-preview/ (installs to components/synapse-ui/blocks/landing-interactive-preview/).
Includes:
landing-interactive-preview.tsx— main interactive features showcase
Landing Interface Building Cards
A split layout card showcasing interface building capabilities, copy-paste snippets, and interactive inputs. Located at src/components/synapse-ui-components/blocks/landing-interface-cards/ (installs to components/synapse-ui/blocks/landing-interface-cards/).
Includes:
landing-interface-cards.tsx— main interface card container
Landing Showcase Section
A centered showcase layout displaying product images, statistics counters, and links to live demos. Located at src/components/synapse-ui-components/blocks/landing-showcase/ (installs to components/synapse-ui/blocks/landing-showcase/).
Includes:
landing-showcase.tsx— main showcase grid