Code Snippets
Find the perfect component for your next project.
Pure CSS Accordion (FAQ)
A highly accessible, SEO-friendly accordion component built entirely with native HTML details/summary elements and CSS.
FAQ Accordion
Implemented with only HTML5 details/summary element and CSS, no JavaScript required. An accessible accordion for FAQs with smooth opening and closing animations.
Image Accordion
An accordion that not only displays text but also a beautiful background image when you open the panel.
Smooth Reveal Accordion
A clean accordion featuring seamless height animations and rotating icons.
overlapping avatar groups
Avatar UI with multiple user icons stacked on top of each other and a badge showing how many people are left.
Animated Gradient Background
A stunning, smoothly transitioning animated gradient background built entirely with CSS.
Animated Mesh Gradient
A dynamic mesh gradient background with smoothly transitioning colors, built entirely with CSS.
Aurora Background
A fantastic background effect that flows like an aurora borealis with multiple animated oval blobs and filters. Implemented with pure CSS.
Particle Field Background
Background effect that generates floating particles using CSS animation
Animated Polka Dot Background
This is a background component that uses CSS radial-gradient to draw a clean polka dot pattern with animation.
Pulsing Status Badge
A badge with a wavy animation (Pulse) that emphasizes that you are online or live streaming.
Cyberpunk Glitch Button
A futuristic button featuring a neon glow and subtle glitch animation that looks great in dark mode.
Gradient Border Button
This button component has a beautiful rotating gradient border by combining CSS `-webkit-mask-composite` and animated gradient.
Liquid Fill Button
A button that fills with liquid in waves from the bottom when hovered
Magnetic Button
An interactive magnetic button component that smoothly follows the mouse cursor as if it were magnetically attracted.
Neumorphism Button
A sleek neumorphic button UI featuring a soft, three-dimensional tactile aesthetic, crafted entirely with pure CSS.
Shimmer Button
A beautiful button component that emits a band of light (shimmer effect) on hover and periodically.
3D Flip Card
Interactive card component that flips in 3D space on hover
Glassmorphism Profile Card
An elegant, semi-transparent user profile card utilizing the glassmorphism effect.
Glassmorphism Card
A modern, visually striking card UI component that leverages glassmorphism principles to create a frosted glass aesthetic with transparency and background blur.
Neon Glow Card
This is an interactive card UI component where the edge of the card lights up like a neon light when hovered, and the spotlight moves depending on the mouse position.
Animated Pricing Tier Card
A modern pricing card component that is highlighted on hover and has an animated pricing section.
Stats Counter Card
This is a statistics card component that is ideal for dashboards and landing pages, as the numbers animate and count up from zero as the page scrolls.
infinite marquee carousel
A component that allows logos and cards to scroll horizontally without interruption.
mega footer layout
Large footer with multi-column links, newsletter signup, and social media icons.
Animated Search Bar
A minimalist search bar that expands smoothly when you click the icon.
Custom Toggle Switch
A beautifully animated, custom CSS toggle switch designed to flawlessly replace native browser checkboxes.
File Upload Dropzone
Modern file upload area with drag and drop support.
Floating Label Input
A modern input field where the placeholder smoothly floats up to become a label upon focus.
Multi-Step Form
UI that switches between multiple steps (with progress indicator), often used on registration screens, etc.
OTP Input
An intuitive 6-digit OTP input component that autofocuses when you enter a single character and returns to the previous box with backspace. Also supports paste.
Password Strength Meter
A UI that visually displays the strength of the password entered.
Bento Grid Layout
An asymmetrical and modern bento box-style grid layout, popular for feature showcases and dashboards.
Masonry Layout
Beautiful Pinterest-style irregular grid layout using CSS Columns
Responsive CSS Grid Gallery
A fluid, responsive image gallery that dynamically adjusts its column count based on screen width using auto-fit and minmax, completely eliminating the need for media queries.
Sidebar with Header
The basic layout of a modern web application with a fixed sidebar on the left and a header at the top. Ideal for management screens and SaaS products.
Pure CSS Loading Spinner
A sleek, modern loading spinner crafted entirely with CSS using conic gradients and masks, eliminating the need for images or JavaScript.
Dots Wave Loader
A pure CSS animation loader component that does not require any JavaScript, with 5 wavy dots.
Glitch Text Loader
A text loading screen with a cyberpunk-style glitch effect.
Progress Bar Loader
This is a loader component that realizes three types of progress bar animations: gradation, stripe, and pulse using pure CSS.
Pulse Ring Loader
A loading spinner featuring a gradient and a ripple-like expanding ring animation.
Skeleton Screen Loader
Skeleton UI with rich shimmer animations displayed while content loads
Glassmorphism Modal
A beautiful glass-like modal dialog with a blurred background.
Breadcrumb Navigation
Modern and beautiful arrow-shaped breadcrumb navigation
Floating Dock Navigation
A macOS-like floating dock navigation where icons expand on hover.
Hamburger Menu Animation
An elegant, highly interactive hamburger menu animation that seamlessly morphs into a close ("X") icon upon user interaction.
Collapsible Sidebar Menu
This is a sidebar navigation that can be used on dashboards, etc., and can be collapsed to an icon-only state.
Sticky Navbar
A sticky navigation bar component that freezes with a glass morphism effect and changes to a compact style as you scroll.
Feature Cards Section
Feature introduction card section for SaaS/landing pages. A card UI component with a gradation border that glows softly when hovered.
Hero Video Background
This is a hero section that places a looping video in the background to give it a visual impact.
Split Hero Section
A hero section featuring bold typography and a split layout, with elements sliding in on load.
Responsive Pricing Table with Tailwind CSS
A highly polished, responsive pricing table component tailored for SaaS platforms, meticulously crafted with utility-first Tailwind CSS.
Testimonial Slider
Slider section to display a carousel of user reviews
Vertical Timeline Section
A vertical timeline that represents the phases and history of a project.
Animated Underline Tabs
Tab navigation with underline indicators that smoothly follow active tabs.
Success Toast Notification
A pop-up toast notification informing the user of a successful operation.
Magnetic Tooltip
A sleek tooltip with smooth follow animations and fade-in effects that elegantly tracks cursor movement.
Context Menu
Custom right-click context menu with rich design
Pure CSS Tooltip
A lightweight, smooth hover tooltip engineered entirely with CSS, completely bypassing the need for JavaScript.
Popover Menu
A popover menu that opens on click (or focus) and displays a list of actions, rather than on hover.