Skip to content

Commit b982bf9

Browse files
ariflogsariflogs
committed
docs: vite installation guide
1 parent b1ea5c8 commit b982bf9

File tree

12 files changed

+471
-68
lines changed

12 files changed

+471
-68
lines changed

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ RetroUI is a retro-styled Tailwind CSS component library for modern web apps.
1414

1515
[MIT](./LICENCE.md)
1616

17-
<br />
1817
<br />
1918

2019
## Supported By

‎app/(marketing)/page.tsx‎

Lines changed: 41 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
Card,
99
Avatar,
1010
Badge,
11+
CommandDisplay,
1112
} from "@/components/retroui";
1213
import AccordionStyleDefault from "@/preview/components/accordion-style-default";
1314
import AlertStyleDefaultIcon from "@/preview/components/alert-style-with-icon";
@@ -74,12 +75,12 @@ export default async function Home() {
7475
</Text>
7576

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

82-
<div className="flex space-x-4">
83+
<div className="flex flex-col md:flex-row items-center gap-4">
8384
<Link href="/docs" passHref>
8485
<Button
8586
className="w-full"
@@ -88,15 +89,9 @@ export default async function Home() {
8889
Get Started
8990
</Button>
9091
</Link>
91-
<Link href="https://pro.retroui.dev/blocks" passHref>
92-
<Button
93-
className="w-full border-foreground text-foreground bg-background"
94-
variant="outline"
95-
aria-label="Get Started with RetroUI"
96-
>
97-
Browse Blocks
98-
</Button>
99-
</Link>
92+
<div className="w-full max-w-90 shadow shadow-primary">
93+
<CommandDisplay command='npx shadcn add "retroui.dev/r/button.json"' />
94+
</div>
10095
</div>
10196
</div>
10297
<div className="hidden lg:block lg:w-1/3">
@@ -112,8 +107,8 @@ export default async function Home() {
112107
</section>
113108
<section className="container max-w-6xl mx-auto px-4 lg:px-0 lg:my-36">
114109
{/* <Text as="h2" className="mb-16 text-center">
115-
Old school with modern twist! ✨
116-
</Text> */}
110+
Old school with modern twist! ✨
111+
</Text> */}
117112
<div className="grid gap-6 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 mb-8">
118113
<Card className="w-full bg-background shadow-none">
119114
<Card.Header>
@@ -216,7 +211,7 @@ export default async function Home() {
216211
Github Stars
217212
</Text>
218213
<Text className="text-outlined text-7xl lg:text-8xl font-head">
219-
350+
214+
500+
220215
</Text>
221216
<Image
222217
src="/images/shooting_star.svg"
@@ -395,58 +390,45 @@ export default async function Home() {
395390
</div>
396391
</section>
397392

398-
<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]">
393+
<section className="mx-auto px-4">
399394
<div className="container max-w-6xl h-full mx-auto py-16 flex flex-col justify-between gap-20">
400-
<div className="flex justify-between items-start mt-20">
401-
<div className="flex flex-col gap-10 items-start justify-start">
402-
<Text as="h2">
403-
Ship <span className="text-outlined">Faster</span> With Pro
404-
Blocks
395+
<div className="flex flex-col md:flex-row items-center gap-10">
396+
<div className="w-full md:w-3/5">
397+
<Text as="h1">
398+
Ship <span className="text-outlined">Faster</span> With Blocks
405399
<br />
406400
and Templates 🚀
407401
</Text>
408-
<div className="flex flex-col space-y-1 text-muted-foreground">
409-
<Text className="text-lg">
410-
- Based on the design foundation of RetroUI.
411-
</Text>
412-
<Text className="text-lg">
413-
- Over 50+ premium ready-to-use components.
414-
</Text>
415-
<Text className="text-lg">
416-
- Complete pre-built website templates.
417-
</Text>
418-
<Text className="text-lg">
419-
- Lifetime access to all future updates.
420-
</Text>
402+
<Text
403+
as="p"
404+
className="text-muted-foreground font-medium text-xl mt-2 mb-8"
405+
>
406+
Get access to 100+ premium blocks, templates and figma kit,
407+
ready to make your project stand out.
408+
</Text>
409+
410+
<div className="flex gap-3">
411+
<Link href="https://pro.retroui.dev/blocks" target="_blank">
412+
<Button>Explore Blocks</Button>
413+
</Link>
414+
<Link href="https://pro.retroui.dev/templates" target="_blank">
415+
<Button variant="secondary">Explore Templates</Button>
416+
</Link>
421417
</div>
422418
</div>
423-
<Link
424-
id="checkout-figma-kit"
425-
data-umami-event="checkout-figma-kit"
426-
href="https://dub.sh/retroui-pro"
427-
target="_blank"
428-
>
429-
<Button>Explore Blocks</Button>
430-
</Link>
431-
</div>
432-
<div className="">
433-
<Image
434-
src="/images/retro_pro_blocks.png"
435-
width={1920}
436-
height={1080}
437-
alt="retroui code showcase"
438-
className="hidden dark:block"
439-
/>
440-
<Image
441-
src="/images/retro_pro_blocks_w.png"
442-
width={1920}
443-
height={1080}
444-
alt="retroui code showcase"
445-
className="block dark:hidden"
446-
/>
419+
420+
<div className="w-full md:w-2/5">
421+
<Image
422+
src="/images/pro_showcase.svg"
423+
width={1920}
424+
height={1080}
425+
alt="retroui code showcase"
426+
/>
427+
</div>
447428
</div>
448429
</div>
449430
</section>
431+
450432
<footer className="bg-black py-8">
451433
<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">
452434
<div className="flex justify-center space-x-4">

‎app/components/command-display.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { ClipboardIcon, CheckIcon } from "lucide-react";
2+
import { useState } from "react";
3+
4+
interface CommandDisplayProps {
5+
command: string;
6+
}
7+
8+
export function CommandDisplay({ command }: CommandDisplayProps) {
9+
const [copied, setCopied] = useState(false);
10+
11+
const copyToClipboard = async () => {
12+
try {
13+
await navigator.clipboard.writeText(command);
14+
setCopied(true);
15+
setTimeout(() => setCopied(false), 2000);
16+
} catch (err) {
17+
console.error("Failed to copy text: ", err);
18+
}
19+
};
20+
21+
return (
22+
<div className="relative group flex items-center bg-black/90 rounded-lg px-4 py-2 font-mono text-sm">
23+
<div className="flex-1 text-primary">
24+
<span className="text-blue-400">npx</span>{" "}
25+
<span className="text-yellow-400">shadcn@latest</span>{" "}
26+
<span className="text-green-400">add</span>{" "}
27+
<span className="text-purple-400">
28+
"https://retroui.dev/r/button.json"
29+
</span>
30+
</div>
31+
<button
32+
onClick={copyToClipboard}
33+
className="ml-2 p-1 text-gray-400 hover:text-white transition-colors"
34+
aria-label="Copy command"
35+
>
36+
{copied ? (
37+
<CheckIcon className="h-4 w-4 text-green-400" />
38+
) : (
39+
<ClipboardIcon className="h-4 w-4" />
40+
)}
41+
</button>
42+
</div>
43+
);
44+
}

‎app/global.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
--destructive: #e63946;
5252
--destructive-foreground: #fff;
5353
--border: #000;
54-
--background-image: url('/images/banner_void_2.svg');
54+
--background-image: url("/images/banner_void_2.svg");
5555
}
5656
.dark {
5757
--background: #000000;
@@ -70,10 +70,10 @@
7070
--destructive: #e63946;
7171
--destructive-foreground: #fff;
7272
--border: #eee;
73-
--background-image: url('/images/bg_void_3.png');
73+
--background-image: url("/images/bg_void_3.png");
7474
}
7575

76-
.bg-image{
76+
.bg-image {
7777
background-image: var(--background-image);
7878
background-size: cover;
7979
background-position: center;

‎components/TopNav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@ export default function TopNav() {
6262
className="text-black font-head text-2xl flex items-end"
6363
>
6464
<Image
65-
src="/images/logo_full.png"
65+
src="/images/logo.png"
6666
alt="retro ui logo"
6767
className="mr-2"
6868
height={30}
69-
width={60}
69+
width={30}
7070
/>
7171
<div className="text-foreground">RetroUI</div>
7272
</a>

‎components/retroui/CommandDisplay.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
"use client";
2+
3+
import { ClipboardIcon, CheckIcon } from "lucide-react";
4+
import { useState } from "react";
5+
6+
interface CommandDisplayProps {
7+
command: string;
8+
}
9+
10+
export function CommandDisplay({ command }: CommandDisplayProps) {
11+
const [copied, setCopied] = useState(false);
12+
13+
const copyToClipboard = async () => {
14+
try {
15+
await navigator.clipboard.writeText(command);
16+
setCopied(true);
17+
setTimeout(() => setCopied(false), 2000);
18+
} catch (err) {
19+
console.error("Failed to copy text: ", err);
20+
}
21+
};
22+
23+
// Split the command into parts for syntax highlighting
24+
const parts = command.split(" ").map((part, index) => {
25+
if (index === 0)
26+
return (
27+
<span key={index} className="text-blue-300">
28+
{part}
29+
</span>
30+
);
31+
if (index === 1)
32+
return (
33+
<span key={index} className="text-yellow-300">
34+
{part}
35+
</span>
36+
);
37+
if (index === 2)
38+
return (
39+
<span key={index} className="text-green-300">
40+
{part}
41+
</span>
42+
);
43+
return (
44+
<span key={index} className="text-purple-300">
45+
{part}
46+
</span>
47+
);
48+
});
49+
50+
return (
51+
<div className="relative group flex items-center bg-black/90 pl-4 py-2 font-mono text-xs">
52+
<div className="flex-1 whitespace-nowrap overflow-hidden">
53+
<div className="overflow-hidden text-ellipsis">
54+
{parts.map((part, index) => (
55+
<span key={`part-${index}`}>
56+
{part}
57+
{index < parts.length - 1 && " "}
58+
</span>
59+
))}
60+
</div>
61+
</div>
62+
<button
63+
onClick={copyToClipboard}
64+
className="mr-2 p-1 shrink-0 text-gray-400 hover:text-white transition-colors"
65+
aria-label="Copy command"
66+
>
67+
{copied ? (
68+
<CheckIcon className="h-4 w-4 text-green-400" />
69+
) : (
70+
<ClipboardIcon className="h-4 w-4" />
71+
)}
72+
</button>
73+
</div>
74+
);
75+
}

‎components/retroui/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ export * from "./Toggle";
2222
export * from "./ToggleGroup";
2323
export * from "./Sonner";
2424
export * from "./Tooltip";
25-
export * from "./Breadcrumb";
25+
export * from "./Breadcrumb";
26+
export * from "./CommandDisplay";

‎content/docs/index.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,20 @@ Follow the [Installation Guide](/docs/install) to get started.
3333
allowfullscreen
3434
></iframe>
3535
</div>
36+
37+
<br />
38+
<br />
39+
<br />
40+
41+
<div className="max-w-xl">
42+
<iframe
43+
width="100%"
44+
height="300px"
45+
src="https://www.youtube.com/embed/t1a0IH-KAkw?si=yvUevTYbxloSFMJm"
46+
title="YouTube video player"
47+
frameborder="0"
48+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
49+
referrerpolicy="strict-origin-when-cross-origin"
50+
allowfullscreen
51+
></iframe>
52+
</div>

‎content/docs/install/index.mdx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Installation
33
description: This guide will help you get started with RetroUI.
4-
lastUpdated: 1 Mar, 2024
4+
lastUpdated: 30 May, 2025
55
---
66

77
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...
@@ -26,12 +26,13 @@ RetroUI is meant to be compatible with all major `React` frameworks. But for now
2626
</Card>
2727

2828
<Card>
29+
<Link href="/docs/install/vite">
2930
<Card.Header className="flex items-center justify-center space-y-4 py-8">
3031
<Image src="/images/logos/vite.png" alt="vite logo" height={50} width={50} />
3132
<div className="flex items-center space-x-2">
3233
<Card.Description className="text-xl">Vite</Card.Description>
33-
<Badge size="sm">Coming soon</Badge>
3434
</div>
3535
</Card.Header>
36+
</Link>
3637
</Card>
3738
</div>

‎content/docs/install/nextjs.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,3 +185,5 @@ Save your theme as CSS variables in `global.css`:
185185
```
186186

187187
<br />
188+
189+
If you need any additional help, you can feel free to ask it in our Discord community.

0 commit comments

Comments
 (0)