Collections · 19 sets
Sets that belong together.
Each collection groups components that solve one kind of problem well. Every reference points to a released component with a live demo and source.
- Set 01
Portfolio Essentials
Headline typography, tactile project cards, before/after reveals and navigation that feels like an instrument.
- C.09Kinetic Headline
- B.05Tilt Card
- B.08Expandable Project Card
- D.13Interactive Dock
- B.37Bento Grid
- B.40Compare Slider
- H.61Ring Carousel
- C.43Circular Text
- B.67Zoom Image
- B.68Scroll Stack
- C.72Masked Text
- D.75Overlay Menu
- B.97Hover Image List
- H.122Depth Gallery
- C.102Fit Text
- B.130Masonry Grid
- H.152Coverflow
- C.131Animated Link
- H.151Page Flip
- H.181Holo Card
- H.182Extruded Text
- B.157Snap Carousel
- E.169Halftone Image
- B.190Lightbox Gallery
- C.191Text Image Reveal
- H.212Door Reveal
- D.197Page Transition
- Set 02
Motion Fundamentals
Springs, staggers, tweens and shared layout — the verbs most interfaces need.
- A.01Magnetic Button
- A.04Split Text Button
- G.25Animated Counter
- D.14Morphing Tabs
- B.38Fluid Accordion
- A.33Stateful Submit Button
- D.47Dynamic Island
- B.70Sortable List
- D.76Fluid Pagination
- C.73Morph Text
- A.93Segmented Control
- B.100Filterable Grid
- A.126Morph Icon Button
- C.132Wave Text
- C.163Text Prism
- D.166Swipe Tabs
- D.197Page Transition
- B.187Swipe Actions
- Set 03
Dashboard Toolkit
Metrics, gauges, heatmaps, charts, timelines and notifications that respect the data.
- G.28Metric Ticker
- G.26Activity Heatmap
- G.27Interactive Chart Tooltip
- F.21Animated Toggle
- G.57Radial Gauge
- G.59Bar Race
- G.58Activity Timeline
- G.56Toast Stack
- G.87Donut Chart
- G.88Radar Chart
- G.89Uptime Bar
- G.90Skeleton Loader
- D.77Collapsible Sidebar
- G.117Sparkline
- G.118Storage Meter
- G.120Notification Bell
- G.119Countdown
- G.147Brush Chart
- G.148Funnel Chart
- G.149Treemap
- G.150Activity Rings
- B.127Resizable Panels
- G.177Data Table
- G.178Gantt Chart
- G.179Scatter Plot
- G.180Waffle Chart
- G.209Candlestick Chart
- G.208Sankey Diagram
- G.210Force Graph
- G.207Event Calendar
- B.188Virtual List
- Set 04
Landing Page Magic
Ambient backgrounds, marquees, lit cards, bento layouts and statements that reveal themselves.
- E.17Aurora Field
- C.12Infinite Marquee
- B.06Spotlight Card
- C.11Gradient Reveal Text
- B.37Bento Grid
- C.41Typewriter
- C.44Marker Highlight
- E.48Flow Field
- A.63Border Beam Button
- E.82Connection Beams
- C.71Split-Flap Display
- E.80Flashlight Reveal
- B.99Pricing Toggle
- C.103Testimonial Rotator
- E.110Light Rays
- E.142Particle Text
- E.139Glass Refraction
- D.138Auto-Hide Header
- E.172Parallax Hills
- C.164Stroke Draw Text
- D.168Hover Highlight Nav
- E.201Tile Reveal
- C.191Text Image Reveal
- E.200Fireflies
- Set 05
Experimental Lab
Perspective stages, particle fields, globes, blobs and orbital diagrams with sensible fallbacks.
- H.30Particle Sphere
- H.29Rotating Product Stage
- E.18Dot Matrix Field
- H.32Orbital Skills
- H.60Wireframe Globe
- H.62Morphing Blob
- E.49Topographic Lines
- E.50Pixel Trail
- E.51Signal Lines
- E.79Water Ripple
- H.91Isometric Grid
- H.92Paper Fold
- E.109ASCII Field
- E.111Warp Grid
- C.104Falling Text
- B.98Pan & Zoom Canvas
- E.140Metaballs
- E.141Voronoi Field
- E.139Glass Refraction
- E.142Particle Text
- E.170Ink Trail
- E.171Ribbon Trail
- H.181Holo Card
- H.182Extruded Text
- E.199Electric Arc
- E.200Fireflies
- H.211Dice Roller
- E.202Weather Effect
- Set 06
Form Craft
Inputs, codes, tags, passwords, uploads and ratings — validated, labelled and tactile.
- F.22Floating Label Input
- F.24Animated OTP Input
- F.23Multi-Step Form
- F.52Tag Input
- F.53Password Strength
- F.54File Dropzone
- F.55Rating Input
- F.21Animated Toggle
- F.83Dual Range Slider
- F.84Color Picker
- F.85Date Picker
- F.86Signature Pad
- F.113Combobox
- F.114Animated Checkbox
- F.115Wheel Picker
- F.116Inline Edit
- F.143Card Input
- F.144Image Cropper
- F.145Feedback Scale
- F.146Mention Input
- F.173Variant Picker
- F.174Chip Select
- F.175Slug Input
- F.176Markdown Editor
- F.203Phone Input
- F.204Clock Picker
- F.205Permission Matrix
- F.206Availability Grid
- A.183PIN Pad
- Set 07
Tactile Controls
Knobs, sliders, holds and copy buttons that feel like hardware.
- A.35Rotary Knob
- A.34Elastic Slider
- A.03Hold to Confirm
- A.36Copy Button
- A.01Magnetic Button
- A.02Liquid Button
- F.21Animated Toggle
- A.65Number Stepper
- A.66Swipe to Confirm
- F.83Dual Range Slider
- A.96XY Pad
- A.93Segmented Control
- A.124Keycap Button
- A.125Vote Control
- A.123Progress Button
- A.155Kbd Shortcut
- A.153Split Button
- A.183PIN Pad
- A.184Scene Switch
- A.185Record Button
- Set 08
Wayfinding
Docks, menus, command palettes, sheets and scroll-aware navigation.
- D.13Interactive Dock
- D.15Command Menu
- D.16Scroll Progress Navbar
- D.45Radial Menu
- D.46Scrollspy TOC
- D.47Dynamic Island
- B.39Bottom Sheet
- D.14Morphing Tabs
- D.75Overlay Menu
- D.76Fluid Pagination
- D.77Collapsible Sidebar
- D.78Morphing Dropdown
- B.69Link Preview
- D.105Smart Breadcrumbs
- D.106Scroll to Top
- D.107Context Menu
- D.108Mobile Tab Bar
- D.135Step Indicator
- D.136Expanding Search
- D.137Scrollable Tabs
- D.138Auto-Hide Header
- B.129Product Tour
- D.165Tree View
- D.167Alphabet Index
- D.168Hover Highlight Nav
- D.166Swipe Tabs
- D.198Link Hints
- D.197Page Transition
- D.196Selection Toolbar
- Set 09
Editorial Type
Reveals, scrambles, typewriters, proximity weights, circular badges and hand-drawn marks.
- C.09Kinetic Headline
- C.10Text Scramble
- C.11Gradient Reveal Text
- C.12Infinite Marquee
- C.41Typewriter
- C.42Proximity Text
- C.43Circular Text
- C.44Marker Highlight
- C.71Split-Flap Display
- C.72Masked Text
- C.73Morph Text
- C.74Glitch Text
- C.101Scroll Text Path
- C.102Fit Text
- C.103Testimonial Rotator
- C.104Falling Text
- C.131Animated Link
- C.132Wave Text
- C.133Type Specimen
- C.134Spoiler Text
- C.161Sidenotes
- C.162Read More
- C.163Text Prism
- C.164Stroke Draw Text
- C.191Text Image Reveal
- C.192Text Search Highlighter
- C.193Text Diff
- C.194Code Walkthrough
- Set 10
Micro-Interaction Toolkit
Copies, likes, steps, swipes, celebrations and confirmations — the feedback people feel.
- A.36Copy Button
- A.64Reaction Button
- A.33Stateful Submit Button
- A.65Number Stepper
- A.66Swipe to Confirm
- E.81Confetti
- F.21Animated Toggle
- C.44Marker Highlight
- A.95Theme Toggle
- F.114Animated Checkbox
- G.120Notification Bell
- A.94Speed Dial
- A.126Morph Icon Button
- A.125Vote Control
- C.134Spoiler Text
- A.123Progress Button
- A.155Kbd Shortcut
- B.159Smart Tooltip
- A.186Add to Cart Button
- A.184Scene Switch
- D.195Pull to Refresh
- Set 11
Three-Dimensional Interfaces
Stages, stacks, rings, folds, isometric grids and globes — built with CSS 3D and Canvas 2D.
- H.29Rotating Product Stage
- H.313D Card Stack
- H.61Ring Carousel
- H.91Isometric Grid
- H.92Paper Fold
- H.60Wireframe Globe
- B.05Tilt Card
- B.07Flip Card
- H.121Cube Carousel
- H.122Depth Gallery
- H.151Page Flip
- H.152Coverflow
- H.181Holo Card
- H.182Extruded Text
- C.163Text Prism
- H.211Dice Roller
- H.212Door Reveal
- Set 12
Mobile Patterns
Tab bars, sheets, swipes, wheels, speed dials and segmented controls for small screens.
- D.108Mobile Tab Bar
- B.39Bottom Sheet
- A.66Swipe to Confirm
- F.115Wheel Picker
- A.94Speed Dial
- A.93Segmented Control
- F.24Animated OTP Input
- D.47Dynamic Island
- D.137Scrollable Tabs
- D.138Auto-Hide Header
- D.136Expanding Search
- D.166Swipe Tabs
- D.167Alphabet Index
- B.160Side Drawer
- B.187Swipe Actions
- D.195Pull to Refresh
- B.189Story Viewer
- A.183PIN Pad
- Set 13
Atmospheres
Auroras, flow fields, contours, ASCII, light rays, bokeh and ripples — all off-screen aware.
- E.17Aurora Field
- E.18Dot Matrix Field
- E.19Noise Grid
- E.48Flow Field
- E.49Topographic Lines
- E.51Signal Lines
- E.79Water Ripple
- E.109ASCII Field
- E.110Light Rays
- E.111Warp Grid
- E.112Bokeh Field
- E.140Metaballs
- E.141Voronoi Field
- E.172Parallax Hills
- E.170Ink Trail
- E.169Halftone Image
- E.200Fireflies
- E.202Weather Effect
- E.199Electric Arc
- Set 14
App Builder Kit
Boards, panels, sidebars, palettes, menus, inline editing, mentions and guided tours.
- B.128Kanban Board
- B.127Resizable Panels
- D.77Collapsible Sidebar
- D.15Command Menu
- D.107Context Menu
- B.70Sortable List
- F.116Inline Edit
- F.146Mention Input
- B.129Product Tour
- B.98Pan & Zoom Canvas
- G.177Data Table
- D.165Tree View
- A.154Formatting Toolbar
- F.176Markdown Editor
- G.178Gantt Chart
- B.158Animated Dialog
- B.188Virtual List
- D.196Selection Toolbar
- G.207Event Calendar
- F.205Permission Matrix
- F.206Availability Grid
- Set 15
Commerce Essentials
Pricing, quantities, card entry, product zoom, comparisons, ratings and countdowns.
- B.99Pricing Toggle
- F.143Card Input
- A.65Number Stepper
- F.55Rating Input
- B.40Compare Slider
- B.67Zoom Image
- G.119Countdown
- F.145Feedback Scale
- F.173Variant Picker
- B.157Snap Carousel
- F.174Chip Select
- A.186Add to Cart Button
- B.190Lightbox Gallery
- F.203Phone Input
- Set 16
Content & Reading
Sidenotes, read-more, spoilers, tables of contents, reading progress and considered links.
- C.161Sidenotes
- C.162Read More
- D.46Scrollspy TOC
- D.16Scroll Progress Navbar
- D.138Auto-Hide Header
- C.11Gradient Reveal Text
- C.44Marker Highlight
- C.131Animated Link
- C.134Spoiler Text
- D.106Scroll to Top
- C.192Text Search Highlighter
- D.196Selection Toolbar
- C.194Code Walkthrough
- Set 17
Overlays & Layers
Dialogs, drawers, sheets, tooltips, popovers, menus, toasts and tours — built on the top layer.
- B.158Animated Dialog
- B.160Side Drawer
- B.39Bottom Sheet
- B.159Smart Tooltip
- B.69Link Preview
- D.107Context Menu
- G.56Toast Stack
- B.129Product Tour
- D.15Command Menu
- B.67Zoom Image
- B.190Lightbox Gallery
- B.189Story Viewer
- D.196Selection Toolbar
- Set 18
Media & Stories
Story viewers, lightboxes, carousels, coverflow, audio players and recorders.
- B.189Story Viewer
- B.190Lightbox Gallery
- B.157Snap Carousel
- H.152Coverflow
- B.67Zoom Image
- A.156Waveform Player
- A.185Record Button
- B.97Hover Image List
- E.169Halftone Image
- Set 19
Developer Tools
Code walkthroughs, diffs, shortcuts, command palettes, link hints, tables and trees.
- C.194Code Walkthrough
- C.193Text Diff
- A.155Kbd Shortcut
- D.15Command Menu
- D.198Link Hints
- G.177Data Table
- D.165Tree View
- F.176Markdown Editor
- F.175Slug Input
- A.36Copy Button