Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ RetroUI is a retro-styled Tailwind CSS component library for modern web apps.

[MIT](./LICENCE.md)

<br />
<br />

## Supported By
Expand Down
100 changes: 41 additions & 59 deletions app/(marketing)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Card,
Avatar,
Badge,
CommandDisplay,
} from "@/components/retroui";
import AccordionStyleDefault from "@/preview/components/accordion-style-default";
import AlertStyleDefaultIcon from "@/preview/components/alert-style-with-icon";
Expand Down Expand Up @@ -74,12 +75,12 @@ export default async function Home() {
</Text>

<p className="text-lg text-muted-foreground mb-8 mt-4">
Retro styled component library based on React and TailwindCSS.
Comes with 40+ free UI components that you can just copy paste
into your projects.
React and TailwindCSS based UI library built for making unique and
modern looking web applications. Perfect for any project using
Shadcn/ui.
</p>

<div className="flex space-x-4">
<div className="flex flex-col md:flex-row items-center gap-4">
<Link href="/docs" passHref>
<Button
className="w-full"
Expand All @@ -88,15 +89,9 @@ export default async function Home() {
Get Started
</Button>
</Link>
<Link href="https://pro.retroui.dev/blocks" passHref>
<Button
className="w-full border-foreground text-foreground bg-background"
variant="outline"
aria-label="Get Started with RetroUI"
>
Browse Blocks
</Button>
</Link>
<div className="w-full max-w-90 shadow shadow-primary">
<CommandDisplay command='npx shadcn add "retroui.dev/r/button.json"' />
</div>
</div>
</div>
<div className="hidden lg:block lg:w-1/3">
Expand All @@ -112,8 +107,8 @@ export default async function Home() {
</section>
<section className="container max-w-6xl mx-auto px-4 lg:px-0 lg:my-36">
{/* <Text as="h2" className="mb-16 text-center">
Old school with modern twist! ✨
</Text> */}
Old school with modern twist! ✨
</Text> */}
<div className="grid gap-6 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 mb-8">
<Card className="w-full bg-background shadow-none">
<Card.Header>
Expand Down Expand Up @@ -216,7 +211,7 @@ export default async function Home() {
Github Stars
</Text>
<Text className="text-outlined text-7xl lg:text-8xl font-head">
350+
500+
</Text>
<Image
src="/images/shooting_star.svg"
Expand Down Expand Up @@ -395,58 +390,45 @@ export default async function Home() {
</div>
</section>

<section className="min-h-[50rem] mx-auto px-4 bg-[url('/images/retro_pro_bg_w.jpeg')] dark:bg-[url('/images/retro_pro_bg.jpeg')] bg-cover bg-no-repeat bg-size-[80% auto]">
<section className="mx-auto px-4">
<div className="container max-w-6xl h-full mx-auto py-16 flex flex-col justify-between gap-20">
<div className="flex justify-between items-start mt-20">
<div className="flex flex-col gap-10 items-start justify-start">
<Text as="h2">
Ship <span className="text-outlined">Faster</span> With Pro
Blocks
<div className="flex flex-col md:flex-row items-center gap-10">
<div className="w-full md:w-3/5">
<Text as="h1">
Ship <span className="text-outlined">Faster</span> With Blocks
<br />
and Templates 🚀
</Text>
<div className="flex flex-col space-y-1 text-muted-foreground">
<Text className="text-lg">
- Based on the design foundation of RetroUI.
</Text>
<Text className="text-lg">
- Over 50+ premium ready-to-use components.
</Text>
<Text className="text-lg">
- Complete pre-built website templates.
</Text>
<Text className="text-lg">
- Lifetime access to all future updates.
</Text>
<Text
as="p"
className="text-muted-foreground font-medium text-xl mt-2 mb-8"
>
Get access to 100+ premium blocks, templates and figma kit,
ready to make your project stand out.
</Text>

<div className="flex gap-3">
<Link href="https://pro.retroui.dev/blocks" target="_blank">
<Button>Explore Blocks</Button>
</Link>
<Link href="https://pro.retroui.dev/templates" target="_blank">
<Button variant="secondary">Explore Templates</Button>
</Link>
</div>
</div>
<Link
id="checkout-figma-kit"
data-umami-event="checkout-figma-kit"
href="https://dub.sh/retroui-pro"
target="_blank"
>
<Button>Explore Blocks</Button>
</Link>
</div>
<div className="">
<Image
src="/images/retro_pro_blocks.png"
width={1920}
height={1080}
alt="retroui code showcase"
className="hidden dark:block"
/>
<Image
src="/images/retro_pro_blocks_w.png"
width={1920}
height={1080}
alt="retroui code showcase"
className="block dark:hidden"
/>

<div className="w-full md:w-2/5">
<Image
src="/images/pro_showcase.svg"
width={1920}
height={1080}
alt="retroui code showcase"
/>
</div>
</div>
</div>
</section>

<footer className="bg-black py-8">
<div className="container max-w-6xl mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 justify-between items-center">
<div className="flex justify-center space-x-4">
Expand Down
6 changes: 3 additions & 3 deletions app/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
--destructive: #e63946;
--destructive-foreground: #fff;
--border: #000;
--background-image: url('/images/banner_void_2.svg');
--background-image: url("/images/banner_void_2.svg");
}
.dark {
--background: #000000;
Expand All @@ -70,10 +70,10 @@
--destructive: #e63946;
--destructive-foreground: #fff;
--border: #eee;
--background-image: url('/images/bg_void_3.png');
--background-image: url("/images/bg_void_3.png");
}

.bg-image{
.bg-image {
background-image: var(--background-image);
background-size: cover;
background-position: center;
Expand Down
4 changes: 2 additions & 2 deletions components/TopNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@ export default function TopNav() {
className="text-black font-head text-2xl flex items-end"
>
<Image
src="/images/logo_full.png"
src="/images/logo.png"
alt="retro ui logo"
className="mr-2"
height={30}
width={60}
width={30}
/>
<div className="text-foreground">RetroUI</div>
</a>
Expand Down
65 changes: 65 additions & 0 deletions components/retroui/CommandDisplay.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
"use client";

import { ClipboardIcon, CheckIcon } from "lucide-react";
import { useState } from "react";

interface CommandDisplayProps {
command: string;
}

export function CommandDisplay({ command }: CommandDisplayProps) {
const [copied, setCopied] = useState(false);

const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(command);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error("Failed to copy text: ", err);
}
};

const defaultColors = [
"text-blue-300",
"text-yellow-300",
"text-green-300",
"text-purple-300",
];

// Split the command into parts for syntax highlighting
const parts = command.split(" ").map((part, index) => {
const color = defaultColors[index % defaultColors.length];
return (
<span key={index} className={color}>
{part}
</span>
);
});

return (
<div className="relative group flex items-center bg-black/90 pl-4 py-2 font-mono text-xs">
<div className="flex-1 whitespace-nowrap overflow-hidden">
<div className="overflow-hidden text-ellipsis">
{parts.map((part, index) => (
<span key={`part-${index}`}>
{part}
{index < parts.length - 1 && " "}
</span>
))}
</div>
</div>
<button
onClick={copyToClipboard}
className="mr-2 p-1 shrink-0 text-gray-400 hover:text-white transition-colors"
aria-label="Copy command"
>
{copied ? (
<CheckIcon className="h-4 w-4 text-green-400" />
) : (
<ClipboardIcon className="h-4 w-4" />
)}
</button>
</div>
);
}
3 changes: 2 additions & 1 deletion components/retroui/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@ export * from "./Toggle";
export * from "./ToggleGroup";
export * from "./Sonner";
export * from "./Tooltip";
export * from "./Breadcrumb";
export * from "./Breadcrumb";
export * from "./CommandDisplay";
17 changes: 17 additions & 0 deletions content/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,20 @@ Follow the [Installation Guide](/docs/install) to get started.
allowfullscreen
></iframe>
</div>

<br />
<br />
<br />

<div className="max-w-xl">
<iframe
width="100%"
height="300px"
src="https://www.youtube.com/embed/t1a0IH-KAkw?si=yvUevTYbxloSFMJm"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
Comment on lines +41 to +52
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix iframe attribute casing for React/MDX
In MDX (JSX), DOM attributes must be camelCase. Update the new iframe block accordingly:

- frameborder="0"
- referrerpolicy="strict-origin-when-cross-origin"
- allowfullscreen
+ frameBorder="0"
+ referrerPolicy="strict-origin-when-cross-origin"
+ allowFullScreen

Also verify both video embeds are responsive and styled consistently.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="max-w-xl">
<iframe
width="100%"
height="300px"
src="https://www.youtube.com/embed/t1a0IH-KAkw?si=yvUevTYbxloSFMJm"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div className="max-w-xl">
<iframe
width="100%"
height="300px"
src="https://www.youtube.com/embed/t1a0IH-KAkw?si=yvUevTYbxloSFMJm"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
></iframe>
</div>
🤖 Prompt for AI Agents
In content/docs/index.mdx around lines 41 to 52, the iframe attributes use HTML
casing instead of React/MDX camelCase. Change frameborder to frameBorder,
referrerpolicy to referrerPolicy, and allowfullscreen to allowFullScreen.
Additionally, ensure both video iframes have consistent responsive styling, such
as using width 100% and appropriate height, and matching container classes for
uniform appearance.

5 changes: 3 additions & 2 deletions content/docs/install/index.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Installation
description: This guide will help you get started with RetroUI.
lastUpdated: 1 Mar, 2024
lastUpdated: 30 May, 2025
---

RetroUI is meant to be compatible with all major `React` frameworks. But for now we are primarily working on `Next.js` , documentation for other frameworks will be live soon...
Expand All @@ -26,12 +26,13 @@ RetroUI is meant to be compatible with all major `React` frameworks. But for now
</Card>

<Card>
<Link href="/docs/install/vite">
<Card.Header className="flex items-center justify-center space-y-4 py-8">
<Image src="/images/logos/vite.png" alt="vite logo" height={50} width={50} />
<div className="flex items-center space-x-2">
<Card.Description className="text-xl">Vite</Card.Description>
<Badge size="sm">Coming soon</Badge>
</div>
</Card.Header>
</Link>
</Card>
</div>
2 changes: 2 additions & 0 deletions content/docs/install/nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -185,3 +185,5 @@ Save your theme as CSS variables in `global.css`:
```

<br />

If you need any additional help, you can feel free to ask it in our Discord community.
Loading