All Components
295Click any card to preview & copy code· 213 free · 82 pro
Accordion
3FAQ
Frequently Asked Questions
Process
How it works
Everything you need to know
Animation
37Click any button to trigger the ripple
Ripple Rings
Click anywhere to create ripples
Morphing Blob
Organic shape animation with 8-corner border-radius
Badge
1Button
5Glowing Border Buttons
3 distinct animated border effects
Liquid Buttons
Three interaction styles — hover and click to feel the difference
01 — Liquid Fill from Bottom
02 — Blob from Cursor
03 — Ripple + Fill on Click
Card
27Lightning Fast
Built on Vite and RSC for sub-100ms loads.
Design Tokens
Every value is a CSS variable — fully themeable.
Zero Config
Copy a component, import it, done.
Free
Great for side projects
- 10 components
- Community Discord
- MIT License
Pro
For production apps
- All 60+ components
- New drops monthly
- Priority support
- Figma kit
Team
Scale with your team
- Everything in Pro
- 5 seats
- Private Discord
- Custom components
Hello World
An animated glowing border beam that continuously travels around the card edge.
Direction Hover Card
Hover from any edge — overlay slides in from that direction
Focus Cards
Hover a card to bring it into focus
Expandable Cards
Click a card to reveal more content
$49/mo
Everything you need to ship faster.
Aurora Border
Animated aurora gradient that flows around the card border.
Hover each card
3D tilt with light reflection simulation
Hover to feel the depth
Parallax layers create true 3D depth
Click to expand
Spring-physics layout animation · One card at a time
Tinder-style Stack
Drag left to pass · right to keep
4-layer depth card
Move your cursor over the card — each layer responds at a different depth.
Image Reveal
Hover cards to reveal the image behind
Opacity reveal
Zoom variant
Flip Cards
Click any card to flip it
Carousel
6
Alpine Series
Above the Clouds
Trusted by teams at
Drag cards left or right
Companies we work with
Counter
40+
Components
0+
GitHub Stars
0+
Downloads / mo
0+
Happy devs
Components
Downloads
TypeScript
Animation
Our Numbers
0K+
Users
0%
Uptime
0+
Components
$0M
Revenue
Counting Numbers
Two variants: slot machine and smooth easing
Cursor
5Dock
1Features
4Features
Everything you need
A complete toolkit for building modern applications.
Deploy Instantly
Push to production in seconds with zero downtime deploys.
Type-Safe
End-to-end TypeScript support with auto-generated types.
Zero Config
Sensible defaults out of the box. No setup required.
Open Source
Fully open source, community-driven development.
Dark Mode
Beautiful dark and light themes included by default.
MIT License
Free for personal and commercial use, forever.
Platform
Built for scale
Why UIBlocks?
Before vs. After
Built for the modern web
Every primitive you need to ship beautiful products.
Hero
41
Input
5Verify your identity
Enter the 6-digit code sent to your email
Enter all 6 digits to continue
Get in touch
We reply within 24 hours.
Frameworks
Click the search icon to filter.
Get in touch
We'll respond within 24 hours.
Layout
1Loader
7Triple Ring Loader
Pulse Wave Loader
Circular Progress
Performance
Uptime
Accuracy
Modal
3Gallery
Click to Explore
Navbar
7Hover "Leistungen" or "Galerie"
Hover the nav links above
"Product" and "Company" have animated dropdowns. Scroll down to see the transparent → glass transition.
↑ Scroll back up — nav becomes glass
Pitch
7WHERE THE CAPITAL GOES
Modeled at a $2–4M raise. Growth-first allocation — marketing drives adoption, development extends the roadmap, team builds execution capacity.
Select a section to expand — traction, financials, market data, exit strategy, cap table.
High-fidelity cinematic renders — the visual world of your project.
Scroll
30Copy-Paste Ready
Every component is self-contained. Copy the code, paste it into your project, and it works immediately. No setup, no configuration, no headaches.
Copy-Paste Ready
Every component is self-contained. Copy the code, paste it into your project, and it works immediately. No setup, no configuration, no headaches.
Zero Dependencies
Built on Framer Motion and Tailwind only — dependencies you already have. No bloated libraries, no version conflicts, no supply chain surprises.
TypeScript First
Full type safety out of the box. Every prop is typed, every variant is constrained. Your editor knows exactly what's possible before you do.
Dark Mode Native
Not an afterthought. Every component was designed dark-first, then adapted for light. The contrast ratios, shadows, and glows all live in darkness.
MIT License
Use it in client work, SaaS products, open source projects. No attribution required. No royalties. No enterprise tiers. Just build.
WebuiltUIBlockssodeveloperscanshipstunninginterfaceswithoutspendingweeksonanimations.Copy.Paste.Done.
The developer's guide to premium motion
The Case for Component Libraries
Every developer eventually faces the same problem: a design that looks stunning in Figma and mediocre in the browser. The gap between design and implementation is real, and it costs weeks of iteration. Component libraries close that gap by encoding design decisions into reusable, tested, production-grade code.
Why Animation Matters
Static interfaces feel inert. When a button has no response, when a panel appears without transition, when a form submits without feedback — users notice. Not consciously, but viscerally. Animation communicates state, guides attention, and creates the sensation of quality. It is not decoration. It is communication.
The Copy-Paste Philosophy
We believe component libraries should be owned, not imported. When you copy a UIBlocks component, it becomes yours. You can modify it, extend it, gut it entirely. There is no upstream dependency to break your build, no maintainer to wait on, no hidden abstraction hiding the real CSS.
175 Components, Zero Compromise
UIBlocks ships with heroes, carousels, testimonials, navigation, scroll effects, loaders, modals, inputs, and more. Each one is built to the same standard: dark-native, motion-first, TypeScript throughout, responsive by default. The number grows. The standard doesn't drop.
Cinematic Scroll Effects
The zoom parallax effect above is achieved with a single useScroll hook and a few useTransform calls. The background scales from 1x to 1.3x while the text simultaneously fades and translates upward.
Spring Physics Included
Every animation in UIBlocks uses Framer Motion's spring system or carefully tuned easing curves. The result is motion that feels weighted, natural, and alive — not robotic tweens.
One Component, Infinite Uses
Swap the headline, change the colors, adjust the timing. Every component is a starting point, not a finished product. Own your code. Build your vision.
Everything you need to ship
Built by developers who ship products, not libraries. Quality without compromise.
Why UIBlocks?
Everything you need to build stunning UI, nothing you don't.
Zero Configuration
Drop in a component and it works. No global setup, no theme providers, no learning curve.
TypeScript First
Full type safety out of the box. Autocomplete every prop, catch bugs before they ship.
Tailwind Native
Built on Tailwind CSS. Customize every token, every variant, every breakpoint.
Framer Motion Powered
Every animation is hardware-accelerated and performant. 60fps on any device.
Accessible by Default
ARIA-compliant, keyboard navigable, screen reader tested. Ship with confidence.
Copy & Own It
No npm package dependency. Copy the source, it lives in your codebase forever.
Scroll to see parallax depth
Three variants — scroll to trigger each one
Variant 01 — Headline Reveal
Variant 02 — Paragraph Line Reveal
Variant 03 — Staggered Word Reveal
Born in Darkness
Every great design begins in the void — a blank canvas where potential is limitless and nothing has been ruled out yet.
Depth of Focus
Structure emerges layer by layer. Each decision narrows the infinite into the intentional — carving signal from noise.
Momentum Builds
With foundations set, the work accelerates. Ideas compound, systems emerge, and clarity replaces confusion.
The Final Form
Everything converges. Constraints become features. Limitations become style. The result is inevitable — it could only have been this.
Everything you need
A complete platform for building, deploying, and scaling modern applications.
Precision at every scale
Every component adapts fluidly across viewport sizes. Our design system ensures pixel-perfect rendering whether viewed on desktop, tablet, or mobile.
Speed as a feature
Sub-millisecond response times aren't a goal — they're a baseline. Performance is baked into every architectural decision from day one.
Zero trust, full control
End-to-end encryption, granular access controls, and real-time threat detection work silently in the background so you never have to think about security.
Grow without limits
From your first user to your first million, the infrastructure scales seamlessly. No migrations, no re-architecture — just growth.
From idea to impact
Scroll to trace the path — each milestone reveals as the line draws itself.
End of the journey — ready to begin?
The future of web development
Imagine a platform where deploying production-grade apps takes minutes, not days. Where the infrastructure scales automatically, and your team can focus entirely on building features that matter.
Built for every scale
From edge functions to serverless databases — every primitive you need is available out of the box. No configuration. No DevOps overhead. Just capabilities that appear exactly when you need them.
Transparent, predictable costs
Start for free, scale as you grow. Usage-based pricing means you never pay for idle capacity. Our cost calculator helps you predict exactly what you'll spend before you commit.
Made by builders, for builders
We spent years building production systems at scale before founding this company. Every feature we ship is one we wished we'd had. Every trade-off we make is one we've lived through ourselves.
Layered depth in motion
Each card has a different parallax multiplier — scroll to feel the depth.
From brief to browser
Scroll through to see each phase. Left panel updates as you read.
Tab
3Build faster, ship smarter
UIBlocks gives you a curated library of production-ready components. Drop them into any React project and customize with Tailwind — no configuration required.
Features
Everything you need to ship beautiful UIs
Testimonial
7"Finally a component library that actually looks premium. Saved us weeks of work."
Alex R.
Frontend Dev
"The animations are silky smooth. Perfect starting point for any client project."
Mia K.
UI Designer
"Shipped my SaaS landing page in an afternoon. UIBlocks is a cheat code."
Sam T.
Indie Hacker
"Our design system is now built on UIBlocks components. 10/10 would recommend."
Jess W.
CTO @ Luminate
"The tilt cards and carousels alone are worth the subscription price."
Chris P.
Product Designer
"Copy-paste that just works. No fighting with CSS or broken imports."
Nora H.
Fullstack Dev
“Ship 10× faster with ready-made components.”
“The animations are silky smooth.”
“Finally a library that actually looks good out of the box. Saved our whole design sprint.”
“Replaced 3 weeks of work with an afternoon.”
“My clients always ask how I build so fast.”
“The code quality is exactly what I'd write myself — but done.”
“Pro tier paid for itself on the first project.”
“Best investment for a solo developer.”
UIBlocks is insane. Built our entire dashboard in 2 days. The animations are buttery smooth.
Finally a component library that actually looks premium. The Bento Grid and Globe components alone are worth it.
Saved me literally weeks of work. Copy paste and done. The code is clean and well-typed too.
Been using this for client projects. Every client is blown away by the animations. Best $12 I spend monthly.
The Kanban board and file upload components alone saved me 3 days. Incredible quality.
Globe Wireframe + Flickering Grid hero = chef kiss. Shipping my SaaS landing page this week.
Based on 128 Google Reviews
Text
29Animatedtextthatrevealswordbyword.
Perfectforherosectionsandlandingpages.
Typewriter
Hue Shift
UIBlocksGlow Pulse
LuminousColor Wave
Hover to Scramble
COMPONENTS← hover me
Button Variant
Components that ship
gradient text, animated
Components that help you
Production-ready components with smooth animations. No install required.
$ import { TypewriterEffect } from 'uiblocks'<TypewriterEffect phrases={phrases} />Open 24/7
Per-letter rainbow rotation
Hover for liquid effect
Hover over the letters
Words animate up with spring physics, staggered 50ms apart.
Same spring physics, reversed — words cascade down from above.
RGB Channel Split
Hover to trigger · Auto-glitches every few seconds
Link Effects
Three hover interaction styles for navigation links
01 — Magnetic Pull
02 — Glow Trail (cursor-tracked)
03 — Underline Draw
Timeline
5Our Journey
Five years of building something worth using
Our Process
Five disciplined phases from problem to shipped product
Horizontal Variant
Vertical Variant — Click to activate
Discovery & Research
◉We audit your existing setup, interview stakeholders, and map out constraints. Nothing gets designed without first being understood.
Strategy & Architecture
◈Define the information architecture, user flows, and technical blueprint. This phase produces the single document everyone aligns on.
Design & Prototype
◎High-fidelity Figma designs with interactive prototypes. We run usability tests at every milestone — not just at the end.
Build & Integrate
⬡Engineers implement against the design spec with weekly syncs. The design system is the single source of truth — no side-deals.
Launch & Iterate
✦Staged rollout, A/B test, measure. Every launch generates a retrospective and a next-iteration brief. Shipping is not the end.
UI
57Animated List
Items appear one by one with spring animation
UIBlocks
Compare Slider
Drag the handle to compare
// loops automatically
Hover over buttons to feel the magnetic pull
Step 1: Install
npm i uiblocks — or just copy the component
React to this component
To Do
3Design system tokens
DesignAPI documentation
DocsMobile responsiveness
Dev
In Progress
2Component registry
DevAnimation polish
Design
Done
2Core components
DevPricing page
Marketing
Drag & drop or click to upload
PNG, JPG, PDF, ZIP up to 10MB
Animation quality
Great
Ease of use
Excellent!
Overall score (1-10)
How do you feel?
Globe Wireframe is now available in your library
Your subscription is now active. Enjoy 96 components!
Vercel deployment completed in 18 seconds
Someone starred your component on GitHub
Free
- ✓ 50 free components
- ✓ Copy & paste code
- ✓ Dark mode ready
- ✓ TypeScript support
- ✓ Community support
Pro
- ✓ All 96 components
- ✓ New components weekly
- ✓ Figma designs included
- ✓ Priority support
- ✓ Lifetime updates
Team
- ✓ Everything in Pro
- ✓ 5 team members
- ✓ Private Slack channel
- ✓ Custom components
- ✓ White-label license
Hover over each button
Live Statistics
$0.0k
Revenue
0.0k
Users
0.0%
Uptime
Preferences
Dark Mode
Enable dark interface
Notifications
Push alerts & emails
Auto-save
Save every 30 seconds
Enable animations
Smooth transitions everywhere
Pro features unlocked
Access all premium components
Dark mode default
Matches system preference
Audit Score
Status Badges
Toast System
Hover to pause · Timer bar shows auto-dismiss
Sortable Task List
Drag the ⠿ handle to reorder items
4 Toggle Variants
Creative takes on a common UI pattern
Glassmorphism variants
Light variants
Modernste Elektrotechnik für Ihr Zuhause
Von der einfachen Steckdose bis zur komplexen Smart-Home-Integration — unser erfahrenes Team liefert erstklassige Elektroarbeiten mit höchster Präzision. Wir arbeiten schnell, sauber und mit einem Auge für Details.
Mehr erfahren →Intelligente Systeme, die Ihr Leben erleichtern
Vernetzte Beleuchtung, automatische Rollläden, Sicherheitssysteme und Energiemanagement — wir planen und installieren Ihr Smart Home von A bis Z. Steuerung per App oder Sprache inklusive.
Smart Home entdecken →Nachhaltige Energie für die Zukunft
Solaranlagen, Batteriespeicher und Wallboxen für Ihr Elektroauto — wir begleiten Sie auf dem Weg zur Energieunabhängigkeit. Inklusive Förderberatung und professioneller Montage.
PV-Beratung anfragen →Alles aus einer Hand
Click to watch
Component Library
9 components found
Masonry Gallery
Click any photo to open lightbox · ← → to navigate · ESC to close
Search
Find components, patterns, and examples
Before / After
Drag the handle to compare — constrained to container bounds
Meet the builders
A small team with big ambitions. We build tools we wish existed.
Simple, transparent pricing
Free
For personal projects and exploration.
- ✓Up to 3 projects
- ✓50 components
- ✓Community support
- ✕Commercial license
- ✕Custom theming
- ✕Priority support
Pro
For freelancers and professional builders.
- ✓Unlimited projects
- ✓All 200+ components
- ✓Community support
- ✓Commercial license
- ✓Custom theming
- ✕Priority support
Team
For teams shipping products at scale.
- ✓Unlimited projects
- ✓All 200+ components
- ✓Slack support channel
- ✓Commercial license
- ✓Custom theming
- ✓Priority support
Lifetime Deal — Pay once, use forever
All Pro features. No subscription. $199 one-time.
Eyebrow Pills
5 variants for context labels, announcements, and category tags
Place above headlines to add context, indicate status, or highlight announcements.