Beautiful UI Building Blocks

Building Blocks for the Web

Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.

Browse Blocks Documentation

Featured Landing Login Ecommerce art-gallery

Browse all blocks

A simple login form

Open in

app/login/page.tsx

import { LoginForm } from "@/components/login-form";

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-sm">
        <LoginForm />
      </div>
    </div>
  );
}

A simple login form.

A product card collection with filtering and sorting

Open in

app/product-card/page.tsx

import ProductCard from "@/components/product-card";

export default function Page() {
  return (
    <div className="flex min-h-svh w-full justify-center p-6 md:p-10">
      <div className="w-full">
        <ProductCard />
      </div>
    </div>
  );
}

A product card collection with filtering and sorting.

product-card-01

A modern, animated art gallery slider block

Open in

app/art-gallery-slider/page.tsx

import { ArtGallerySlider } from "@/components/art-gallery-slider";

export default function Page() {
  return (
    <div className="h-svh w-full bg-black">
      <ArtGallerySlider />
    </div>
  );
}

A modern, animated art gallery slider block.

art-gallery-slider

Browse more blocks