# Kairo UI

A free, open-source library of MIT-licensed Next.js landing page templates built with Tailwind CSS v4 and React 19.

## What this site is
Kairo UI provides free landing page templates that developers can install directly into their Next.js projects using the shadcn CLI. No signup, no paywalls. All templates are MIT-licensed.

## Templates

- [Endless](https://www.kairoui.online/template/endless): A dark AI design tool landing page with macbook dashboard, feature cards, pricing, and code showcase.
- [Triggerly](https://www.kairoui.online/template/triggerly): A Linear-inspired dark landing page with 3D dashboard mockup, AI agents integration showcase, project timeline visualization, workflow carousel, and feature cards. Built with Motion and Tailwind CSS v4.
- [Xero](https://www.kairoui.online/template/xero): A dark SaaS landing page for a data encryption platform with animated beam hero, features, showcase, pricing, FAQ, and testimonials.
- [Essentials](https://www.kairoui.online/template/essentials): A light e-commerce landing page for an apparel store with full-screen hero, featured products, shop-by-category grid, and CTA.
- [Nova](https://www.kairoui.online/template/nova): A premium SaaS landing page with hero, features, content, pricing, and FAQ sections.
- [Orbit](https://www.kairoui.online/template/orbit): Modern SaaS landing page template with global reach visualization.
- [Popcorn](https://www.kairoui.online/template/popcorn): A clean, modern landing page for global services with coverage map, features, and testimonials.
- [Lumina](https://www.kairoui.online/template/lumina): A white + indigo SaaS automation landing page with frosted-glass dashboard preview, logo marquee, features grid, agent feed, stats, testimonials, pricing, FAQ, and footer.
- [Nixole](https://www.kairoui.online/template/nixole): An AI healthcare landing page with mesh gradient hero, animated showcase card, and floating glass sections for patient conversion.
- [Aurora](https://www.kairoui.online/template/aurora): A premium dark-mode SaaS landing page with video hero, marquee logo cloud, feature grid, how-it-works steps, studio showcase, testimonials, and pricing.
- [Glaze](https://www.kairoui.online/template/glaze): A sleek, dark-themed landing page with glassmorphism effects.
- [Nexto](https://www.kairoui.online/template/nexto): A studio agency landing page with hero, logos strip, services grid, showcase, stats, process steps, testimonial, CTA, and footer.
- [Nexora](https://www.kairoui.online/template/nexora): An AI image generation landing page with hero, core features, how it works, pricing, and footer sections.

## Install any template
```
bunx shadcn add https://www.kairoui.online/r/<slug>.json
```

## After installing (required for images)
Templates load images from external hosts with the Next.js Image component. Add these remote patterns to the images config in your next.config.ts or images fail with an "Invalid src prop" error:

```ts
images: {
  remotePatterns: [
    { protocol: "https", hostname: "images.unsplash.com" },
    { protocol: "https", hostname: "i.postimg.cc" },
    { protocol: "https", hostname: "cdn.prod.website-files.com" },
    { protocol: "https", hostname: "picsum.photos" },
    { protocol: "https", hostname: "pub-f170a2592d2c4a1485466404c36807be.r2.dev" },
    { protocol: "https", hostname: "qclay.design" },
  ],
},
```

## Technical details
- Framework: Next.js 16 with React 19
- Styling: Tailwind CSS v4
- Install method: shadcn CLI registry
- License: MIT

## Creator
Abdul Rahman Asif — @abdurahmanasif on Twitter/X