Blocks
Full-page sections, ready to drop into your Next.js project.
GwenUI Blocks are complete, full-page UI sections — not atomic components. Each block is a self-contained layout you can install via the CLI and customize to fit your product. Built with Tailwind, shadcn/ui, and Framer Motion.
BasicSupreme
How Blocks Work
1
Browse
Find the block you need from the library.
2
Install
Run one CLI command to add it to your project.
3
Customize
Tweak tokens, content, and layout to match your brand.
Categories
Basic
2D full-page sections built with Tailwind + Framer Motion. Fast, accessible, and easy to customize.
tailwindframer-motionshadcn
7 blocks availableBrowse Basic →
Supreme
WebGL-powered full-page blocks using R3F and OGL. For products that demand cinematic visual quality.
r3foglglslframer-motion
1 block availableExplore Supreme →
Available Blocks
Auth — LoginBasic
Cinematic glassmorphic login screen with animated noise background.AI Chat HeroBasic
Full-page AI chat interface, Gemini-inspired with GwenUI dark tokens.Testimonial MarqueeBasic
Infinite auto-scroll marquee with Twitter/X style cards.Dynamic PricingBasic
Multi-tier pricing grid with slot-machine digit animations.Comparison TableBasic
Claude-style pricing comparison table with billing toggle.Feature WalkthroughBasic
Step-by-step onboarding with sticky preview and auto-play.Meet the TeamBasic
Editorial playing-card member profiles with photo overflow.Before-After SliderBasic
Elastic spring image comparison slider with stretch effects.Bento GridBasic
Asymmetric CSS grid with staggered entrance animations.Parallax HeroSupreme
Cinematic 3D spring-physics parallax hero with depth card stack.Install blocks in seconds
Use the GwenUI CLI to add any block directly to your project.
Learn more about the CLI →$npm install -g @gwenui/cli
$gwen-ui add auth-login