admin/nanocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
Ubuntu
2026-07-03 16:58:28 +08:00
commit 32b43f85bd
6240 changed files with 1987678 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
RetroUI/preview/components/accordion-style-default.tsx
+28
View File
@@ -0,0 +1,28 @@
"use client";
import { Accordion } from "@/components/retroui/Accordion";
export default function AccordionStyleDefault() {
return (
<Accordion type="single" collapsible className="space-y-4 w-full">
<Accordion.Item value="item-1">
<Accordion.Header>Accordion Item 1</Accordion.Header>
<Accordion.Content>
This is the content of the first accordion item.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Header>Accordion Item 2</Accordion.Header>
<Accordion.Content>
This is the content of the second accordion item.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Header>Accordion Item 3</Accordion.Header>
<Accordion.Content>
This is the content of the third accordion item.
</Accordion.Content>
</Accordion.Item>
</Accordion>
);
}
RetroUI/preview/components/alert-style-all-status.tsx
+25
View File
@@ -0,0 +1,25 @@
import { Alert } from "@/components/retroui/Alert";
import { CheckCircle, InfoIcon, XIcon } from "lucide-react";
export default function AlertAllStatus() {
return (
<div className="space-y-4">
<Alert status="success" className="flex items-center">
<CheckCircle className="h-4 w-4 mr-4" />
<Alert.Title>This is a success alert!</Alert.Title>
</Alert>
<Alert status="info" className="flex items-center">
<InfoIcon className="h-4 w-4 mr-4" />
<Alert.Title>This is an info alert!</Alert.Title>
</Alert>
<Alert status="error" className="flex items-center">
<XIcon className="h-4 w-4 mr-4" />
<Alert.Title>This is an error alert!</Alert.Title>
</Alert>
<Alert status="warning" className="flex items-center">
<InfoIcon className="h-4 w-4 mr-4" />
<Alert.Title>This is an error alert!</Alert.Title>
</Alert>
</div>
);
}
RetroUI/preview/components/alert-style-default.tsx
+12
View File
@@ -0,0 +1,12 @@
import { Alert } from "@/components/retroui/Alert";
export default function AlertStyleDefault() {
return (
<Alert>
<Alert.Title>Heads up!</Alert.Title>
<Alert.Description>
This is where you can write description that no one reads...
</Alert.Description>
</Alert>
);
}
RetroUI/preview/components/alert-style-solid.tsx
+12
View File
@@ -0,0 +1,12 @@
import { Alert } from "@/components/retroui/Alert";
export default function AlertStyleDefault() {
return (
<Alert variant="solid">
<Alert.Title>Heads up!</Alert.Title>
<Alert.Description>
This is where you can write description that no one reads...
</Alert.Description>
</Alert>
);
}
RetroUI/preview/components/alert-style-with-icon.tsx
+16
View File
@@ -0,0 +1,16 @@
import { Alert } from "@/components/retroui/Alert";
import { CheckCircle } from "lucide-react";
export default function AlertStyleDefaultIcon() {
return (
<Alert className="flex">
<CheckCircle className="h-5 w-5 mr-4 mt-2" />
<div>
<Alert.Title>Heads up!</Alert.Title>
<Alert.Description>
This is where you can write description that no one reads...
</Alert.Description>
</div>
</Alert>
);
}
RetroUI/preview/components/avatar-style-circle-fallbacks.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Avatar } from "@/components/retroui/Avatar";
export default function AvatarStyleFallback() {
return (
<Avatar>
<Avatar.Image src="broken-link" alt="Arif Logs" />
<Avatar.Fallback>AH</Avatar.Fallback>
</Avatar>
);
}
RetroUI/preview/components/avatar-style-circle-sizes.tsx
+20
View File
@@ -0,0 +1,20 @@
import { Avatar } from "@/components/retroui/Avatar";
export default function AvatarStyleCircleSizes() {
return (
<div className="flex items-center space-x-4">
<Avatar>
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
<Avatar.Fallback>AH</Avatar.Fallback>
</Avatar>
<Avatar className="h-16 w-16">
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
<Avatar.Fallback>AH</Avatar.Fallback>
</Avatar>
<Avatar className="h-20 w-20">
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
<Avatar.Fallback>AH</Avatar.Fallback>
</Avatar>
</div>
);
}
RetroUI/preview/components/avatar-style-circle.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Avatar } from "@/components/retroui/Avatar";
export default function AvatarStyleCircle() {
return (
<Avatar>
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
<Avatar.Fallback>AH</Avatar.Fallback>
</Avatar>
);
}
RetroUI/preview/components/badge-style-default.tsx
+5
View File
@@ -0,0 +1,5 @@
import { Badge } from "@/components/retroui/Badge";
export default function BadgeStyleDefault() {
return <Badge>Default Badge</Badge>;
}
RetroUI/preview/components/badge-style-rounded.tsx
+14
View File
@@ -0,0 +1,14 @@
import { Badge } from "@/components/retroui/Badge";
export default function BadgeStyleRounded() {
return (
<div className="space-x-4">
<Badge variant="solid" className="rounded-sm">
Rounded
</Badge>
<Badge variant="solid" className="rounded-full">
Full
</Badge>
</div>
);
}
RetroUI/preview/components/badge-style-sizes.tsx
+11
View File
@@ -0,0 +1,11 @@
import { Badge } from "@/components/retroui/Badge";
export default function BadgeStyleVariants() {
return (
<div className="space-x-4">
<Badge size="sm">small</Badge>
<Badge>medium</Badge>
<Badge size="lg">large</Badge>
</div>
);
}
RetroUI/preview/components/badge-style-variants.tsx
+12
View File
@@ -0,0 +1,12 @@
import { Badge } from "@/components/retroui/Badge";
export default function BadgeStyleVariants() {
return (
<div className="flex flex-wrap gap-4">
<Badge>Default</Badge>
<Badge variant="outline">Outlined</Badge>
<Badge variant="solid">Solid</Badge>
<Badge variant="surface">Surface</Badge>
</div>
);
}
RetroUI/preview/components/breadcrumb-custom-separator.tsx
+26
View File
@@ -0,0 +1,26 @@
import { Breadcrumb } from "@/components/retroui/Breadcrumb";
import { Slash } from "lucide-react";
export default function BreadcrumbCustomSeparator() {
return (
<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<Slash />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<Slash />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
);
}
RetroUI/preview/components/breadcrumb-link-component.tsx
+27
View File
@@ -0,0 +1,27 @@
import Link from "next/link"
import { Breadcrumb } from "@/components/retroui/Breadcrumb"
export default function BreadcrumbLinkComponent() {
return (
<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link asChild>
<Link href="/">Home</Link>
</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link asChild>
<Link href="/docs/components">Components</Link>
</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
)
}
RetroUI/preview/components/breadcrumb-style-collapsed.tsx
+30
View File
@@ -0,0 +1,30 @@
import Link from "next/link"
import { Breadcrumb } from "@/components/retroui/Breadcrumb";
export default function BreadcrumbCollapsed() {
return (
<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link asChild>
<Link href="/">Home</Link>
</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Item>
<Breadcrumb.Ellipsis />
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link asChild>
<Link href="/docs/components">Components</Link>
</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
)
}
RetroUI/preview/components/breadcrumb-style-default.tsx
+21
View File
@@ -0,0 +1,21 @@
import { Breadcrumb } from "@/components/retroui/Breadcrumb";
export default function BreadcrumbStyleDefault() {
return (
<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
);
}
RetroUI/preview/components/button-style-default.tsx
+5
View File
@@ -0,0 +1,5 @@
import { Button } from "@/components/retroui/Button";
export default function ButtonStyleDefault() {
return <Button>Click Me!</Button>;
}
RetroUI/preview/components/button-style-icon.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Button } from "@/components/retroui/Button";
import { PenIcon } from "lucide-react";
export default function ButtonStyleIcon() {
return (
<Button size="icon">
<PenIcon className="w-4 h-4" />
</Button>
);
}
RetroUI/preview/components/button-style-link.tsx
+5
View File
@@ -0,0 +1,5 @@
import { Button } from "@/components/retroui/Button";
export default function ButtonStyleLink() {
return <Button variant="link">Click Me!</Button>;
}
RetroUI/preview/components/button-style-outline.tsx
+5
View File
@@ -0,0 +1,5 @@
import { Button } from "@/components/retroui/Button";
export default function ButtonStyleOutline() {
return <Button variant="outline">Click Me!</Button>;
}
RetroUI/preview/components/button-style-secondary.tsx
+5
View File
@@ -0,0 +1,5 @@
import { Button } from "@/components/retroui/Button";
export default function ButtonStyleSecondary() {
return <Button variant="secondary">Click Me!</Button>;
}
RetroUI/preview/components/button-style-with-icon.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Button } from "@/components/retroui/Button";
import { Trash } from "lucide-react";
export default function ButtonStyleWithIcon() {
return (
<Button className="bg-destructive text-white hover:bg-destructive/90">
<Trash className="h-4 w-4 mr-2" /> Delete
</Button>
);
}
RetroUI/preview/components/calendar-style-default.tsx
+18
View File
@@ -0,0 +1,18 @@
"use client"
import { Calendar } from "@/components/retroui/Calendar"
const start = new Date()
export default function CalendarStyleDefault() {
return (
<div className="max-w-[350px] w-full">
<Calendar
numberOfMonths={1}
mode="single"
defaultMonth={start}
selected={start}
/>
</div>
)
}
RetroUI/preview/components/card-style-commerce.tsx
+23
View File
@@ -0,0 +1,23 @@
import { Button } from "@/components/retroui/Button";
import { Card } from "@/components/retroui/Card";
export default function CommerceCard() {
return (
<Card className="w-[350px] shadow-none hover:shadow-none">
<Card.Content className="pb-0">
<img
src="/images/gameboy.jpg"
className="w-full h-full"
alt="Gameboy"
/>
</Card.Content>
<Card.Header className="pb-0">
<Card.Title>Classic 8-bit Gameboy</Card.Title>
</Card.Header>
<Card.Content className="flex justify-between items-center">
<p className="text-lg font-semibold">$29.90</p>
<Button>Add to cart</Button>
</Card.Content>
</Card>
);
}
RetroUI/preview/components/card-style-default.tsx
+15
View File
@@ -0,0 +1,15 @@
import { Card } from "@/components/retroui/Card";
export default function BasicCard() {
return (
<Card>
<Card.Header>
<Card.Title>This is Card Title</Card.Title>
<Card.Description>
I can not find what to write here.. so imagine I wrote some good
stuff.
</Card.Description>
</Card.Header>
</Card>
);
}
RetroUI/preview/components/card-style-testimonial.tsx
+30
View File
@@ -0,0 +1,30 @@
import { Text } from "@/components/retroui/Text";
import { Card } from "@/components/retroui/Card";
import { Avatar } from "@/components/retroui/Avatar";
export default function TestimonialCard() {
return (
<Card className="w-full max-w-[400px] shadow-none hover:shadow-md">
<Card.Content>
<Text className="text-lg">
&quot; RetroUI is the cooling looking UI library out there! &quot;
</Text>
<div className="flex items-center space-x-2 mt-6">
<Avatar className="h-10 w-10">
<Avatar.Image
alt="avatar"
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
/>
</Avatar>
<div>
<div className="font-medium">Leroy Jenkins</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
CEO of Uber
</div>
</div>
</div>
</Card.Content>
</Card>
);
}
RetroUI/preview/components/carousel-style-default.tsx
+28
View File
@@ -0,0 +1,28 @@
import * as React from "react"
import { Card } from "@/components/retroui/Card"
import {
Carousel,
} from "@/components/retroui/Carousel"
export default function CarouselStyleDefault() {
return (
<Carousel className="w-full max-w-xs">
<Carousel.Content>
{Array.from({ length: 5 }).map((_, index) => (
<Carousel.Item key={index}>
<div className="p-4">
<Card className="w-full">
<Card.Content className="flex aspect-square items-center justify-center p-6">
<span className="text-4xl font-semibold">{index + 1}</span>
</Card.Content>
</Card>
</div>
</Carousel.Item>
))}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel>
)
}
RetroUI/preview/components/carousel-style-sizes.tsx
+28
View File
@@ -0,0 +1,28 @@
import * as React from "react"
import { Card } from "@/components/retroui/Card"
import {
Carousel,
} from "@/components/retroui/Carousel"
export default function CarouselStyleSizes() {
return (
<Carousel className="w-full max-w-sm">
<Carousel.Content>
{Array.from({ length: 5 }).map((_, index) => (
<Carousel.Item key={index} className="md:basis-1/2 lg:basis-1/3">
<div className="p-1">
<Card className="w-full">
<Card.Content className="flex aspect-square items-center justify-center p-6">
<span className="text-4xl font-semibold">{index + 1}</span>
</Card.Content>
</Card>
</div>
</Carousel.Item>
))}
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel>
)
}
RetroUI/preview/components/carousel-style-vertical.tsx
+37
View File
@@ -0,0 +1,37 @@
import * as React from "react"
import { Card } from "@/components/retroui/Card"
import {
Carousel,
} from "@/components/retroui/Carousel"
const cards = [
{label: "1", color: "purple-300"},
{label: "2", color: "green-300"},
{label: "3", color: "red-300"},
{label: "4", color: "yellow-300"},
{label: "5", color: "blue-300"},
]
export default function CarouselStyleVertical() {
return (
<Carousel opts={{
align: "start",
}} className="w-full max-w-xs" orientation="vertical">
<Carousel.Content className="h-[300px]">
{cards.map((card, index) => (
<Carousel.Item key={index} className="md:basis-1/2">
<div className="p-1">
<Card className={`w-full h-[200px] bg-${card.color} rounded-lg`}>
<Card.Content className="flex h-full w-full items-center justify-center p-6">
<span className="text-4xl font-semibold">{card.label}</span>
</Card.Content>
</Card>
</div>
</Carousel.Item>
))}
</Carousel.Content>
<Carousel.Previous className="rounded-full shadow-sm" />
<Carousel.Next className="rounded-full shadow-sm" />
</Carousel>
)
}
RetroUI/preview/components/checkbox-style-default.tsx
+11
View File
@@ -0,0 +1,11 @@
import { Checkbox } from "@/components/retroui/Checkbox";
import { Text } from "@/components/retroui/Text";
export default function CheckboxStyleDefault() {
return (
<div className="flex gap-2 items-center">
<Checkbox />
<Text>Accept terms and conditions</Text>
</div>
);
}
RetroUI/preview/components/checkbox-style-sizes.tsx
+11
View File
@@ -0,0 +1,11 @@
import { Checkbox } from "@/components/retroui/Checkbox";
export default function CheckboxStyleSizes() {
return (
<div className="flex gap-4">
<Checkbox size="sm" />
<Checkbox />
<Checkbox size="lg" />
</div>
);
}
RetroUI/preview/components/checkbox-style-variants.tsx
+11
View File
@@ -0,0 +1,11 @@
import { Checkbox } from "@/components/retroui/Checkbox";
export default function CheckboxStyleVariants() {
return (
<div className="flex gap-4">
<Checkbox />
<Checkbox variant="outline" />
<Checkbox variant="solid" />
</div>
);
}
RetroUI/preview/components/command-style-default.tsx
+57
View File
@@ -0,0 +1,57 @@
"use client";
import { Command } from "@/components/retroui/Command";
import {
Settings,
User,
Calendar,
Calculator,
Smile,
CreditCard,
} from "lucide-react";
export default function CommandStyleDefault() {
return (
<div className="space-y-4">
<Command className="border shadow-md md:min-w-[450px] max-w-[500px]">
<Command.Input placeholder="Type a command or search..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item>
<Calendar />
<span>Calendar</span>
</Command.Item>
<Command.Item>
<Smile />
<span>Search Emoji</span>
</Command.Item>
<Command.Item disabled>
<Calculator />
<span>Calculator</span>
</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
<User />
<span>Profile</span>
<Command.Shortcut>⌘P</Command.Shortcut>
</Command.Item>
<Command.Item>
<CreditCard />
<span>Billing</span>
<Command.Shortcut>⌘B</Command.Shortcut>
</Command.Item>
<Command.Item>
<Settings />
<span>Settings</span>
<Command.Shortcut>⌘S</Command.Shortcut>
</Command.Item>
</Command.Group>
</Command.List>
</Command>
</div>
);
}
RetroUI/preview/components/command-style-dialog.tsx
+78
View File
@@ -0,0 +1,78 @@
"use client";
import * as React from "react";
import { Command } from "@/components/retroui/Command";
import {
Calculator,
Calendar,
CreditCard,
Settings,
Smile,
User,
} from "lucide-react";
export default function Component() {
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setOpen((open) => !open);
}
};
document.addEventListener("keydown", down);
return () => document.removeEventListener("keydown", down);
}, []);
return (
<>
<p className="text-muted-foreground text-sm">
Press{" "}
<kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
<span className="text-xs">⌘</span>J
</kbd>
</p>
<Command.Dialog open={open} onOpenChange={setOpen}>
<Command.Input placeholder="Type a command or search..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item>
<Calendar />
<span>Calendar</span>
</Command.Item>
<Command.Item>
<Smile />
<span>Search Emoji</span>
</Command.Item>
<Command.Item>
<Calculator />
<span>Calculator</span>
</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
<User />
<span>Profile</span>
<Command.Shortcut>⌘P</Command.Shortcut>
</Command.Item>
<Command.Item>
<CreditCard />
<span>Billing</span>
<Command.Shortcut>⌘B</Command.Shortcut>
</Command.Item>
<Command.Item>
<Settings />
<span>Settings</span>
<Command.Shortcut>⌘S</Command.Shortcut>
</Command.Item>
</Command.Group>
</Command.List>
</Command.Dialog>
</>
);
}
RetroUI/preview/components/context-menu-style-default.tsx
+42
View File
@@ -0,0 +1,42 @@
"use client";
import { ContextMenu } from "@/components/retroui/ContextMenu";
export default function ContextMenuStyleDefault() {
return (
<div className="flex items-center justify-center min-h-[200px] p-8">
<ContextMenu>
<ContextMenu.Trigger
className="flex h-[150px] w-[300px] items-center justify-center
border-2 border-dashed border-border text-sm bg-background
transition-all"
>
Right click here
</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item>Copy</ContextMenu.Item>
<ContextMenu.Item>Cut</ContextMenu.Item>
<ContextMenu.Item>Paste</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item>Share</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.SubTrigger>More options</ContextMenu.SubTrigger>
<ContextMenu.SubContent>
<ContextMenu.Item>Archive</ContextMenu.Item>
<ContextMenu.Item>Delete</ContextMenu.Item>
</ContextMenu.SubContent>
</ContextMenu.Sub>
<ContextMenu.Separator />
<ContextMenu.CheckboxItem checked>
Show hidden files
</ContextMenu.CheckboxItem>
<ContextMenu.RadioGroup value="one">
<ContextMenu.Label>View mode</ContextMenu.Label>
<ContextMenu.RadioItem value="one">List</ContextMenu.RadioItem>
<ContextMenu.RadioItem value="two">Grid</ContextMenu.RadioItem>
</ContextMenu.RadioGroup>
</ContextMenu.Content>
</ContextMenu>
</div>
);
}
RetroUI/preview/components/dialog-style-default.tsx
+29
View File
@@ -0,0 +1,29 @@
import { Button } from "@/components/retroui/Button";
import { Dialog } from "@/components/retroui/Dialog";
import { Text } from "@/components/retroui/Text";
export default function DialogStyleDefault() {
return (
<Dialog>
<Dialog.Trigger asChild>
<Button>Open Dialog</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Header>
<Text as="h5">Confirm your action?</Text>
</Dialog.Header>
<section className="flex flex-col gap-4 p-4">
<section className="text-xl">
<p>Are you sure you want to delete this item?</p>
<p>This action cannout be undone.</p>
</section>
<section className="flex w-full justify-end">
<Dialog.Trigger asChild>
<Button>Confirm</Button>
</Dialog.Trigger>
</section>
</section>
</Dialog.Content>
</Dialog>
);
}
RetroUI/preview/components/dialog-style-width-variant.tsx
+61
View File
@@ -0,0 +1,61 @@
import { Button } from "@/components/retroui/Button";
import { Dialog } from "@/components/retroui/Dialog";
import { Text } from "@/components/retroui/Text";
import { useState } from "react";
type Variants =
| "auto"
| "sm"
| "md"
| "lg"
| "xl"
| "2xl"
| "3xl"
| "4xl"
| "screen";
export default function DialogStyleWidthVariant() {
const [variant, setVariant] = useState<Variants>("auto");
const sizes: Variants[] = [
"auto",
"sm",
"md",
"lg",
"xl",
"2xl",
"3xl",
"4xl",
"screen",
];
return (
<Dialog>
<Dialog.Trigger asChild>
<Button>Open Dialog</Button>
</Dialog.Trigger>
<Dialog.Content size={variant}>
<Dialog.Header>
<Text as="h5">Dialog with variants</Text>
</Dialog.Header>
<section className="flex flex-col gap-4 p-4">
<section className="text-xl">
<p>Choose your width size</p>
<section className="flex flex-wrap gap-4">
{sizes.map((singleVariant) => (
<Button
key={"variant-list-" + singleVariant}
type="button"
variant={singleVariant == variant ? "default" : "outline"}
onClick={() => setVariant(singleVariant)}
>
{singleVariant}
</Button>
))}
</section>
</section>
</section>
</Dialog.Content>
</Dialog>
);
}
RetroUI/preview/components/dialog-style-with-footer.tsx
+32
View File
@@ -0,0 +1,32 @@
import { Button } from "@/components/retroui/Button";
import { Text } from "@/components/retroui/Text";
import { Dialog } from "@/components/retroui/Dialog";
export default function DialogStyleWithFooter() {
return (
<Dialog>
<Dialog.Trigger asChild>
<Button>Open Dialog</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Header position={"fixed"} asChild>
<Text as="h5">Confirm your action?</Text>
</Dialog.Header>
<section className="flex flex-col gap-4 p-4">
<section className="text-xl">
<p>Are you sure you want to delete this item?</p>
<p>This action cannout be undone.</p>
</section>
</section>
<Dialog.Footer>
<Dialog.Trigger asChild>
<Button>Confirm</Button>
</Dialog.Trigger>
<Dialog.Trigger asChild>
<Button variant={"outline"}>Close</Button>
</Dialog.Trigger>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
);
}
RetroUI/preview/components/dialog-style-with-form.tsx
+40
View File
@@ -0,0 +1,40 @@
import { Button } from "@/components/retroui/Button";
import { Dialog } from "@/components/retroui/Dialog";
import { Input } from "@/components/retroui/Input";
import { Text } from "@/components/retroui/Text";
export default function DialogStyleWithForm() {
return (
<Dialog>
<Dialog.Trigger asChild>
<Button>Open Form</Button>
</Dialog.Trigger>
<Dialog.Content size={"md"}>
<Dialog.Header position={"fixed"}>
<Text as="h5">Contact Us</Text>
</Dialog.Header>
<form className="flex flex-col gap-4">
<div className="flex flex-col p-4 gap-4">
<div className="flex-col gap-2">
<label htmlFor="name">
Your name <span className="text-red-500">*</span>
</label>
<Input placeholder="Type your name" required />
</div>
<div className="flex-col gap-2">
<label htmlFor="name">
Your e-email <span className="text-red-500">*</span>
</label>
<Input placeholder="Type your name" required />
</div>
</div>
<Dialog.Footer>
<Dialog.Trigger asChild>
<Button type="submit">Submit</Button>
</Dialog.Trigger>
</Dialog.Footer>
</form>
</Dialog.Content>
</Dialog>
);
}
RetroUI/preview/components/drawer-style-default.tsx
+28
View File
@@ -0,0 +1,28 @@
import * as React from "react"
import { Drawer } from "@/components/retroui/Drawer"
import { Button } from "@/components/retroui/Button"
export default function DrawerStyleDefault() {
return (
<Drawer>
<Drawer.Trigger asChild>
<Button>Submit</Button>
</Drawer.Trigger>
<Drawer.Content>
<Drawer.Header>
<Drawer.Title>Are you absolutely sure?</Drawer.Title>
<Drawer.Description>This action cannot be undone.</Drawer.Description>
</Drawer.Header>
<Drawer.Footer>
<div className="flex justify-center gap-3">
<Button>Submit</Button>
<Drawer.Close>
<Button variant="outline">Cancel</Button>
</Drawer.Close>
</div>
</Drawer.Footer>
</Drawer.Content>
</Drawer>
)
}
RetroUI/preview/components/drawer-style-right-direction.tsx
+41
View File
@@ -0,0 +1,41 @@
import * as React from "react"
import { Drawer } from "@/components/retroui/Drawer"
import { Button } from "@/components/retroui/Button"
import { Input } from "@/components/retroui/Input"
import { Label } from "@/components/retroui/Label"
import { Textarea } from "@/components/retroui/Textarea"
export default function DrawerStyleRightDirection() {
return (
<Drawer direction="right">
<Drawer.Trigger asChild>
<Button>Review Us</Button>
</Drawer.Trigger>
<Drawer.Content>
<Drawer.Header>
<Drawer.Title>Edit Profile</Drawer.Title>
<Drawer.Description>Make changes to your profile here. Click save when you're done.</Drawer.Description>
</Drawer.Header>
<form className="flex flex-col space-y-4 p-4">
<div className="flex flex-col space-y-2">
<Label>Email</Label>
<Input placeholder="Enter your email" />
</div>
<div className="flex flex-col space-y-2">
<Label>Comment</Label>
<Textarea rows={4} placeholder="Enter your comment" />
</div>
</form>
<Drawer.Footer>
<div className="flex justify-start gap-3">
<Button>Submit</Button>
<Drawer.Close>
<Button variant="outline">Cancel</Button>
</Drawer.Close>
</div>
</Drawer.Footer>
</Drawer.Content>
</Drawer>
)
}
RetroUI/preview/components/empty-style-custom-everything.tsx
+20
View File
@@ -0,0 +1,20 @@
import { Button, Empty } from "@/components/retroui";
import { InboxIcon } from "lucide-react";
export default function CustomEverythingEmpty() {
return (
<Empty>
<Empty.Content>
<Empty.Icon>
<InboxIcon className="size-10 md:size-12" />
</Empty.Icon>
<Empty.Title>No data</Empty.Title>
<Empty.Description>
Get started by creating your first item
</Empty.Description>
<Button>Create now</Button>
</Empty.Content>
</Empty>
);
}
RetroUI/preview/components/empty-style-custom-icon.tsx
+19
View File
@@ -0,0 +1,19 @@
import { Empty } from "@/components/retroui/Empty";
export default function CustomIconEmpty() {
return (
<Empty>
<Empty.Content>
<Empty.Icon>
<span className="text-4xl">👻</span>
</Empty.Icon>
<Empty.Title>No data</Empty.Title>
<Empty.Separator />
<Empty.Description>
There is nothing to show here yet. Imagine you wrote some good stuff
here.
</Empty.Description>
</Empty.Content>
</Empty>
);
}
RetroUI/preview/components/empty-style-default.tsx
+16
View File
@@ -0,0 +1,16 @@
import { Empty } from "@/components/retroui";
export default function DefaultEmpty() {
return (
<Empty>
<Empty.Content>
<Empty.Icon className="size-10 md:size-12" />
<Empty.Title>No Results</Empty.Title>
<Empty.Separator />
<Empty.Description>
Your search didn't match any items. Try adjusting your filters.
</Empty.Description>
</Empty.Content>
</Empty>
);
}
RetroUI/preview/components/empty-style-table.tsx
+39
View File
@@ -0,0 +1,39 @@
import { Empty } from "@/components/retroui/Empty";
import { Table } from "@/components/retroui/Table";
const invoices = [];
export default function TableEmpty() {
return (
<Table className="mx-auto">
<Table.Header>
<Table.Row>
<Table.Head className="w-[100px]">Invoice</Table.Head>
<Table.Head>Customer</Table.Head>
<Table.Head>Status</Table.Head>
<Table.Head>Method</Table.Head>
<Table.Head className="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{invoices?.length === 0 && (
<Table.Row>
<Table.Cell colSpan={5}>
<Empty className="border-none shadow-none">
<Empty.Content>
<Empty.Icon className="size-8" />
<Empty.Title className="md:text-base">Empty</Empty.Title>
<Empty.Description>
Get started by creating your first invoice.
</Empty.Description>
</Empty.Content>
</Empty>
</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
);
}
RetroUI/preview/components/input-style-default.tsx
+5
View File
@@ -0,0 +1,5 @@
import { Input } from "@/components/retroui/Input";
export default function InputStyleDefault() {
return <Input type="text" placeholder="type something..." />;
}
RetroUI/preview/components/input-style-error.tsx
+18
View File
@@ -0,0 +1,18 @@
import { Input } from "@/components/retroui/Input";
import { Label } from "@/components/retroui/Label";
export default function InputStyleError() {
return (
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="pokemon">Favorite Pokemon</Label>
<Input
type="pokemon"
id="pokemon"
placeholder="Charmander"
defaultValue="Son Goku"
aria-invalid
/>
<p className="text-sm text-red-500">Please provide a valid pokemon!</p>
</div>
);
}
RetroUI/preview/components/input-style-with-label.tsx
+11
View File
@@ -0,0 +1,11 @@
import { Input } from "@/components/retroui/Input";
import { Label } from "@/components/retroui/Label";
export default function InputStyleWithLabel() {
return (
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="pokemon">Favorite Pokemon</Label>
<Input type="pokemon" id="pokemon" placeholder="Charmander" />
</div>
);
}
RetroUI/preview/components/label-style-default.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Input, Label } from "@/components/retroui";
export default function LabelStyleDefault() {
return (
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="pokemon">Favorite Pokemon</Label>
<Input type="pokemon" id="pokemon" placeholder="Charmander" />
</div>
);
}
RetroUI/preview/components/label.tsx
+13
View File
@@ -0,0 +1,13 @@
"use client";
import { Checkbox } from "@/components/retroui";
import { Label } from "@/components/retroui";
export default function LabelDefault() {
return (
<div className="flex items-center bg-background space-x-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</div>
);
}
RetroUI/preview/components/loader-style-custom.tsx
+16
View File
@@ -0,0 +1,16 @@
import { Loader } from "@/components/retroui/Loader";
export default function LoaderPreview() {
return (
<div className="flex flex-col gap-4">
<div className="flex items-center gap-4">
<Loader count={4} />
<Loader count={5} delayStep={80} />
</div>
<div className="flex items-center gap-4">
<Loader duration={1.5} />
<Loader variant="secondary" count={4} duration={1.2} delayStep={120} />
</div>
</div>
);
}
RetroUI/preview/components/loader-style-default.tsx
+6
View File
@@ -0,0 +1,6 @@
import { Loader } from "@/components/retroui/Loader";
export default function LoaderPreview() {
return <Loader />;
}
RetroUI/preview/components/loader-style-outline.tsx
+6
View File
@@ -0,0 +1,6 @@
import { Loader } from "@/components/retroui/Loader";
export default function LoaderPreview() {
return <Loader variant="outline" />;
}
RetroUI/preview/components/loader-style-sizes.tsx
+12
View File
@@ -0,0 +1,12 @@
import { Loader } from "@/components/retroui/Loader";
export default function LoaderPreview() {
return (
<div className="flex items-end gap-4">
<Loader size="sm" />
<Loader size="md" />
<Loader size="lg" />
</div>
);
}
RetroUI/preview/components/loader-style-solid.tsx
+6
View File
@@ -0,0 +1,6 @@
import { Loader } from "@/components/retroui/Loader";
export default function LoaderPreview() {
return <Loader variant="secondary" />;
}
RetroUI/preview/components/menu-style-default.tsx
+17
View File
@@ -0,0 +1,17 @@
import { Button } from "@/components/retroui/Button";
import { Menu } from "@/components/retroui/Menu";
export default function MenuDefault() {
return (
<Menu>
<Menu.Trigger asChild>
<Button>Menu</Button>
</Menu.Trigger>
<Menu.Content className="min-w-36">
<Menu.Item>Menu Item 1</Menu.Item>
<Menu.Item>Menu Item 2</Menu.Item>
<Menu.Item>Menu Item 3</Menu.Item>
</Menu.Content>
</Menu>
);
}
RetroUI/preview/components/popover-style-default-shadow.tsx
+45
View File
@@ -0,0 +1,45 @@
"use client";
import { Popover, Label, Button, Input } from "@/components/retroui";
export default function PopoverStyleDefaultShadow() {
return (
<Popover>
<Popover.Trigger asChild>
<Button>Open Popover</Button>
</Popover.Trigger>
<Popover.Content className="w-80 shadow-md">
<div className="grid gap-4">
<div className="space-y-2">
<h4 className="font-medium leading-none">Dimensions</h4>
<p className="text-sm text-muted-foreground">
Set the dimensions for the layer.
</p>
</div>
<div className="grid gap-2">
<div className="grid grid-cols-3 items-center gap-4">
<Label htmlFor="width">Width</Label>
<Input
id="width"
defaultValue="100%"
className="col-span-2 h-8"
/>
</div>
<div className="grid grid-cols-3 items-center gap-4">
<Label htmlFor="height">Height</Label>
<Input
id="height"
defaultValue="25px"
className="col-span-2 h-8"
/>
</div>
</div>
</div>
</Popover.Content>
</Popover>
);
}
RetroUI/preview/components/popover-style-default.tsx
+45
View File
@@ -0,0 +1,45 @@
"use client";
import { Popover, Label, Button, Input } from "@/components/retroui";
export default function PopoverStyleDefault() {
return (
<Popover>
<Popover.Trigger asChild>
<Button>Open Popover</Button>
</Popover.Trigger>
<Popover.Content className="w-80 font-sans">
<div className="grid gap-4">
<div className="space-y-2">
<h4 className="font-medium leading-none">Dimensions</h4>
<p className="text-sm text-muted-foreground">
Set the dimensions for the layer.
</p>
</div>
<div className="grid gap-2">
<div className="grid grid-cols-3 items-center gap-4">
<Label htmlFor="width">Width</Label>
<Input
id="width"
defaultValue="100%"
className="col-span-2 h-8"
/>
</div>
<div className="grid grid-cols-3 items-center gap-4">
<Label htmlFor="height">Height</Label>
<Input
id="height"
defaultValue="25px"
className="col-span-2 h-8"
/>
</div>
</div>
</div>
</Popover.Content>
</Popover>
);
}
RetroUI/preview/components/progress-style-default.tsx
+16
View File
@@ -0,0 +1,16 @@
"use client";
import * as React from "react";
import { Progress } from "@/components/retroui/Progress";
export default function ProgressDemo() {
const [progress, setProgress] = React.useState(13);
React.useEffect(() => {
const timer = setTimeout(() => setProgress(66), 500);
return () => clearTimeout(timer);
}, []);
return <Progress value={progress} className="w-[60%]" />;
}
RetroUI/preview/components/radio-style-default.tsx
+20
View File
@@ -0,0 +1,20 @@
import { RadioGroup } from "@/components/retroui/Radio";
export default function RadioStyleSizes() {
return (
<RadioGroup>
<div className="flex items-center space-x-2">
<RadioGroup.Item value="1" />
<label htmlFor="1"> Option 1</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroup.Item value="2" />
<label htmlFor="2"> Option 2</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroup.Item value="3" />
<label htmlFor="3"> Option 3</label>
</div>
</RadioGroup>
);
}
RetroUI/preview/components/radio-style-sizes.tsx
+26
View File
@@ -0,0 +1,26 @@
import { RadioGroup } from "@/components/retroui/Radio";
export default function RadioStyleSizes() {
return (
<div className="flex gap-4">
<RadioGroup>
<div className="flex items-center space-x-2">
<RadioGroup.Item value="sm" size="sm" />
<label htmlFor="sm" className="text-sm">
Small
</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroup.Item value="md" size="md" />
<label htmlFor="md">Medium</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroup.Item value="lg" size="lg" />
<label htmlFor="lg" className="text-lg">
Large Size
</label>
</div>
</RadioGroup>
</div>
);
}
RetroUI/preview/components/radio-style-variants.tsx
+22
View File
@@ -0,0 +1,22 @@
import { RadioGroup } from "@/components/retroui/Radio";
export default function RadioStyleVariants() {
return (
<div className="flex gap-4">
<RadioGroup>
<div className="flex items-center space-x-2">
<RadioGroup.Item value="default" variant="default" />
<label htmlFor="default">Default Style</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroup.Item value="outline" variant="outline" />
<label htmlFor="outline">Outline Style</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroup.Item value="solid" variant="solid" />
<label htmlFor="solid">Solid Style</label>
</div>
</RadioGroup>
</div>
);
}
RetroUI/preview/components/retro-player.tsx
+92
View File
@@ -0,0 +1,92 @@
import { Button, Card } from "@/components/retroui";
import { Slider } from "@/components/retroui/Slider";
import {
ArrowLeft,
Heart,
Pause,
Repeat,
Shuffle,
Sparkle,
StepBack,
StepForward,
} from "lucide-react";
export default function RetroPlayerStyle() {
return (
<Card className="w-full max-w-sm rounded-lg shadow-none">
{/* header */}
<Card.Header className="flex flex-row justify-between border-b border-black/50 dark:border-white/50">
<Button variant="ghost" className="p-0">
<ArrowLeft className="size-5" />
</Button>
<p className="text-sm font-bold">Now playing</p>
<Button variant="ghost" className="p-0">
<Heart className="size-5" />
</Button>
</Card.Header>
{/* card content */}
<Card.Content className="relative px-4 sm:px-12 py-6 overflow-hidden">
{/* thumbnail box */}
<div className="flex items-center gap-4 mb-6">
<img
src="/images/punk.svg"
alt="retro player album"
className="size-12 object-contain rounded-md border"
/>
<div className="flex-1">
<p className="font-semibold">Punk Anthem Music</p>
<p className="text-sm">by Punk</p>
</div>
</div>
<div className="">
{/* timeline box */}
<div>
<Slider value={[50]} />
<div className="flex items-center justify-between mt-1.5 select-none">
<p className="text-xs text-muted-foreground">
01:10
</p>
<p className="text-xs text-muted-foreground">
02:15
</p>
</div>
</div>
{/* controls */}
<div className="flex gap-2 sm:gap-3 items-center justify-between mt-3">
<Button variant="ghost" className="p-0">
<Repeat className="size-4" />
</Button>
<Button variant="ghost" className="p-0">
<StepBack className="size-5" />
</Button>
<Button
variant="outline"
className="rounded-full h-14 w-14"
>
<Pause className="size-5" />
</Button>
<Button variant="ghost" className="p-0">
<StepForward className="size-5" />
</Button>
<Button variant="ghost" className="p-0">
<Shuffle className="size-4" />
</Button>
</div>
</div>
<Sparkle
size={30}
strokeWidth={0.5}
className="absolute sm:block hidden -right-2 top-26 fill-amber-300 rotate-12"
/>
<Sparkle
size={20}
strokeWidth={0.5}
className="absolute sm:block hidden left-1 bottom-20 fill-slate-500"
/>
</Card.Content>
</Card>
);
}
RetroUI/preview/components/select-style-default.tsx
+20
View File
@@ -0,0 +1,20 @@
import { Select } from "@/components/retroui/Select";
import React from "react";
export default function SelectStyleDefault() {
return (
<Select>
<Select.Trigger className="w-60">
<Select.Value placeholder="Pick your Pokemon" />
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.Item value="pikachu">Pikachu</Select.Item>
<Select.Item value="charizard">Charizard</Select.Item>
<Select.Item value="bulbasaur">Bulbasaur</Select.Item>
<Select.Item value="squirtle">Squirtle</Select.Item>
</Select.Group>
</Select.Content>
</Select>
);
}
RetroUI/preview/components/slider-style-default.tsx
+15
View File
@@ -0,0 +1,15 @@
import { Slider } from "@/components/retroui/Slider";
export default function SliderDefault() {
return (
<div className="w-[400px]">
<Slider
defaultValue={[50]}
min={0}
max={100}
step={1}
aria-label="Slider Control"
/>
</div>
);
}
RetroUI/preview/components/sonner-style-colored-status.tsx
+12
View File
@@ -0,0 +1,12 @@
import { Button } from "@/components/retroui";
import { toast } from "sonner";
export default function SonnerStyleRichColors() {
const onClick = () => {
toast.success("Congrats man (Colored) 🎉", {
richColors: true,
});
};
return <Button onClick={onClick}>Congratulate Me</Button>;
}
RetroUI/preview/components/sonner-style-default.tsx
+16
View File
@@ -0,0 +1,16 @@
import { Button } from "@/components/retroui";
import { toast } from "sonner";
export default function SonnerStyleDefault() {
const onClick = () => {
toast("Event has been created", {
description: "Sunday, December 03, 2025",
cancel: {
label: "Undo",
onClick: () => {},
},
});
};
return <Button onClick={onClick}>Show Toast</Button>;
}
RetroUI/preview/components/sonner-style-error.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Button } from "@/components/retroui";
import { toast } from "sonner";
export default function SonnerStyleError() {
const onClick = () => {
toast.error("Oops! you ran into a pot hole");
};
return <Button onClick={onClick}>Show Toast (Error)</Button>;
}
RetroUI/preview/components/sonner-style-status.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Button } from "@/components/retroui";
import { toast } from "sonner";
export default function SonnerStyleStatus() {
const onClick = () => {
toast.success("Congrats man 🎉 (Plain)");
};
return <Button onClick={onClick}>Congratulate Me</Button>;
}
RetroUI/preview/components/switch-style-default.tsx
+11
View File
@@ -0,0 +1,11 @@
import { Switch } from "@/components/retroui/Switch";
import React from "react";
export default function SwitchStyleDefault() {
return (
<div className="flex items-center space-x-2">
<Switch id="notification" />
<label htmlFor="notification">Email Notifications</label>
</div>
);
}
RetroUI/preview/components/switch-style-disabled.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Switch } from "@/components/retroui/Switch";
import React from "react";
export default function SwitchStyleDisabled() {
return (
<div className="flex items-center space-x-2">
<Switch id="notification" disabled />
</div>
);
}
RetroUI/preview/components/tab-style-default.tsx
+21
View File
@@ -0,0 +1,21 @@
import { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList } from "@/components/retroui/Tab";
export default function TabStyleDefault() {
return (
<Tabs className="w-full">
<TabsTriggerList>
<TabsTrigger>Home</TabsTrigger>
<TabsTrigger>About</TabsTrigger>
<TabsTrigger>Contact</TabsTrigger>
</TabsTriggerList>
<TabsPanels>
<TabsContent>
Welcome to RetroUI, a retro styled UI library built with React,
Tailwind CSS & Headless UI.
</TabsContent>
<TabsContent>This is the about section!</TabsContent>
<TabsContent>And, this is the contact section!</TabsContent>
</TabsPanels>
</Tabs>
);
}
RetroUI/preview/components/table-style-default.tsx
+89
View File
@@ -0,0 +1,89 @@
import { Badge } from "@/components/retroui"
import {
Table,
} from "@/components/retroui/Table"
const invoices = [
{
invoice: "INV001",
customer: "John Doe",
paymentStatus: "Paid",
totalAmount: "$250.00",
paymentMethod: "Credit Card",
},
{
invoice: "INV002",
customer: "Jane Doe",
paymentStatus: "Pending",
totalAmount: "$150.00",
paymentMethod: "PayPal",
},
{
invoice: "INV003",
customer: "Mark Doe",
paymentStatus: "Unpaid",
totalAmount: "$350.00",
paymentMethod: "Bank Transfer",
},
{
invoice: "INV004",
customer: "Robert Doe",
paymentStatus: "Paid",
totalAmount: "$450.00",
paymentMethod: "Credit Card",
},
{
invoice: "INV005",
customer: "Isabella Doe",
paymentStatus: "Paid",
totalAmount: "$550.00",
paymentMethod: "PayPal",
},
{
invoice: "INV006",
customer: "Mrs. Doe",
paymentStatus: "Pending",
totalAmount: "$200.00",
paymentMethod: "Bank Transfer",
},
{
invoice: "INV007",
customer: "Mr. Doe",
paymentStatus: "Unpaid",
totalAmount: "$300.00",
paymentMethod: "Credit Card",
},
]
export default function TableStyleDefault() {
return (
<Table className="max-w-lg mb-6 mx-auto">
<Table.Header>
<Table.Row>
<Table.Head className="w-[100px]">Invoice</Table.Head>
<Table.Head>Customer</Table.Head>
<Table.Head>Status</Table.Head>
<Table.Head>Method</Table.Head>
<Table.Head className="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{invoices.map((invoice) => (
<Table.Row key={invoice.invoice}>
<Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
<Table.Cell>{invoice.customer}</Table.Cell>
<Table.Cell><Badge variant="solid" size="sm">{invoice.paymentStatus}</Badge></Table.Cell>
<Table.Cell>{invoice.paymentMethod}</Table.Cell>
<Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
</Table.Row>
))}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.Cell colSpan={4}>Total</Table.Cell>
<Table.Cell className="text-right">$2,500.00</Table.Cell>
</Table.Row>
</Table.Footer>
</Table>
)
}
RetroUI/preview/components/table-with-checkbox.tsx
+122
View File
@@ -0,0 +1,122 @@
import { Badge, Checkbox } from "@/components/retroui"
import {
Table,
} from "@/components/retroui/Table"
import { useState } from "react"
const employees = [
{
id: "1",
name: "Alice Johnson",
department: "Engineering",
status: "Active",
salary: "85,000",
},
{
id: "2",
name: "Bob Smith",
department: "Product",
status: "Active",
salary: "95,000",
},
{
id: "3",
name: "Carol Williams",
department: "Design",
status: "On Leave",
salary: "70,000",
},
{
id: "4",
name: "David Brown",
department: "Engineering",
status: "Active",
salary: "90,000",
},
{
id: "5",
name: "Eve Davis",
department: "Engineering",
status: "Active",
salary: "75,000",
},
{
id: "6",
name: "Frank Wilson",
department: "Marketing",
status: "Inactive",
salary: "80,000",
},
]
export default function TableWithCheckbox() {
const [selectedEmployees, setSelectedEmployees] = useState<Set<string>>(new Set())
const handleSelectAll = (checked: boolean) => {
if (checked) {
setSelectedEmployees(new Set(employees.map(emp => emp.id)))
} else {
setSelectedEmployees(new Set())
}
}
const handleSelectEmployee = (employeeId: string, checked: boolean) => {
const newSelected = new Set(selectedEmployees)
if (checked) {
newSelected.add(employeeId)
} else {
newSelected.delete(employeeId)
}
setSelectedEmployees(newSelected)
}
const isAllSelected = selectedEmployees.size === employees.length
return (
<Table className="max-w-lg mb-6 mx-auto">
<Table.Header>
<Table.Row>
<Table.Head className="w-[50px]">
<Checkbox
checked={isAllSelected}
onCheckedChange={handleSelectAll}
/>
</Table.Head>
<Table.Head>Name</Table.Head>
<Table.Head>Department</Table.Head>
<Table.Head>Status</Table.Head>
<Table.Head className="text-right">Salary</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{employees.map((employee) => (
<Table.Row key={employee.id}>
<Table.Cell>
<Checkbox
checked={selectedEmployees.has(employee.id)}
onCheckedChange={(checked) => handleSelectEmployee(employee.id, Boolean(checked))}
/>
</Table.Cell>
<Table.Cell className="font-medium">{employee.name}</Table.Cell>
<Table.Cell>{employee.department}</Table.Cell>
<Table.Cell>
<Badge
variant={employee.status === 'Active' ? 'default' : employee.status === 'On Leave' ? 'outline' : 'solid'}
size="sm"
>
{employee.status}
</Badge>
</Table.Cell>
<Table.Cell className="text-right">$ {employee.salary}</Table.Cell>
</Table.Row>
))}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.Cell colSpan={4}>Selected: {selectedEmployees.size} / {employees.length}</Table.Cell>
<Table.Cell className="text-right font-semibold">$ {employees.reduce((total, employee) => total + Number(employee.salary.replace(',', '')), 0)}</Table.Cell>
</Table.Row>
</Table.Footer>
</Table>
)
}
RetroUI/preview/components/table-with-sticky-header.tsx
+140
View File
@@ -0,0 +1,140 @@
import { Badge } from "@/components/retroui";
import { Table } from "@/components/retroui/Table";
const transactions = [
{
id: "TXN001",
date: "2024-01-15",
description: "Payment from Customer A",
amount: "$1,250.00",
category: "Revenue",
},
{
id: "TXN002",
date: "2024-01-15",
description: "Office Supplies Purchase",
amount: "-$85.50",
category: "Expense",
},
{
id: "TXN003",
date: "2024-01-16",
description: "Software License Renewal",
category: "Expense",
amount: "-$299.99",
},
{
id: "TXN004",
date: "2024-01-16",
description: "Payment from Customer B",
category: "Revenue",
amount: "$750.00",
},
{
id: "TXN005",
date: "2024-01-17",
description: "Marketing Campaign",
category: "Expense",
amount: "-$500.00",
},
{
id: "TXN006",
date: "2024-01-17",
description: "Freelancer Payment",
category: "Expense",
amount: "-$400.00",
},
{
id: "TXN007",
date: "2024-01-18",
description: "Payment from Customer C",
category: "Revenue",
amount: "$2,100.00",
},
{
id: "TXN008",
date: "2024-01-18",
description: "Equipment Purchase",
category: "Expense",
amount: "-$1,200.00",
},
{
id: "TXN009",
date: "2024-01-19",
description: "Subscription Fee",
category: "Expense",
amount: "-$49.99",
status: "Pending",
},
{
id: "TXN010",
date: "2024-01-19",
description: "Payment from Customer D",
category: "Revenue",
amount: "$890.00",
},
{
id: "TXN011",
date: "2024-01-20",
description: "Travel Expenses",
category: "Expense",
amount: "-$350.00",
},
{
id: "TXN012",
date: "2024-01-20",
description: "Payment from Customer E",
category: "Revenue",
amount: "$1,500.00",
},
];
export default function TableWithStickyHeader() {
return (
<div className="h-96 border-2">
<Table className="border-0 shadow-none">
<Table.Header className="sticky top-0">
<Table.Row className="bg-secondary hover:bg-secondary">
<Table.Head className="w-[100px] text-secondary-foreground">
ID
</Table.Head>
<Table.Head className="text-secondary-foreground">Date</Table.Head>
<Table.Head className="text-secondary-foreground">
Description
</Table.Head>
<Table.Head className="text-secondary-foreground">
Category
</Table.Head>
<Table.Head className="text-right text-secondary-foreground">
Amount
</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{transactions.map((transaction) => (
<Table.Row key={transaction.id}>
<Table.Cell className="font-medium">{transaction.id}</Table.Cell>
<Table.Cell>{transaction.date}</Table.Cell>
<Table.Cell>{transaction.description}</Table.Cell>
<Table.Cell>
<Badge
variant={
transaction.category === "Revenue" ? "default" : "outline"
}
size="sm"
>
{transaction.category}
</Badge>
</Table.Cell>
<Table.Cell
className={`text-right font-medium ${transaction.amount.startsWith("-") ? "text-destructive" : "text-foreground"}`}
>
{transaction.amount}
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
</div>
);
}
RetroUI/preview/components/text-headings.tsx
+14
View File
@@ -0,0 +1,14 @@
import { Text } from "@/components/retroui/Text";
export default function TextHeadings() {
return (
<div className="space-y-4">
<Text as="h1">This is H1</Text>
<Text as="h2">This is H2</Text>
<Text as="h3">This is H3</Text>
<Text as="h4">This is H4</Text>
<Text as="h5">This is H5</Text>
<Text as="h6">This is H6</Text>
</div>
);
}
RetroUI/preview/components/textarea-style-default.tsx
+11
View File
@@ -0,0 +1,11 @@
import { Textarea } from "@/components/retroui/Textarea";
export default function TextareaStyleDefault() {
return (
<Textarea
rows={4}
placeholder="type something..."
className="px-4 py-2 w-full border-2 shadow-md transition focus:outline-hidden focus:shadow-xs"
/>
);
}
RetroUI/preview/components/toc-style-default.tsx
+6
View File
@@ -0,0 +1,6 @@
import { TableOfContents } from "@/components/retroui/TableOfContents";
export default function TocStyleDefault() {
return <TableOfContents />
}
RetroUI/preview/components/toc-style-depth.tsx
+9
View File
@@ -0,0 +1,9 @@
import { TableOfContents } from "@/components/retroui/TableOfContents";
import { Text } from "@/components/retroui/Text";
export default function TocStyleDepth() {
return <TableOfContents depth={3} className="w-80 h-96">
<Text className="mb-3 border-b pb-2">On this page</Text>
</TableOfContents>
}
RetroUI/preview/components/toc-style-manual.tsx
+22
View File
@@ -0,0 +1,22 @@
import { TableOfContents } from "@/components/retroui/TableOfContents";
import { Text } from "@/components/retroui/Text";
export default function TocStyleManual() {
const manualData = [
{ id: 'introduction', title: 'Introduction', depth: 1 },
{ id: 'getting-started', title: 'Getting Started', depth: 2 },
{ id: 'installation', title: 'Installation', depth: 3 },
{ id: 'configuration', title: 'Configuration', depth: 3 },
{ id: 'advanced-usage', title: 'Advanced Usage', depth: 1 },
{ id: 'api-reference', title: 'API Reference', depth: 2 },
{ id: 'examples', title: 'Examples', depth: 2 },
{ id: 'troubleshooting', title: 'Troubleshooting', depth: 1 },
];
return <TableOfContents
data={manualData}
className="w-80 h-96"
>
<Text className="mb-3 border-b pb-2">Manual TOC</Text>
</TableOfContents>
}
RetroUI/preview/components/toggle-group-style-default.tsx
+22
View File
@@ -0,0 +1,22 @@
"use client";
import { ToggleGroup, ToggleGroupItem } from "@/components/retroui";
import { Bold, Italic, Underline } from "lucide-react";
export default function ToggleGroupStyleDefault() {
return (
<ToggleGroup type="multiple" variant="default">
<ToggleGroupItem value="bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
);
}
RetroUI/preview/components/toggle-group-style-outline-muted.tsx
+22
View File
@@ -0,0 +1,22 @@
"use client";
import { ToggleGroup, ToggleGroupItem } from "@/components/retroui";
import { Bold, Italic, Underline } from "lucide-react";
export default function ToggleGroupStyleOutlineMuted() {
return (
<ToggleGroup type="multiple" variant="outline-muted">
<ToggleGroupItem value="bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
);
}
RetroUI/preview/components/toggle-group-style-outlined.tsx
+22
View File
@@ -0,0 +1,22 @@
"use client";
import { ToggleGroup, ToggleGroupItem } from "@/components/retroui";
import { Bold, Italic, Underline } from "lucide-react";
export default function ToggleGroupStyleOutlined() {
return (
<ToggleGroup type="multiple" variant="outlined">
<ToggleGroupItem value="bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
);
}
RetroUI/preview/components/toggle-group-style-solid.tsx
+22
View File
@@ -0,0 +1,22 @@
"use client";
import { ToggleGroup, ToggleGroupItem } from "@/components/retroui";
import { Bold, Italic, Underline } from "lucide-react";
export default function ToggleGroupStyleSolid() {
return (
<ToggleGroup type="multiple" variant="solid">
<ToggleGroupItem value="bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
);
}
RetroUI/preview/components/toggle-style-default.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Toggle } from "@/components/retroui";
import { Bold } from "lucide-react";
export default function ToggleStyleDefault() {
return (
<Toggle>
<Bold />
</Toggle>
);
}
RetroUI/preview/components/toggle-style-outline-muted.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Toggle } from "@/components/retroui";
import { Bold } from "lucide-react";
export default function ToggleStyleOutlineMuted() {
return (
<Toggle variant="outline-muted">
<Bold />
</Toggle>
);
}
RetroUI/preview/components/toggle-style-outlined.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Toggle } from "@/components/retroui";
import { Bold } from "lucide-react";
export default function ToggleStyleOutlined() {
return (
<Toggle variant="outlined">
<Bold />
</Toggle>
);
}
RetroUI/preview/components/toggle-style-solid.tsx
+10
View File
@@ -0,0 +1,10 @@
import { Toggle } from "@/components/retroui";
import { Italic } from "lucide-react";
export default function ToggleStyleSolid() {
return (
<Toggle variant="solid">
<Italic /> Italics
</Toggle>
);
}
RetroUI/preview/components/tooltip-style-default.tsx
+16
View File
@@ -0,0 +1,16 @@
"use client";
import { Button, Tooltip } from "@/components/retroui";
export default function TooltipStyleDefault() {
return (
<Tooltip.Provider>
<Tooltip>
<Tooltip.Trigger asChild>
<Button variant="outline">Hover</Button>
</Tooltip.Trigger>
<Tooltip.Content variant="default">Add to Library</Tooltip.Content>
</Tooltip>
</Tooltip.Provider>
);
}
RetroUI/preview/components/tooltip-style-primary.tsx
+16
View File
@@ -0,0 +1,16 @@
"use client";
import { Button, Tooltip } from "@/components/retroui";
export default function TooltipStylePrimary() {
return (
<Tooltip.Provider>
<Tooltip>
<Tooltip.Trigger asChild>
<Button variant="outline">Hover</Button>
</Tooltip.Trigger>
<Tooltip.Content variant="primary">Add to Library</Tooltip.Content>
</Tooltip>
</Tooltip.Provider>
);
}
RetroUI/preview/components/tooltip-style-solid.tsx
+16
View File
@@ -0,0 +1,16 @@
"use client";
import { Button, Tooltip } from "@/components/retroui";
export default function TooltipStyleSolid() {
return (
<Tooltip.Provider>
<Tooltip>
<Tooltip.Trigger asChild>
<Button variant="outline">Hover</Button>
</Tooltip.Trigger>
<Tooltip.Content variant="solid">Add to Library</Tooltip.Content>
</Tooltip>
</Tooltip.Provider>
);
}
RetroUI/preview/components/typography-p.tsx
+12
View File
@@ -0,0 +1,12 @@
import { Text } from "@/components/retroui/Text";
export default function TextParagraph() {
return (
<Text className="font-sans text-base">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos,
doloremque inventore nesciunt quo sequi veniam impedit alias libero
dolorem tempore quia esse fugit fuga iste aliquam expedita molestias
iusto?
</Text>
);
}