[English](./README.md) | [简体中文](./README_zh.md)
<p align="center">
  <a href="https://github.com/moumen-soliman/uitripled">
    <img width="100" alt="UI TripleD Logo" src="https://iimydr2b8o.ufs.sh/f/Zqn6AViLMoTtl1pW0d6xiLckpa7VobAKthYDjBuwMy6zmGSe" />
  </a>
</p>

<h1 align="center">UI TripleD</h1>

<p align="center">
  <strong>Production-ready UI blocks, components, and full pages available in shadcn/ui and Base UI, powered by Framer Motion, with a Landing Builder, Background Builder, and Grid Generator.</strong>
</p>

<p align="center">

<br />
<a align="center" href="https://vercel.com/oss">
  <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge-2026.svg" />
</a>
<br />
<br />
  <a href="https://ui.tripled.work/components">Docs</a> ·
  <a href="https://github.com/moumen-soliman/uitripled/issues/new?template=bug_report.md">Report a bug</a> ·
  <a href="https://github.com/moumen-soliman/uitripled/issues/new?template=feature_request.md">Feature request</a> ·
</p>

<p align="center">
  <a href="LICENSE.md"><img src="https://img.shields.io/github/license/moumen-soliman/uitripled?label=license&logo=github" alt="License" /></a>
  <a href="https://github.com/moumen-soliman/uitripled/issues"><img src="https://img.shields.io/github/issues/moumen-soliman/uitripled" alt="Issues" /></a>
</p>

<img width="2800" alt="UI TripleD" src="https://iimydr2b8o.ufs.sh/f/Zqn6AViLMoTtmjnFn4EXoBagjvOt2MCq0xnsViJcwbWR4PEp" />

## Features

- **Production-Ready Components** - Carefully crafted UI components built with shadcn/ui & Framer Motion
- **Landing Builder** - Drag-and-drop shadcn/ui blocks to assemble full landing pages in seconds
- **Background Builder** - Shader-powered and animated Aurora backgrounds, fast to tweak and export
- **Grid Generator** - Compose complex Tailwind CSS grid layouts with just a few clicks
- **TypeScript Support** - Full type safety throughout

## Turbo Monorepo

- Managed with Turborepo and pnpm workspaces
- Run tasks via `turbo run <script>` (e.g., `pnpm dev --filter=uitripled-docs` for the docs app)
- Node.js 18+ is required

## Tech Stack

- [Turborepo](https://turbo.build/repo) + pnpm Workspaces
- [Next.js](https://nextjs.org) 16
- [React](https://react.dev) 19
- [TypeScript](https://www.typescriptlang.org)
- [Tailwind CSS](https://tailwindcss.com)
- [Framer Motion](https://www.framer.com/motion)
- [shadcn/ui](https://ui.shadcn.com)
- [Base UI](https://base-ui.com)
- [Radix UI](https://www.radix-ui.com)

## Sponsored by

<table align="center">
  <tr>
    <td align="center">
      <a href="https://vercel.com">
        <img width="70" height="70" alt="vercel" src="https://iimydr2b8o.ufs.sh/f/Zqn6AViLMoTtuqajWzprxyYW6bihoVlEHGRpePK59zqZ4DLQ" style="border-radius: 100%;" />
      </a>
      <br />
      <strong><a href="https://vercel.com">Vercel</a></strong>
    </td>
    <td align="center">
      <a href="https://shadcnstudio.com">
        <img width="70" height="70" alt="shadcn/studio" src="https://ts-assets.b-cdn.net/ss-assets/logo/logo.png" style="border-radius: 100%;" />
      </a>
      <br />
      <strong><a href="https://shadcnstudio.com">shadcn/studio</a></strong>
    </td>
    <td align="center">
      <a href="https://shadcncraft.com">
        <img width="70" height="70" alt="Shadcncraft" src="https://github.com/shadcncraft.png" style="border-radius: 100%;" />
      </a>
      <br />
      <strong><a href="https://shadcncraft.com">Shadcncraft</a></strong>
    </td>
  </tr>
  <tr>
    <td align="center">
      <a href="https://shadcnblocks.com">
        <img width="70" height="70" alt="ShadcnBlocks" src="https://github.com/shadcnblocks.png" style="border-radius: 100%;" />
      </a>
      <br />
      <strong><a href="https://shadcnblocks.com">Shadcnblocks.com</a></strong>
    </td>
    <td align="center">
      <a href="https://openpanel.dev">
        <img width="70" height="70" alt="OpenPanel" src="https://iimydr2b8o.ufs.sh/f/Zqn6AViLMoTtZSdcHpLMoTtqyenU7vkYSxEW4uPQlw3ps6NX" />
      </a>
      <br />
      <strong><a href="https://openpanel.dev">OpenPanel</a></strong>
    </td>
    <td align="center">
      <a href="https://lucide-animated.com">
        <img width="70" height="70" alt="Lucide Animated" src="apps/docs/public/logos/sponsors/lucide-animated.svg" />
      </a>
      <br />
      <strong><a href="https://lucide-animated.com">lucide-animated</a></strong>
    </td>
  </tr>
  <tr>
    <td align="center">
      <a href="https://reactbits.dev">
        <img width="70" height="70" alt="ReactBits" src="https://github.com/DavidHDev/react-bits/blob/main/public/android-chrome-192x192.png" style="border-radius: 100%;" />
      </a>
      <br />
      <strong><a href="https://reactbits.dev">ReactBits</a></strong>
    </td>
    <td align="center">
      <a href="https://shadcnspace.com">
        <img width="70" height="70" alt="shadcnspace" src="apps/docs/public/logos/sponsors/shadcnspace.webp" />
      </a>
      <br />
      <strong><a href="https://shadcnspace.com">shadcnspace</a></strong>
    </td>
    <td align="center">
      <a href="https://efferd.com">
        <img width="70" height="70" alt="efferd" src="apps/docs/public/logos/sponsors/efferd.png" />
      </a>
      <br />
      <strong><a href="https://efferd.com">Efferd</a></strong>
    </td>
  </tr>
  <tr>
    <td align="center">
      <a href="https://shoogle.dev">
        <img width="70" height="70" alt="shoogle" src="apps/docs/public/logos/sponsors/shoogle.jpg" />
      </a>
      <br />
      <strong><a href="https://shoogle.dev">Shoogle</a></strong>
    </td>
  </tr>
</table>


## Getting Started

Install dependencies:

```bash
pnpm install
```

Run the development server:

```bash
pnpm dev --filter=uitripled-docs
```

Open [http://localhost:3000](http://localhost:3000) in your browser.

## Usage

Browse components in the library, preview them, and copy the code directly into your project. Use the visual builder to customize components and see live previews. Try the specialized builders:

- `Landing Builder` for shadcn/ui landing pages
- `Background Builder` for shaders and animated Aurora backgrounds
- `Grid Generator` for Tailwind CSS grids

## Contributing

Contributions are welcome! Please read our [Contributing Guide](./CONTRIBUTING.md) before submitting pull requests.

## License

See [LICENSE](./LICENSE.md) for details.