Components Deliver Website

/

Introduction
Installation

Liquid Glass
Elastic Pill
Magnetic Links
Rolling Letters
Expanding Tabs
Floating Trio
Timeline Scrubber
Figma Ruler
Split-Flap Board
Type to Go
Shortcut Keys
Dynamic Island
Ink Underline
Curtain Menu
Magnetic Dock
Mega Menu
Morphing Pill
Smart Hide
Blue Ribbon
Side Drawer

Hero Section With Photo and Glass Cards
Fintech Hero Section With Gradient Cards
AI Hero Section With Chat Input
API Hero Section With Pixel Art Image
SaaS Hero Section With Dashboard Preview
Hero Section With Image Tracking Tags
Hero Section With Painted Sky Background
Product Hero Section With Image
Hero Section With Isometric Illustration
AI Hero Section With 3D Image
Hero Section With Full Background Image
Hero Section With Pixel Glow Background
Hero Section With App Window Preview
Split Hero Section With Integrations Hub
Dark Hero Section With Pixel Art
Hero Section With Highlighted Text
Developer Hero Section With Code Rain
Healthcare Hero Section With Booking Calendar
Fintech Hero Section With Bento Cards
Neo Brutalist Hero Section
Hero Section With Animated Integrations

Live Workspace
Morphing Studio
Prompt to Page

Try It Live
Before / After
Moodboard
X-Ray Lens
Pressure Type
Case Deck

Docking Scroll
Aperture Scroll

Need the whole site?

Deliver designs and builds it, motion included.

React Navbars

Animated navbars for React and Next.js: glass, dock, mega menu, command bar and more. Copy the code in TypeScript or JavaScript.

01
Liquid Glass
A frosted glass pill with a glass lens under the hovered link.
02
Elastic Pill
A blue pill that stretches like liquid between links.
03
Magnetic Links
Links and button drawn toward your cursor like magnets.
04
Rolling Letters
Every letter rolls up into blue, one after another.
05
Expanding Tabs
Icon tabs where the one in focus opens up to show its name.
06
Floating Trio
Three floating pills that drift together as you scroll.
07
Timeline Scrubber
The page as an editing timeline you can scrub.
08
Figma Ruler
A design-tool ruler with every section as a frame.
09
Split-Flap Board
A departures board that flips to the section you're reading.
10
Type to Go
Type where you want to go, and it takes you there.
11
Shortcut Keys
Every link is a key with a real number shortcut.
12
Dynamic Island
A dark capsule that opens into a menu.
13
Ink Underline
An underline that follows the section you're reading.
14
Curtain Menu
One button that opens a full-screen menu.
15
Magnetic Dock
A bottom dock whose icons grow under the pointer.
16
Mega Menu
A dropdown that glides between menus instead of closing.
17
Morphing Pill
A wide bar that gathers into a floating pill on scroll.
18
Smart Hide
Hides while you read down, returns the moment you scroll up.
19
Blue Ribbon
A solid brand-blue bar with a white pill and an announcement strip.
20
Side Drawer
A minimal bar whose menu slides in from the side.

Built by Deliver. Free to copy into your own projects.

Next.js · Tailwind · shadcn/ui · Framer Motion

deliver ui