Ship Production-Ready Landing Pages in Hours, Not Days

Production-ready components, Blocks, Templates, and zero bloat so you can focus on building, not styling.

Explore Templates

Read Docs

Next.js

React JS

Tailwind CSS

Framer Motion

Features

From Idea to Interface in Minutes

Carefully crafted components designed for speed, flexibility, and real-world production use.

Effortless CustomizationAdapt every component to match your design system with minimal effort.

One-Step SetupInstall and integrate components instantly using our streamlined CLI.

Production-GradeBuilt with performance, scalability, and real-world use in mind.

Seamless Next.js IntegrationOptimized for modern Next.js apps with zero configuration overhead.

Compatibility

Looks Perfect on Every Screen

Fully responsive components that adapt seamlessly across mobile, tablet, and desktop — no extra work needed.

Seamless on Mobile

Touch-first layouts that feel natural, fast, and effortless on every screen.

Fluid on Tablets

Perfectly balanced layouts that adapt smoothly across every tablet size.

Built for Desktop

Spacious, structured interfaces designed for clarity, focus, and performance.

Components

Here’s a Sneak Peek of What We’ve Been Building

Stop wasting time on UI — copy, customize, and ship production-ready components in minutes.

Templates

Minimalist Portfolio

A minimalist portfolio website built with Next.js and Tailwind CSS.

Explore more Templates

Blocks

Login 1

Clean and simple login UI.

Login 2

Elegant minimal auth screen.

Login 3

Modern split-screen login layout.

Explore more blocks

BUILD FASTER

Ship Beautiful UI Without the Hassle

Skip the repetitive work. Use carefully crafted components to go from idea to production in minutes.

Explore Templates

"use client";
import React, {
  createContext,
  useContext,
  useEffect,
  useRef,
  useState,
} from "react";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";

const NavContext = createContext();

const ExpandableNavigation = ({
  className,
  children,
  initialHeight,
  finalHeight,
}) => {
  const ref = useRef(null);
  const [open, setOpen] = useState("");

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        setOpen("");
      }
    };
    document.addEventListener("click", handleClickOutside);
    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, [ref]);
                  

Welcome BackLogin to your Github or Google Account

Or Login with Email

Password

Don't React UI

A collection of modern components, blocks and templates

Made with ❤️ by Yash Vishnoi