Tools· Design & Creative

    Launch UI

    Component library for landing pages and marketing sections built on React, Next.js, and Tailwind, directly compatible with shadcn/ui and Radix, with full code ownership in your own project instead of a page-builder subscription.

    designingexecutableFreemium

    Description

    Strengths

    shadcn and Radix compatibility
    The components build on the same primitives and the same registry CLI as shadcn/ui, so they fit into existing shadcn projects without friction.
    Hand-crafted rather than automatically generated
    The provider positions every block as individually designed rather than AI-generated, to stand out from generic layouts.
    Full code ownership
    The code lands permanently inside your own project, with no ongoing subscription or lock-in to an external platform.
    Separation of content and presentation
    Data sits apart from the components and can be edited in seconds or connected to an existing CMS.
    One stack for website and product
    Since the marketing site and the product can use the same technologies, there is no second codebase or extra interface between the two.

    Assessment

    AI features

    • Deliberately designed without AI generation The provider highlights that every block is hand-crafted rather than generated by AI, to achieve a look that stands apart from generic AI layouts.
    • Also aimed at AI products The sections are, according to the provider, intended among other things for landing pages of SaaS, dev-tool, and AI products.
    • No generative animation layer Motion runs exclusively through pre-built CSS animations rather than a generative animation tool, consistent with the library's hand-crafted rather than AI-generated positioning.

    Suitable for

    • Teams with an existing React, Next.js, Tailwind, or shadcn stack who want to assemble finished marketing sections quickly
    • Early-stage products, startups, indie hackers, and personal projects, which the provider names directly as its target audience
    • Products whose marketing site should run in the same repository and framework as the product itself, to avoid a separate codebase and an additional interface
    • Less suitable for Less suitable for projects outside a React or shadcn stack, or for landing pages that rely on elaborate, generative motion effects rather than restrained CSS animation

    Limitations and notes

    • shadcn and Radix baseline required Without a project already initialized with shadcn/ui, Launch UI cannot be used directly; the target project first needs to be prepared with `npx shadcn@latest init`.
    • Free core is limited According to the provider, only eight section families, one website template, and four animations are free; more extensive blocks such as bento layouts, social proof, tabs, carousels, and testimonials are available only in the paid Pro package.
    • React and Next.js stack only The library targets React 19.2, Next.js 16.2, and Tailwind v4.2, with a separate branch for Tailwind v3; it is not built for non-React targets.
    • No animation framework included Motion runs exclusively through CSS animations from the tw-animate-css add-on library; framer-motion or comparable JavaScript animation frameworks are not part of the package.
    • Testimonials on the homepage are placeholders The quotes shown on the provider's website are, by the provider's own label, invented sample data to preview the social-proof component, not real customer statements.

    Quick start

    1. Check whether the target project already has shadcn/ui and Tailwind initialized; otherwise prepare it with `npx shadcn@latest init`.
    2. Add a section through the shadcn registry CLI, for example `npx shadcn@latest add @launchui/hero` or directly by URL with `npx shadcn@latest add https://launchuicomponents.com/r/<component>`.
    3. Install the dependencies `lucide-react`, `next-themes`, and `tw-animate-css` if they are not already present.
    4. Add further sections such as Pricing, CTA, FAQ, Stats, Logos, Navbar, and Footer the same way and assemble them into a page.
    5. Adjust color and design tokens through the existing shadcn CSS variables to match your own brand.

    Tips

    • For Tailwind v3 projects, use the repository's separate `tailwind-3` branch instead of the default version.
    • Before adding a section, check whether it belongs to the free core or to the paid Pro package, to avoid budgeting mistakes.
    • Component data is separated from presentation, so content can be changed in seconds or connected to an existing CMS.
    • Despite the restrained default style, deliberately adjust hierarchy, spacing, and typography to your own brand instead of using the defaults unchanged.

    Access

    Last reviewed: · Pricing, plans and features are a snapshot in time. Check the provider's own page before deciding.

    In the workshop this becomes your method.

    Whoever sees this process run once wants the agent behind it next. We build that in the workshop From Process to Agent.

    View workshops

    Related resources

    Browse all resources

    Conversation, not pitch

    Understand first, then decide. We take time for an initial conversation, without sales pressure, without obligation.

    Schedule a call