UIWorld
by Alltechzone

Docs

How to use UI World

Three minutes of setup, then every block on this site is a paste away. Works with Next.js, Vite, Remix, Astro with React, anything that runs React 18+ and Tailwind v4.

1Install the two helper packages

Most blocks animate with motion and use lucide-react icons. clsx and tailwind-merge power the tiny cn() helper.

npm i motion lucide-react clsx tailwind-merge

2Add the design tokens to your global CSS

Blocks use semantic classes like bg-background, text-muted-foreground and bg-brand. Paste this once into your globals.css and change the colours to yours. If you tick “bake colours” in the theme panel, the brand classes are replaced with literal hex on copy, so you can even skip --brand.

38 lines
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-card: var(--card);
  --color-border: var(--border);
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
  --color-accent: var(--accent);
  --animate-marquee: marquee 40s linear infinite;
  --animate-shimmer: shimmer 2.5s linear infinite;
  --animate-aurora: aurora 18s ease-in-out infinite alternate;
  --animate-float: float 6s ease-in-out infinite;
  --animate-spin-slow: spin 12s linear infinite;
}

:root {
  --background: #fafafa; --foreground: #0b0c10; --muted: #f1f1f3; --muted-foreground: #5f6470;
  --card: #ffffff; --border: #e6e7eb; --brand: #ff7a2f; --brand-foreground: #1a0a02; --accent: #0ea5b7;
}
.dark {
  --background: #07080c; --foreground: #f3f4f6; --muted: #101218; --muted-foreground: #9aa0ad;
  --card: #0d0f15; --border: #1c1f29;
}

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes aurora {
  0% { transform: translate(-10%, -10%) rotate(0deg) scale(1); }
  50% { transform: translate(10%, 5%) rotate(20deg) scale(1.15); }
  100% { transform: translate(-5%, 10%) rotate(-10deg) scale(1.05); }
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
* { border-color: var(--border); }

3Create the cn() helper

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

4Copy a block and drop it in

Open any section, set your theme, hit Copy. Save it as a file in your components folder and import it.

// app/page.tsx
import HeroAurora from "@/components/hero-aurora";

export default function Page() {
  return <HeroAurora />;
}

5Or skip the code entirely

Choose Copy as AI prompt and paste into Cursor, Claude, v0, Lovable or Bolt. The prompt carries the component, the tokens it needs and instructions to swap the copy for your business. Copy HTML gives a static page using the Tailwind CDN, handy for landing page builders, email-safe it is not.

Licence

Everything on UI World is released under the MIT licence. Use it in client work, products, templates you sell, whatever you like. Attribution is welcome but not required. The only thing you cannot do is republish the library itself as a competing collection.

Requests and bugs

Need a section that is not here? Tell us at alltechzone.au or message @alltechzone. Popular requests get built and added for everyone.

Start browsing