Logo

    shadcn blocks and copy-paste Tailwind sections

    What blocks are, how they differ from primitives, and how to use Aceternity sections in a project that already runs shadcn/ui.

    Trusted by Founders and Entrepreneurs from all over the world

    John Shahawy
    Henrik Söderlund
    John Ferry
    Meru Gokhale
    Georg Weingartner
    Jonathan Barshop
    Ray Thai
    Tony Pujals
    Next.js
    React
    Tailwind CSS
    Framer Motion

    Blocks, primitives, and where Aceternity fits

    First, the honest framing. Aceternity UI is not a shadcn project and has no affiliation with it. shadcn/ui is its own library with its own registry, its own CLI, its own docs and its own maintainers. What the two share is a distribution model: you copy source into your repository instead of installing a package that owns your markup. Both are built on Tailwind CSS and unstyled React, so the code lives comfortably in the same codebase. That compatibility is a consequence of similar choices, not of any partnership, and anyone telling you these are official shadcn blocks is wrong.

    The distinction worth understanding is primitive versus block. A primitive is a button, a dialog, a select, an input, the kind of piece shadcn/ui is built around, usually wrapping Radix for behaviour and accessibility. A block is a whole page section: a hero with its layout and animation, or a pricing table with its tier logic. Primitives are what you assemble from. Blocks are what you delete half of. Most teams need both, and confusing the two is why people ask for a shadcn hero and come away disappointed, since heroes are content and brand decisions more than component decisions.

    In practice the two coexist without ceremony. Keep shadcn/ui components where the CLI puts them, in components/ui, and put copied sections somewhere separate like components/sections so a later shadcn CLI run cannot overwrite anything of yours. Where a block includes its own button, either leave it or swap in your shadcn Button so focus rings and disabled states match the rest of the app. The one thing you should not do is edit a file in components/ui to match a block, because the next update will undo it.

    Two friction points are worth knowing before you start. Tailwind version is the first: if your project is on Tailwind v3 and a block was written against v4, or the reverse, you will hit differences in how the theme is configured and how arbitrary values behave, and that is a fifteen minute fix rather than a rewrite. The second is animation. shadcn/ui leans on CSS transitions and tailwindcss-animate, while most Aceternity sections use Motion, so pulling in one animated block adds a runtime dependency your bundle did not have before. If you only need one such section, that trade is usually fine. If you need twelve, at least be deliberate about it.

    A word on dark mode, since it is the most common thing that breaks on paste. shadcn/ui defines colour through CSS variables such as background and foreground, mapped in your theme. Blocks that hardcode neutral-900 or white will look wrong when the class on html flips. The fix is mechanical: replace literal colours with the semantic token names your project already defines, then check both modes before you commit. Doing this once per block is faster than maintaining two palettes.

    Frequently asked questions

    Are Aceternity UI components compatible with shadcn/ui?

    Yes, in the sense that both are React and Tailwind CSS source you paste into your own project, so they compile together and share your theme. Aceternity UI is a separate library with no official connection to shadcn/ui, so treat it as a second source of code rather than an extension of the first.

    What is the difference between a shadcn block and a component?

    A component is a single primitive such as a button, dialog, input or select, usually built on Radix for keyboard and screen reader behaviour. A block is a full page section made of several components plus layout and copy, which you are expected to rewrite heavily rather than use as shipped.

    Will the shadcn CLI overwrite blocks I copy in?

    Only if they live in the same directory the CLI manages. Keep copied sections outside components/ui, in something like components/sections, and CLI runs will leave them alone.

    Do I need shadcn/ui installed to use these blocks?

    No. The sections need React, Tailwind CSS and whatever dependency each one lists, commonly Motion. shadcn/ui is optional, though if you already have it the buttons and inputs inside a block are worth swapping for yours so the interaction states stay consistent.

    Can I use these blocks in a Vite or Remix app instead of Next.js?

    Mostly yes. The only Next.js specific imports are next/image and next/link, which map onto an img tag and your router's link component. Anything marked with a use client directive can drop that line outside Next.js.

    Keep exploring

    Loved by thousands of people

    Here's what some of our users have to say about Aceternity UI.

    Featured by popular YouTubers

    See what the best YouTubers are saying about Aceternity UI.

    Video thumbnail
    Jeff from
    Fireship
    talks about how Aceternity UI can help you build awesome landing pages with speed
    Video thumbnail
    Watch
    Web Prodigies
    build an entire SaaS application from scratch with Aceternity UI
    Video thumbnail
    Josh from
    Josh Tried Coding
    talks about how Aceternity UI components can help your website stand out.
    Video thumbnail
    Watch
    Hitesh Choudhary
    build an entire website from scratch with Aceternity UI
    Video thumbnail
    Adrian from
    Adrian Twarog
    talks about Aceternity UI and how to use the components efficiently
    Video thumbnail
    Adrian from
    JavaScript Mastery
    creates an entire portfolio website with amazing details and beautiful UI with Aceternity UI
    Video thumbnail
    Watch
    Raj Talks Tech
    walk through Aceternity UI components and teaches how to incorporate them into your website

    ceternity UI

    Access an ever-growing collection of premium, meticulously crafted templates and Component Blocks.

    A product by Aceternity
    Building in public at @mannupaaji

    © 2026 Aceternity Labs LLC. All Rights Reserved.