Showing preview only (817K chars total). Download the full file or copy to clipboard to get everything.
Repository: logging-studio/retroui
Branch: main
Commit: df2d6e9f895d
Files: 367
Total size: 735.5 KB
Directory structure:
gitextract_ggy5d18g/
├── .eslintrc.json
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ └── deploy.yml
├── .gitignore
├── .prettierrc
├── .vscode/
│ └── settings.json
├── CONTRIBUTING.md
├── Dockerfile
├── LICENCE.md
├── README.md
├── app/
│ ├── (docs)/
│ │ └── docs/
│ │ ├── [[...slug]]/
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── (marketing)/
│ │ ├── blogs/
│ │ │ ├── [slug]/
│ │ │ │ └── page.tsx
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── page.tsx
│ │ ├── showcase/
│ │ │ └── page.tsx
│ │ └── themes/
│ │ └── page.tsx
│ ├── (sink)/
│ │ └── demo/
│ │ └── components/
│ │ └── page.tsx
│ ├── actions/
│ │ └── newsletter.ts
│ ├── global.css
│ ├── layout.tsx
│ ├── robots.ts
│ ├── rss.xml/
│ │ └── route.ts
│ └── sitemap.ts
├── bun.lockb
├── components/
│ ├── CodeBlock.tsx
│ ├── ComponentInstall.tsx
│ ├── ComponentShowcase.tsx
│ ├── ComponentSource.tsx
│ ├── CopyTheme.tsx
│ ├── HamburgerMenu.tsx
│ ├── JoinNewsletter.tsx
│ ├── MDX.tsx
│ ├── RichTextCodeBlock.tsx
│ ├── RichTextConverter.tsx
│ ├── SideNav.tsx
│ ├── TableOfContents.tsx
│ ├── Testimonial.tsx
│ ├── ThemeWrapper.tsx
│ ├── TopNav.tsx
│ ├── WorksWithSection.tsx
│ ├── footer.tsx
│ ├── index.ts
│ └── retroui/
│ ├── Accordion.tsx
│ ├── Alert.tsx
│ ├── Avatar.tsx
│ ├── Badge.tsx
│ ├── BasicCard.tsx
│ ├── Breadcrumb.tsx
│ ├── Button.tsx
│ ├── Calendar.tsx
│ ├── Card.tsx
│ ├── Carousel.tsx
│ ├── Checkbox.tsx
│ ├── Command.tsx
│ ├── CommandDisplay.tsx
│ ├── ContextMenu.tsx
│ ├── Dialog.tsx
│ ├── Drawer.tsx
│ ├── Empty.tsx
│ ├── IconButton.tsx
│ ├── Input.tsx
│ ├── Label.tsx
│ ├── Loader.tsx
│ ├── Login.tsx
│ ├── Menu.tsx
│ ├── Popover.tsx
│ ├── ProductCard.tsx
│ ├── Progress.tsx
│ ├── Radio.tsx
│ ├── Select.tsx
│ ├── Slider.tsx
│ ├── Sonner.tsx
│ ├── Switch.tsx
│ ├── Tab.tsx
│ ├── Table.tsx
│ ├── TableOfContents.tsx
│ ├── Text.tsx
│ ├── Textarea.tsx
│ ├── Toggle.tsx
│ ├── ToggleGroup.tsx
│ ├── Tooltip.tsx
│ ├── charts/
│ │ ├── AreaChart.tsx
│ │ ├── BarChart.tsx
│ │ ├── LineChart.tsx
│ │ └── PieChart.tsx
│ └── index.ts
├── config/
│ ├── components.ts
│ ├── index.ts
│ ├── navigation.ts
│ └── theme.ts
├── content/
│ ├── blogs/
│ │ ├── retroui-with-payload-cms.mdx
│ │ ├── top-10-nextjs-ui-library.mdx
│ │ ├── top-5-react-ui-library.mdx
│ │ └── why-neobrutalism-is-perfect-for-modern-websites.mdx
│ └── docs/
│ ├── charts/
│ │ ├── area-chart.mdx
│ │ ├── bar-chart.mdx
│ │ ├── line-chart.mdx
│ │ └── pie-chart.mdx
│ ├── components/
│ │ ├── accordion.mdx
│ │ ├── alert.mdx
│ │ ├── avatar.mdx
│ │ ├── badge.mdx
│ │ ├── breadcrumb.mdx
│ │ ├── button.mdx
│ │ ├── calendar.mdx
│ │ ├── card.mdx
│ │ ├── carousel.mdx
│ │ ├── checkbox.mdx
│ │ ├── command.mdx
│ │ ├── context-menu.mdx
│ │ ├── dialog.mdx
│ │ ├── drawer.mdx
│ │ ├── empty.mdx
│ │ ├── input.mdx
│ │ ├── label.mdx
│ │ ├── loader.mdx
│ │ ├── menu.mdx
│ │ ├── popover.mdx
│ │ ├── progress.mdx
│ │ ├── radio.mdx
│ │ ├── select.mdx
│ │ ├── slider.mdx
│ │ ├── sonner.mdx
│ │ ├── switch.mdx
│ │ ├── tab.mdx
│ │ ├── table.mdx
│ │ ├── text.mdx
│ │ ├── textarea.mdx
│ │ ├── toc.mdx
│ │ ├── toggle-group.mdx
│ │ ├── toggle.mdx
│ │ └── tooltip.mdx
│ ├── index.mdx
│ ├── install/
│ │ ├── index.mdx
│ │ ├── nextjs.mdx
│ │ └── vite.mdx
│ └── utils/
│ └── cn.mdx
├── contentlayer.config.ts
├── contexts/
│ └── ThemeContext.tsx
├── lib/
│ ├── payload.ts
│ ├── registry.ts
│ ├── toc.ts
│ └── utils.ts
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── preview/
│ ├── blocks/
│ │ ├── course-card.tsx
│ │ ├── sign-in.tsx
│ │ └── team-members.tsx
│ ├── charts/
│ │ ├── area-chart-style-default.tsx
│ │ ├── area-chart-style-minimal.tsx
│ │ ├── area-chart-style-multiple.tsx
│ │ ├── area-chart-style-stacked.tsx
│ │ ├── bar-chart-style-default.tsx
│ │ ├── bar-chart-style-grouped.tsx
│ │ ├── bar-chart-style-horizontal.tsx
│ │ ├── bar-chart-style-multiple.tsx
│ │ ├── bar-chart-style-stacked.tsx
│ │ ├── line-chart-style-curved.tsx
│ │ ├── line-chart-style-default.tsx
│ │ ├── line-chart-style-dots.tsx
│ │ ├── line-chart-style-multiple.tsx
│ │ ├── pie-chart-style-default.tsx
│ │ ├── pie-chart-style-donut.tsx
│ │ └── pie-chart-style-small.tsx
│ └── components/
│ ├── accordion-style-default.tsx
│ ├── alert-style-all-status.tsx
│ ├── alert-style-default.tsx
│ ├── alert-style-solid.tsx
│ ├── alert-style-with-icon.tsx
│ ├── avatar-style-circle-fallbacks.tsx
│ ├── avatar-style-circle-sizes.tsx
│ ├── avatar-style-circle.tsx
│ ├── badge-style-default.tsx
│ ├── badge-style-rounded.tsx
│ ├── badge-style-sizes.tsx
│ ├── badge-style-variants.tsx
│ ├── breadcrumb-custom-separator.tsx
│ ├── breadcrumb-link-component.tsx
│ ├── breadcrumb-style-collapsed.tsx
│ ├── breadcrumb-style-default.tsx
│ ├── button-style-default.tsx
│ ├── button-style-icon.tsx
│ ├── button-style-link.tsx
│ ├── button-style-outline.tsx
│ ├── button-style-secondary.tsx
│ ├── button-style-with-icon.tsx
│ ├── calendar-style-default.tsx
│ ├── card-style-commerce.tsx
│ ├── card-style-default.tsx
│ ├── card-style-testimonial.tsx
│ ├── carousel-style-default.tsx
│ ├── carousel-style-sizes.tsx
│ ├── carousel-style-vertical.tsx
│ ├── checkbox-style-default.tsx
│ ├── checkbox-style-sizes.tsx
│ ├── checkbox-style-variants.tsx
│ ├── command-style-default.tsx
│ ├── command-style-dialog.tsx
│ ├── context-menu-style-default.tsx
│ ├── dialog-style-default.tsx
│ ├── dialog-style-width-variant.tsx
│ ├── dialog-style-with-footer.tsx
│ ├── dialog-style-with-form.tsx
│ ├── drawer-style-default.tsx
│ ├── drawer-style-right-direction.tsx
│ ├── empty-style-custom-everything.tsx
│ ├── empty-style-custom-icon.tsx
│ ├── empty-style-default.tsx
│ ├── empty-style-table.tsx
│ ├── input-style-default.tsx
│ ├── input-style-error.tsx
│ ├── input-style-with-label.tsx
│ ├── label-style-default.tsx
│ ├── label.tsx
│ ├── loader-style-custom.tsx
│ ├── loader-style-default.tsx
│ ├── loader-style-outline.tsx
│ ├── loader-style-sizes.tsx
│ ├── loader-style-solid.tsx
│ ├── menu-style-default.tsx
│ ├── popover-style-default-shadow.tsx
│ ├── popover-style-default.tsx
│ ├── progress-style-default.tsx
│ ├── radio-style-default.tsx
│ ├── radio-style-sizes.tsx
│ ├── radio-style-variants.tsx
│ ├── retro-player.tsx
│ ├── select-style-default.tsx
│ ├── slider-style-default.tsx
│ ├── sonner-style-colored-status.tsx
│ ├── sonner-style-default.tsx
│ ├── sonner-style-error.tsx
│ ├── sonner-style-status.tsx
│ ├── switch-style-default.tsx
│ ├── switch-style-disabled.tsx
│ ├── tab-style-default.tsx
│ ├── table-style-default.tsx
│ ├── table-with-checkbox.tsx
│ ├── table-with-sticky-header.tsx
│ ├── text-headings.tsx
│ ├── textarea-style-default.tsx
│ ├── toc-style-default.tsx
│ ├── toc-style-depth.tsx
│ ├── toc-style-manual.tsx
│ ├── toggle-group-style-default.tsx
│ ├── toggle-group-style-outline-muted.tsx
│ ├── toggle-group-style-outlined.tsx
│ ├── toggle-group-style-solid.tsx
│ ├── toggle-style-default.tsx
│ ├── toggle-style-outline-muted.tsx
│ ├── toggle-style-outlined.tsx
│ ├── toggle-style-solid.tsx
│ ├── tooltip-style-default.tsx
│ ├── tooltip-style-primary.tsx
│ ├── tooltip-style-solid.tsx
│ └── typography-p.tsx
├── public/
│ └── r/
│ ├── accordion-style-default.json
│ ├── accordion.json
│ ├── alert-style-all-status.json
│ ├── alert-style-default.json
│ ├── alert-style-solid.json
│ ├── alert-style-with-icon.json
│ ├── alert.json
│ ├── area-chart.json
│ ├── avatar-style-circle-sizes.json
│ ├── avatar-style-circle.json
│ ├── avatar-style-fallbacks.json
│ ├── avatar.json
│ ├── badge-style-default.json
│ ├── badge-style-sizes.json
│ ├── badge-style-variants.json
│ ├── badge.json
│ ├── bar-chart.json
│ ├── breadcrumb.json
│ ├── button-style-default.json
│ ├── button-style-link.json
│ ├── button-style-outline.json
│ ├── button-style-secondary.json
│ ├── button-style-with-icon.json
│ ├── button.json
│ ├── calendar.json
│ ├── card-style-commerce.json
│ ├── card-style-default.json
│ ├── card-style-testimonial.json
│ ├── card.json
│ ├── carousel.json
│ ├── checkbox-style-default.json
│ ├── checkbox-style-toggle.json
│ ├── checkbox.json
│ ├── command.json
│ ├── context-menu.json
│ ├── dialog-style-default.json
│ ├── dialog-style-width-variant.json
│ ├── dialog-style-with-footer.json
│ ├── dialog-style-with-form.json
│ ├── dialog.json
│ ├── drawer.json
│ ├── input-style-default.json
│ ├── input-style-error.json
│ ├── input-style-with-label.json
│ ├── input.json
│ ├── label.json
│ ├── line-chart.json
│ ├── loader.json
│ ├── menu-style-default.json
│ ├── menu.json
│ ├── pie-chart.json
│ ├── popover-style-default-shadow.json
│ ├── popover-style-default.json
│ ├── popover-style-primary-shadow.json
│ ├── popover-style-primary.json
│ ├── popover.json
│ ├── progress-style-default.json
│ ├── progress.json
│ ├── radio-style-default.json
│ ├── radio-style-sizes.json
│ ├── radio-style-variants.json
│ ├── radio.json
│ ├── registry.json
│ ├── select-style-default.json
│ ├── select.json
│ ├── slider.json
│ ├── sonner-style-default.json
│ ├── sonner-style-error.json
│ ├── sonner-style-rich-colors.json
│ ├── sonner-style-warning.json
│ ├── sonner.json
│ ├── switch-style-default.json
│ ├── switch-style-disabled.json
│ ├── switch.json
│ ├── tab-style-default.json
│ ├── tab.json
│ ├── table-style-default.json
│ ├── table-with-checkbox.json
│ ├── table-with-sticky-header.json
│ ├── table.json
│ ├── text-headings.json
│ ├── text.json
│ ├── textarea-style-default.json
│ ├── textarea.json
│ ├── toc.json
│ ├── toggle-group-outlined.json
│ ├── toggle-group-style-default.json
│ ├── toggle-group-style-outline-muted.json
│ ├── toggle-group-style-outlined.json
│ ├── toggle-group-style-solid.json
│ ├── toggle-group.json
│ ├── toggle-style-default.json
│ ├── toggle-style-outline-muted.json
│ ├── toggle-style-outlined.json
│ ├── toggle-style-solid.json
│ ├── toggle.json
│ ├── tooltip-style-default.json
│ ├── tooltip-style-primary.json
│ ├── tooltip-style-solid.json
│ ├── tooltip.json
│ ├── typography-p.json
│ └── utils.json
├── registry.json
├── showcase.json
├── tasks.md
├── tsconfig.json
└── types/
├── index.d.ts
└── unist.d.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.json
================================================
{
"extends": "next/core-web-vitals"
}
================================================
FILE: .github/FUNDING.yml
================================================
github: Logging-Studio
================================================
FILE: .github/workflows/deploy.yml
================================================
name: "Deploy to VPS"
on:
release:
types:
- published
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Check out the repository
uses: actions/checkout@v4
- name: Setup Docker Buildx
uses: docker/setup-buildx-action@v3
- name: DockerHub login
uses: docker/login-action@v3
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Build and push to DockerHub
run: |
docker build -t devarifhossain/retroui:1.2.0 ./
docker push devarifhossain/retroui:1.2.0
# - name: Set up SSH
# uses: webfactory/ssh-agent@v0.9.0
# with:
# ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
# - name: Add VPS to known_hosts
# run: |
# ssh-keyscan -H ${{ secrets.VPS_HOST }} >> ~/.ssh/known_hosts
# - name: Deploy to VPS
# run: |
# ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d"
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# contentlayer
.contentlayer
package-lock.json
.env
================================================
FILE: .prettierrc
================================================
{
"tabWidth": 2,
"semi": true,
"printWidth": 80
}
================================================
FILE: .vscode/settings.json
================================================
{
"cSpell.words": ["clsx", "rehype", "retroui"],
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
],
"yaml.schemas": {
"https://json.schemastore.org/github-workflow.json": "file:///Users/arifhossain/Projects/ptm/retro-ui/.github/workflows/deploy.yml"
},
}
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to RetroUI
Thank you for your interest in contributing to RetroUI 🙏. I hope this guide to help you get started.
## Getting Started
1. Fork this repository
2. Clone the forked repository to your local machine.
```bash
git clone https://github.com/<YOUR_USERNAME>/retroui.git
```
3. Navigate to the project directory
```bash
cd retroui
```
4. Create a new branch
```bash
git switch -c new-branch-name
```
5. install dependencies
```bash
pnpm i
```
6. Run the project
```bash
pnpm dev
```
## Adding a New Component
1. Create the main component in `/components/retroui/NewComponent/NewComponent.tsx`
```ts
export function NewComponent() {
return <div>This is your component.</div>;
}
```
2. Export your component in `/components/retroui/NewComponent/index.ts` and `/components/retroui/index.ts`
```ts
export * from "./NewComponent";
```
3. Create a preview to showcase your component in `preview/components/new-component.tsx`
```typescript
export default function NewComponentStyle() {
return (
<span className="px-2.5 py-1 text-sm font-semibold border-2 border-red-600 text-red-600">
Error
</span>
);
}
```
4. Add your component preview to the list of components registry in `config/components.ts`
```typescript
export const componentConfig = {
registry: {
...
"new-component": {
name: "new-component",
filePath: "preview/components/new-component.tsx",
preview: lazy(() => import("@/preview/components/new-component")),
},
},
};
```
5. Add documentation for your component in `content/docs/components/...mdx`
```md
---
title: Badge
description: The component that looks like a button but isn't clickable!
lastUpdated: 08 Oct, 2024
---
...
### New Component
<ComponentShowcase name="new-component" /> // name of the component in the registry
```
## Ask for Help
For any help or questions, please open a new GitHub issue.
================================================
FILE: Dockerfile
================================================
FROM node:22.7.0-slim
WORKDIR /retroui
COPY ./package.json ./pnpm-lock.yaml ./
RUN npm i pnpm -g \
&& pnpm install --frozen-lockfile --no-cache \
&& pnpm store prune
COPY . .
RUN pnpm run build
EXPOSE 3000
CMD [ "pnpm", "run", "start" ]
================================================
FILE: LICENCE.md
================================================
MIT License
Copyright (c) 2024 Arif Hossain
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Retro UI
RetroUI is a retro-styled Tailwind CSS component library for modern web apps.
### [Why Another UI Library?](https://www.youtube.com/watch?v=7goHwy6k3gU)
### [Documentation](https://retroui.dev/docs)
### [Contributing Guide](./CONTRIBUTING.md)
## License
[MIT](./LICENCE.md)
<br />
## Supported By
<a href="https://vercel.com/oss"><img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" /></a>
================================================
FILE: app/(docs)/docs/[[...slug]]/page.tsx
================================================
import React from "react";
import { allDocs } from "contentlayer/generated";
import { notFound } from "next/navigation";
import { format } from "date-fns";
import MDX from "@/components/MDX";
import { Text } from "@/components/retroui/Text";
import { Metadata } from "next";
import { MoveUpRightIcon } from "lucide-react";
import { generateToc } from "@/lib/toc";
import TableOfContents from "@/components/TableOfContents";
interface IProps {
params: { slug: string[] };
}
function getDocParams({ params }: IProps) {
const slug = `/docs${params.slug ? `/${params.slug.join("/")}` : ""}`;
const doc = allDocs.find((doc) => doc.url === slug);
if (!doc) {
return null;
}
return doc;
}
export async function generateMetadata({ params }: IProps): Promise<Metadata> {
const doc = getDocParams({ params });
if (!doc) {
return {
title: "Not Found | Retro UI",
};
}
return {
title: `${doc.title} | Retro UI`,
description: doc.description,
};
}
export default async function page({ params }: IProps) {
const doc = getDocParams({ params });
if (!doc) {
return notFound();
}
const toc = await generateToc(doc.body.raw);
return (
<>
{/* Main Content */}
<div className="flex-1 space-y-12 py-12 px-4 max-w-2xl mx-auto w-full">
<div className="border-b pb-6">
<Text as="h1" className="text-4xl">
{doc.title}
</Text>
<p className="text-lg text-muted-foreground mt-2">
{doc.description}
</p>
{doc.links && (
<div className="flex space-x-4 text-sm mt-4 text-black">
{doc.links?.api_reference && (
<a
className="flex items-center bg-gray-200 px-1.5 py-.5"
href={doc.links.api_reference}
target="_blank"
>
API Reference <MoveUpRightIcon className="h-3 w-3 ml-1" />
</a>
)}
{doc.links && doc.links?.source && (
<a
className="flex items-center bg-gray-200 px-1.5 py-.5"
href={doc.links.source}
target="_blank"
>
Source <MoveUpRightIcon className="h-3 w-3 ml-1" />
</a>
)}
</div>
)}
</div>
<div>
<MDX code={doc.body.code} />
</div>
<p className="text-right">
Last Updated: {format(doc.lastUpdated, "dd MMM, yyy")}
</p>
</div>
{/* Table of Contents */}
<div className="hidden lg:block lg:w-60 flex-shrink-0 sticky top-36 self-start space-y-6">
<TableOfContents toc={toc} />
</div>
</>
);
}
================================================
FILE: app/(docs)/docs/layout.tsx
================================================
import SideNav from "@/components/SideNav";
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Getting Started | RetroUI",
};
export default function ComponentLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<div className="relative max-w-7xl mx-auto">
<div className="max-lg:px-4">
<div className="flex lg:gap-20 items-start">
{/* Sidebar */}
<div className="hidden lg:block w-60 flex-shrink-0 sticky top-28 self-start">
<SideNav />
</div>
{children}
</div>
</div>
</div>
);
}
================================================
FILE: app/(marketing)/blogs/[slug]/page.tsx
================================================
import React from "react";
import { notFound } from "next/navigation";
import { format } from "date-fns";
import { Avatar, Badge, Button, Text } from "@/components/retroui";
import { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { RichText } from "@payloadcms/richtext-lexical/react";
import { JSXConverters } from "@/components/RichTextConverter";
interface IProps {
params: { slug: string[] };
}
type Post = {
id: number,
title: string,
slug: string,
publishedAt: string,
content: any,
excerpt: string,
tags: {
name: string,
slug: string
}[],
featuredImage: {
url: string,
alt: string
},
}
async function getBlogParams({ params }: IProps) {
const res = await fetch(`https://cms.retroui.dev/api/posts/slug/${params.slug}`, {
method: 'GET',
credentials: 'include',
next: {
revalidate: 60,
},
})
const post = await res.json()
return post;
}
export async function generateMetadata({ params }: IProps): Promise<Metadata> {
const blog: Post = await getBlogParams({ params });
if (!blog) {
return {
title: "Not Found | Retro UI",
};
}
return {
title: `${blog.title} | RetroUI Blogs`,
description: blog.excerpt,
alternates: {
canonical: `https://www.retroui.dev/blogs/${blog.slug}`,
},
openGraph: {
type: "article",
images: blog.featuredImage.url,
title: `${blog.title} | RetroUI Blogs`,
publishedTime: blog.publishedAt,
authors: ["Arif Hossain"],
},
};
}
export default async function page({ params }: IProps) {
const blog: Post | null = await getBlogParams({ params });
if (!blog) {
return notFound();
}
return (
<article className="max-w-3xl mt-8 mx-auto">
<div className="border-b border-black pb-6 mb-6">
<div className="flex items-center gap-4 mb-6">
<Text className="text-muted-foreground text-sm font-medium">
{format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
</Text>
<Text>|</Text>
<div className="flex items-center gap-3">
{blog.tags.map((tag) => (
<Badge
key={tag.slug}
size="sm"
variant="surface"
className={`bg-${["red", "green", "blue", "yellow", "purple", "pink"][
blog.tags.indexOf(tag) % 6
]
}-300`}
>
{tag.name}
</Badge>
))}
</div>
</div>
<Text as="h1" className="mb-2">
{blog.title}
</Text>
<Text className="text-muted-foreground mb-12">
{blog.excerpt}
</Text>
<Image
src={`https://cms.retroui.dev${blog.featuredImage.url}`}
alt={blog.featuredImage.alt}
width={1200}
height={800}
className="mb-8"
/>
<div className="flex justify-between items-start">
<div className="flex gap-4">
<Avatar>
<Avatar.Image src="https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/arif.jpg" alt="Arif Hossain" />
<Avatar.Fallback>AH</Avatar.Fallback>
</Avatar>
<div>
<Text as="h5">Arif Hossain</Text>
<Link
href={`https://x.com/@ariflogs`}
target="_blank"
className="text-muted-foreground"
>
@ariflogs
</Link>
</div>
</div>
<Link
target="_blank"
href={`https://x.com/share?url=${`https://www.retroui.dev/blogs/${blog.slug}`}&text=${blog.title}.%0ACheck it out 👉`}
>
<Button size="sm" variant="outline">
Share on X
</Button>
</Link>
</div>
</div>
<RichText
data={blog.content}
converters={JSXConverters}
/>
<hr className="my-12" />
<Button asChild aria-label="Return to all blog posts" variant="secondary">
<Link href="/blogs" className="inline-flex">← Back to blogs</Link>
</Button>
</article>
);
}
================================================
FILE: app/(marketing)/blogs/layout.tsx
================================================
import { Metadata } from "next";
import Footer from "@/components/footer";
export const metadata: Metadata = {
title: "RetroUI Blogs",
};
export default function BlogsLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
<div className="max-w-6xl mx-auto py-12 px-4 lg:px-0">{children}</div>
<Footer />
</>
);
}
================================================
FILE: app/(marketing)/blogs/page.tsx
================================================
import { allBlogs } from "@/.contentlayer/generated";
import { Avatar, Card, Text } from "@/components/retroui";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { format } from "date-fns";
import { sdk } from "@/lib/payload"
type Post = {
id: number,
title: string,
slug: string,
publishedAt: string,
excerpt: string,
featuredImage: {
url: string,
alt: string
},
}
async function page() {
const res = await fetch("https://cms.retroui.dev/api/posts/published", {
method: 'GET',
credentials: 'include',
next: {
revalidate: 60,
},
})
const posts = await res.json()
return (
<div>
<Text as="h1" className="mb-12">
All RetroUI Blogs
</Text>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
{posts.docs.map((blog: Post) => (
<Link href={`/blogs/${blog.slug}`} key={blog.id}>
<Card className="shadow-none hover:-translate-x-2 hover:-translate-y-2 hover:shadow-lg">
<Card.Header>
<Image
src={`https://cms.retroui.dev${blog.featuredImage?.url}`}
alt={blog.title}
width={600}
height={400}
className="mb-6 h-50"
/>
<Text as="p" className="mb-2 text-sm text-muted-foreground">
{format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
</Text>
<Card.Title className="line-clamp-2 text-2xl">{blog.title}</Card.Title>
<Card.Description className="line-clamp-2 text-sm">{blog.excerpt}</Card.Description>
</Card.Header>
{/* <Card.Content className="pt-0">
<div className="flex gap-2 items-center">
<Avatar className="h-8 w-8 border">
<Avatar.Image src="https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/arif.jpg" alt="Arif Hossain" />
<Avatar.Fallback>AH</Avatar.Fallback>
</Avatar>
<Text className="text-sm">Arif Hossain</Text>
</div>
</Card.Content> */}
</Card>
</Link>
))}
</div>
</div>
);
}
export default page;
================================================
FILE: app/(marketing)/page.tsx
================================================
"use server";
import {
Button,
Text,
Input,
Textarea,
Card,
Avatar,
Badge,
CommandDisplay,
} from "@/components/retroui";
import AccordionStyleDefault from "@/preview/components/accordion-style-default";
import AlertStyleDefaultIcon from "@/preview/components/alert-style-with-icon";
import AvatarStyleCircle from "@/preview/components/avatar-style-circle-sizes";
import BadgeStyleVariants from "@/preview/components/badge-style-variants";
import {
ArrowRightIcon,
ChartArea,
GithubIcon,
MessageCircle,
PaintbrushIcon,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import Footer from "@/components/footer";
import WorksWithSection from "@/components/WorksWithSection";
async function getContributors(): Promise<
{ avatar: string; username: string; url: string }[]
> {
const request = await fetch(
`https://api.github.com/repos/logging-studio/RetroUI/contributors`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
},
);
const contributorsList = await request.json();
return contributorsList.map(
(c: { avatar_url: string; login: string; html_url: string }) => ({
avatar: c.avatar_url,
username: c.login,
url: c.html_url,
}),
);
}
export default async function Home() {
const contributors = await getContributors();
return (
<main>
<div className="bg-image bg-cover bg-no-repeat bg-center flex flex-col items-center min-h-screen">
<section className="container max-w-6xl mx-auto px-4 lg:px-0 text-gray-900 flex justify-center items-center lg:gap-28 my-28">
<div className="text-center lg:text-left w-full lg:w-2/3">
<Link href="https://neo.retroui.dev" target="_blank" className="mb-4 inline-block">
<Badge>
Introducing Neo/SS
<PaintbrushIcon className="ml-2 h-4 w-4 inline-block" />
</Badge>
</Link>
<Text as="h1" className="text-5xl text-foreground lg:text-6xl mt-8">
Make your projects
<br />
<span className="text-outlined">stand out!</span>
</Text>
<p className="text-lg text-muted-foreground mb-8 mt-4">
A NeoBrutalism styled React + TailwindCSS UI library for building bold, modern web apps.
Perfect for any project using Shadcn/ui.
</p>
<div className="flex flex-col md:flex-row items-center gap-4">
<Link href="/docs" passHref>
<Button
className="w-full"
aria-label="Get Started with RetroUI"
>
Get Started
</Button>
</Link>
<div className="w-full max-w-72 shadow shadow-primary">
<CommandDisplay command='npx shadcn add @retroui/button' />
</div>
</div>
</div>
<div className="hidden lg:block lg:w-1/3">
<Image
alt="retro tv radio"
src="/images/tv_radio.png"
layout="responsive"
width={500}
height={500}
className="h-full w-full"
/>
</div>
</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> */}
<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>
<Card.Title>Button</Card.Title>
</Card.Header>
<Card.Content>
<div className="flex flex-wrap gap-4">
<Button>Primary</Button>
<Button variant="outline">Outline</Button>
</div>
</Card.Content>
</Card>
<Card className="w-full bg-background shadow-none">
<Card.Header>
<Card.Title>Badge</Card.Title>
</Card.Header>
<Card.Content>
<BadgeStyleVariants />
</Card.Content>
</Card>
<Card className="w-full bg-background shadow-none">
<Card.Header>
<Card.Title>Avatar</Card.Title>
</Card.Header>
<Card.Content>
<AvatarStyleCircle />
</Card.Content>
</Card>
<Card className="w-full bg-background shadow-none">
<Card.Header>
<Card.Title>Accordion</Card.Title>
</Card.Header>
<Card.Content>
<AccordionStyleDefault />
</Card.Content>
</Card>
<Card className="w-full bg-background shadow-none">
<Card.Header>
<Card.Title>Input & Textarea</Card.Title>
</Card.Header>
<Card.Content>
<Input />
<div className="h-4"></div>
<Textarea className="border-foreground" />
</Card.Content>
</Card>
<Card className="w-full bg-background shadow-none">
<Card.Header>
<Card.Title>Alert</Card.Title>
</Card.Header>
<Card.Content>
<AlertStyleDefaultIcon />
</Card.Content>
</Card>
</div>
</section>
</div>
<section className="container max-w-6xl mx-auto px-4 lg:px-0 flex flex-col lg:flex-row gap-12 lg:gap-16 lg:grid-cols-2 my-36">
<div className="w-full lg:w-3/5">
<Text as="h2">
Easily <span className="text-outlined">Customize</span> to Your Own
Needs! 🛠️
</Text>
<div className="flex flex-col space-y-1 mt-6 mb-8 text-muted-foreground">
<Text className="text-lg">
Copy-Paste Ready: Components that you can just copy paste.
</Text>
<Text className="text-lg">
Tailwind Based: Customizable with Tailwind CSS.
</Text>
<Text className="text-lg">
Type Safe: Typescript support for all components.
</Text>
</div>
<Link href="/docs/components/button" passHref>
<Button>See Examples</Button>
</Link>
</div>
<div className="w-full lg:w-2/5">
<Image
src="/images/code_show.svg"
width={600}
height={400}
alt="retroui code showcase"
/>
</div>
</section>
<section className="container max-w-6xl max-lg:px-4 mx-auto bg-[url('/images/starts_bg.svg')] bg-cover bg-no-repeat py-12">
<Text as="h2" className="text-center mb-28 max-w-2xl mx-auto">
A <span className="text-outlined">Growing</span> Community of Developers and Designers.
</Text>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-3xl mx-auto">
<div className="flex flex-col items-start relative mx-auto">
<Text as="h3" className="mb-2 font-sans">
Github Stars
</Text>
<Text className="text-outlined text-7xl lg:text-8xl font-head">
1,200+
</Text>
<Image
src="/images/shooting_star.svg"
width={120}
height={120}
alt="shotting stars"
className="absolute -top-[80px] -left-[80px]"
/>
</div>
<div className="flex flex-col items-start relative mx-auto">
<Text as="h3" className="mb-2 font-sans">
Discord Members
</Text>
<Text className="text-outlined text-7xl lg:text-8xl font-head">
100+
</Text>
<Image
src="/images/shooting_star.svg"
width={120}
height={120}
alt="shotting stars"
className="absolute -right-[80px] -bottom-[80px] rotate-180"
/>
</div>
</div>
</section>
<WorksWithSection />
<section className="container max-w-6xl mx-auto border-2 bg-primary border-black py-16 px-4 lg:p-16 my-36">
<Text as="h2" className="text-center text-black mb-2">
Community Contributors
</Text>
<Text className="text-xl text-center text-black mb-8">
RetroUI core is free and open-source, and it is made possible by our
awesome contributors.
</Text>
<div className="max-w-2xl mx-auto flex flex-wrap justify-center gap-2 lg:gap-4">
{contributors.map((contributor) => (
<Link
key={contributor.username}
href={contributor.url}
target="_blank"
passHref
className="flex flex-col items-center"
>
<Avatar className="h-10 w-10 border-black lg:h-16 lg:w-16">
<Avatar.Image
src={contributor.avatar}
alt={contributor.username}
/>
</Avatar>
</Link>
))}
</div>
<div className="flex flex-col lg:flex-row items-center justify-center gap-4 mt-12">
<Link
href="https://github.com/logging-studio/retroui"
target="_blank"
passHref
>
<Button
className="bg-background"
variant="outline"
>
<GithubIcon size="16" className="mr-2" />
Star on Github
</Button>
</Link>
<Link href="https://discord.gg/Jum3NJxK6Q" target="_blank" passHref>
<Button
className="bg-background"
variant="outline"
>
<MessageCircle size="16" className="mr-2" />
Join Community
</Button>
</Link>
</div>
</section>
<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 flex-col md:flex-row items-center gap-10">
<div className="w-full md:w-3/5">
<Text as="h1" className="text-4xl lg:text-5xl">
Ship <span className="text-outlined">Faster</span> With Blocks
<br />
and Templates 🚀
</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>
<Link href="https://pro.retroui.dev/blocks" target="_blank">
<Button>Explore RetroUI Pro</Button>
</Link>
</div>
<div className="w-full md:w-2/5">
<Image
src="/images/pro_showcase.svg"
width={1920}
height={1080}
alt="retroui pro ui blocks showcase"
/>
</div>
</div>
</div>
</section>
<Footer />
</main>
);
}
================================================
FILE: app/(marketing)/showcase/page.tsx
================================================
import showcaseData from "@/showcase.json";
import { Card, Text, Button } from "@/components/retroui";
import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import Footer from "@/components/footer";
export default function ShowcasePage() {
return (
<>
<div className="max-w-6xl mx-auto py-12 px-4 lg:px-0">
<div className="mb-12 flex flex-col gap-2 items-start">
<Text as="h1">
Showcase
</Text>
<Text className="text-lg text-muted-foreground mb-4">
Build something cool using RetroUI? Share it with the community.
</Text>
<Button asChild>
<Link href="https://github.com/Logging-Studio/RetroUI/discussions/102" target="_blank">
Add Your Project
</Link>
</Button>
</div>
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{Object.entries(showcaseData).map(([key, value]) => (
<li key={key}>
<Card className="hover:shadow">
<Card.Header>
<Image
src={value.cover}
alt={value.name}
width={600}
height={400}
className="mb-6 border-2 h-[200px] w-full object-fit border-muted-foreground"
/>
<div className="flex items-center justify-between gap-2">
<Card.Title>{value.name}</Card.Title>
<Button asChild size="sm" variant="secondary">
<Link href={value.url} target="_blank" rel="noopener noreferrer">
Visit <ArrowUpRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</div>
</Card.Header>
</Card>
</li>
))}
</ul>
</div>
<Footer />
</>
);
}
================================================
FILE: app/(marketing)/themes/page.tsx
================================================
"use client";
import {
Card,
Select,
Text,
} from "@/components/retroui";
import ChartStyleMultiple from "@/preview/charts/area-chart-style-multiple";
import CourseCard from "@/preview/blocks/course-card";
import SignInBlock from "@/preview/blocks/sign-in";
import BarChartStyleMultiple from "@/preview/charts/bar-chart-style-multiple";
import TeamMembersBlock from "@/preview/blocks/team-members";
import CopyTheme from "@/components/CopyTheme";
import { Theme } from "@/config/theme";
import { useTheme } from "@/contexts/ThemeContext";
const themes: {value: Theme, label: string}[] = [
{
value: Theme.Default,
label: "Default",
},
{
value: Theme.Purple,
label: "Purple",
},
{
value: Theme.Lime,
label: "Lime",
},
{
value: Theme.Red,
label: "Red",
},
{
value: Theme.Lavender,
label: "Lavender",
},
{
value: Theme.Orange,
label: "Orange",
},
{
value: Theme.Green,
label: "Green",
},
];
const variants = [
{
value: "box",
label: "Box",
},
{
value: "with-radius",
label: "Rounded",
},
];
export default function Themes() {
const { colorTheme, variant, setColorTheme, setVariant } = useTheme();
return (
<section className={`theme-${colorTheme} ${variant} container max-w-8xl mx-auto py-12`}>
<Text as="h1" className="font-normal mb-12">Don't like <span className="text-primary">{colorTheme === Theme.Default ? "Yellow" : colorTheme.slice(0, 1).toUpperCase() + colorTheme.slice(1)}?</span><br />Well, we have more! 🫡</Text>
<div className="flex flex-col lg:flex-row gap-6 items-center justify-between mb-6">
<div className="flex gap-6">
<Select value={colorTheme} onValueChange={(value: Theme) => setColorTheme(value)}>
<Select.Trigger>
<Select.Value placeholder="Select Color" />
</Select.Trigger>
<Select.Content>
<Select.Group>
{
themes.map((theme) => (
<Select.Item key={theme.value} value={theme.value}>
{theme.label}
</Select.Item>
))
}
</Select.Group>
</Select.Content>
</Select>
<Select value={variant} onValueChange={(value) => setVariant(value)}>
<Select.Trigger>
<Select.Value placeholder="Select Variant" />
</Select.Trigger>
<Select.Content>
<Select.Group>
{
variants.map((variant) => (
<Select.Item key={variant.value} value={variant.value}>
{variant.label}
</Select.Item>
))
}
</Select.Group>
</Select.Content>
</Select>
</div>
<CopyTheme theme={colorTheme} hasRadius={variant === "with-radius"} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full gap-6">
<div className="flex flex-col gap-6">
<Card className="w-full border-muted bg-background shadow-none">
<Card.Content>
<CourseCard />
</Card.Content>
</Card>
<Card className="w-full border-muted bg-background shadow-none">
<Card.Content>
<TeamMembersBlock />
</Card.Content>
</Card>
</div>
<div className="flex flex-col gap-6">
<Card className="w-full border-muted bg-background shadow-none">
<Card.Content>
<ChartStyleMultiple />
</Card.Content>
</Card>
<Card className="w-full border-muted bg-background shadow-none">
<Card.Content>
<BarChartStyleMultiple />
</Card.Content>
</Card>
</div>
<Card className="w-full border-muted bg-background shadow-none">
<Card.Content>
<SignInBlock />
</Card.Content>
</Card>
</div>
</section>
);
}
================================================
FILE: app/(sink)/demo/components/page.tsx
================================================
"use client";
import React from "react";
import { TableOfContents } from "@/components/retroui/TableOfContents";
export default function page() {
return (
<div className="container max-w-6xl mx-auto space-y-6 flex">
<div className="flex-1">
<h1>Table of Contents</h1>
<h1>Table of Contents 1</h1>
<div className="h-80"></div>
<h2>Table of Contents 2</h2>
<div className="h-80"></div>
<h3>Table of Contents 3</h3>
<h3>Table of Contents 3</h3>
<h3>Table of Contents 3</h3>
<div className="h-80"></div>
<h4>Table of Contents 4</h4>
<h4>Table of Contents 4</h4>
<h4>Table of Contents 4</h4>
<div className="h-80"></div>
<h5>Table of Contents 5</h5>
<h6>Table of Contents 6</h6>
</div>
<TableOfContents />
</div>
);
}
================================================
FILE: app/actions/newsletter.ts
================================================
"use server";
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);
export async function subscribeToNewsletter(email: string) {
try {
const { data, error } = await resend.contacts.create({
email,
audienceId: process.env.RESEND_AUDIENCE_ID!,
});
if (error) {
return { success: false, error: error.message };
}
return { success: true, data };
} catch (error) {
return {
success: false,
error: error instanceof Error ? error.message : "Failed to subscribe",
};
}
}
================================================
FILE: app/global.css
================================================
@import "tailwindcss";
@import "tw-animate-css";
@theme inline {
--font-head: var(--font-head);
--font-sans: var(--font-sans);
--radius: var(--radius);
--shadow-xs: 1px 1px 0 0 var(--border);
--shadow-sm: 2px 2px 0 0 var(--border);
--shadow: 3px 3px 0 0 var(--border);
--shadow-md: 4px 4px 0 0 var(--border);
--shadow-lg: 6px 6px 0 0 var(--border);
--shadow-xl: 10px 10px 0 1px var(--border);
--shadow-2xl: 16px 16px 0 1px var(--border);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-primary-hover: var(--primary-hover);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--background-image: var(--background-image);
--chart-1: var(--chart-1);
--chart-2: var(--chart-2);
--chart-3: var(--chart-3);
--chart-4: var(--chart-4);
--chart-5: var(--chart-5);
}
:root {
--radius: 0;
--background: #fff;
--foreground: #000;
--card: #fff;
--card-foreground: #000;
--primary: #ffdb33;
--primary-hover: #ffcc00;
--primary-foreground: #000;
--secondary: #000;
--secondary-foreground: #fff;
--muted: #d5d5d5;
--muted-foreground: #5a5a5a;
--accent: #fae583;
--accent-foreground: #000;
--destructive: #e63946;
--destructive-foreground: #fff;
--border: #000;
--background-image: url("/images/banner_void_2.svg");
--chart-1: #c4a1ff;
--chart-2: #01ffcc;
--chart-3: #e7f192;
--chart-4: #000;
--chart-5: #ff30cd;
}
.dark {
--background: #1a1a1a;
--foreground: #f5f5f5;
--card: #242424;
--card-foreground: #f5f5f5;
--primary: #ffdb33;
--primary-hover: #ffcc00;
--primary-foreground: #000;
--secondary: #3a3a3a;
--secondary-foreground: #f5f5f5;
--muted: #3f3f46;
--muted-foreground: #a0a0a0;
--accent: #fae583;
--accent-foreground: #000;
--destructive: #e63946;
--destructive-foreground: #fff;
--border: #5c5c5c;
--background-image: url("/images/bg_void_3.svg");
--chart-1: #ffdb33;
--chart-2: #000;
--chart-3: #aeaeae;
--chart-4: #fae583;
--chart-5: #e63946;
}
.with-radius {
--radius: 0.5rem;
}
.theme-purple {
--background: #f5f5f5;
--foreground: #1a1a1a;
--card: #FFFFFF;
--card-foreground: #f5f5f5;
--primary: #5F4FE6;
--primary-hover: #4938C2;
--primary-foreground: #fff;
--secondary: #3a3a3a;
--secondary-foreground: #f5f5f5;
--muted: #CFCCEA;
--muted-foreground: #5B5686;
--accent: #FED13B;
--accent-foreground: #000000;
--destructive: #EF4444;
--destructive-foreground: #fff;
--border: #3a3a3a;
--background-image: url("/images/bg_void_3.svg");
--chart-1: #ffdb33;
--chart-2: #000;
--chart-3: #aeaeae;
--chart-4: #fae583;
--chart-5: #e63946;
}
.dark .theme-purple {
--background: #0f0f12;
--foreground: #f5f5f5;
--card: #1a1a1d;
--card-foreground: #eaeaea;
--primary: #7b6df5;
--primary-hover: #5F4FE6;
--primary-foreground: #fff;
--secondary: #2a2a2e;
--secondary-foreground: #eaeaea;
--muted: #3d395a;
--muted-foreground: #a49fce;
--accent: #FED13B;
--accent-foreground: #000;
--destructive: #EF4444;
--destructive-foreground: #fff;
--border: #2e2e32;
}
.theme-lime {
--background: #FFFFFF;
--foreground: #000000;
--card: #FFFFFF;
--card-foreground: #000000;
--input: #FFFFFF;
--border: #000000;
--ring: #AAFC3D;
--primary: #AAFC3D;
--primary-hover: #97f819;
--primary-foreground: #000000;
--secondary: #000000;
--secondary-foreground: #FFFFFF;
--muted: #F3F3F3;
--muted-foreground: #444444;
--accent: #FF4FD8;
--accent-foreground: #000000;
--destructive: #FF0033;
--destructive-foreground: #FFFFFF;
}
.dark .theme-lime {
--background: #0f0f0f;
--foreground: #f5f5f5;
--card: #1a1a1a;
--card-foreground: #FFFFFF;
--input: #2a2a2a;
--border: #333333;
--ring: #AAFC3D;
--primary: #AAFC3D;
--primary-hover: #97f819;
--primary-foreground: #000000;
--secondary: #FFFFFF;
--secondary-foreground: #000000;
--muted: #2a2a2a;
--muted-foreground: #aaaaaa;
--accent: #FF4FD8;
--accent-foreground: #000000;
--destructive: #FF0033;
--destructive-foreground: #FFFFFF;
}
.theme-red {
--background: #FCFFE7;
--foreground: #000000;
--muted: #EFD0D5;
--muted-foreground: #A42439;
--card: #FFFFFF;
--card-foreground: #000000;
--popover: #FFFFFF;
--popover-foreground: #000000;
--border: #000000;
--input: #FFFFFF;
--primary: #EA435F;
--primary-hover: #D00000;
--primary-foreground: #FFFFFF;
--secondary: #FFDA5C;
--secondary-foreground: #000000;
--accent: #CEEBFC;
--accent-foreground: #000000;
--destructive: #D00000;
--destructive-foreground: #FFFFFF;
--ring: #000000;
}
.dark .theme-red {
--background: #0f0f0f;
--foreground: #f5f5f5;
--muted: #3a1f24;
--muted-foreground: #f2a7b2;
--card: #1a1a1a;
--card-foreground: #ffffff;
--popover: #1a1a1a;
--popover-foreground: #ffffff;
--border: #2a2a2a;
--input: #2a2a2a;
--primary: #EA435F;
--primary-hover: #D00000;
--primary-foreground: #ffffff;
--secondary: #FFDA5C;
--secondary-foreground: #000000;
--accent: #2a3b45;
--accent-foreground: #CEEBFC;
--destructive: #D00000;
--destructive-foreground: #ffffff;
--ring: #EA435F;
}
.theme-lavender {
--background: #F9F5F2;
--foreground: #000000;
--muted: #EDE3FF;
--muted-foreground: #5B3B98;
--card: #FFFFFF;
--card-foreground: #000000;
--popover: #FFFFFF;
--popover-foreground: #000000;
--border: #000000;
--input: #FFFFFF;
--primary: #C4A1FF;
--primary-hover: #9678FF;
--primary-foreground: #000000;
--secondary: #E7F193;
--secondary-foreground: #000000;
--accent: #FE91E9;
--accent-foreground: #000000;
--destructive: #FE3B3B;
--destructive-foreground: #FFFFFF;
--ring: #000000;
}
.dark .theme-lavender {
--background: #121014;
--foreground: #f5f5f5;
--muted: #2d2440;
--muted-foreground: #c7b6f3;
--card: #1a1820;
--card-foreground: #ffffff;
--popover: #1a1820;
--popover-foreground: #ffffff;
--border: #2a2a2e;
--input: #2a2a2e;
--primary: #C4A1FF;
--primary-hover: #9678FF;
--primary-foreground: #000000;
--secondary: #E7F193;
--secondary-foreground: #000000;
--accent: #FE91E9;
--accent-foreground: #000000;
--destructive: #FE3B3B;
--destructive-foreground: #ffffff;
--ring: #C4A1FF;
}
.theme-orange {
--background: #FFFFFF;
--foreground: #000000;
--muted: #FFE1C7;
--muted-foreground: #8C3D00;
--card: #FFFFFF;
--card-foreground: #000000;
--popover: #FFFFFF;
--popover-foreground: #000000;
--border: #000000;
--input: #FFFFFF;
--primary: #F07200;
--primary-hover: #ff8011;
--primary-foreground: #FDEAD9;
--secondary: #EF8C27;
--secondary-foreground: #000000;
--accent: #FF6B6B;
--accent-foreground: #000000;
--destructive: #FE3B3B;
--destructive-foreground: #FFFFFF;
--ring: #000000;
}
.dark .theme-orange {
--background: #12100e;
--foreground: #f5f5f5;
--muted: #3a2617;
--muted-foreground: #ffb679;
--card: #1a1a1a;
--card-foreground: #ffffff;
--popover: #1a1a1a;
--popover-foreground: #ffffff;
--border: #2a2a2a;
--input: #2a2a2a;
--primary: #F07200;
--primary-hover: #ff8011;
--primary-foreground: #FDEAD9;
--secondary: #EF8C27;
--secondary-foreground: #000000;
--accent: #FF6B6B;
--accent-foreground: #000000;
--destructive: #FE3B3B;
--destructive-foreground: #ffffff;
--ring: #F07200;
}
.theme-green {
--background: #FFFFFF;
--foreground: #000000;
--muted: #CBE9D8;
--muted-foreground: #1F7751;
--card: #F9F5F2;
--card-foreground: #000000;
--popover: #FFFFFF;
--popover-foreground: #000000;
--border: #000000;
--input: #FFFFFF;
--primary: #599D77;
--primary-hover: #39654c;
--primary-foreground: #FFFFFF;
--secondary: #A3D9B1;
--secondary-foreground: #000000;
--accent: #FFE75A;
--accent-foreground: #000000;
--destructive: #F05D5D;
--destructive-foreground: #FFFFFF;
--ring: #000000;
}
.dark .theme-green {
--background: #0f1210;
--foreground: #f5f5f5;
--muted: #1f3a2d;
--muted-foreground: #9cd9b8;
--card: #181c19;
--card-foreground: #ffffff;
--popover: #181c19;
--popover-foreground: #ffffff;
--border: #2a2e2b;
--input: #2a2e2b;
--primary: #599D77;
--primary-hover: #39654c;
--primary-foreground: #ffffff;
--secondary: #3a6f52;
--secondary-foreground: #ffffff;
--accent: #FFE75A;
--accent-foreground: #000000;
--destructive: #F05D5D;
--destructive-foreground: #ffffff;
--ring: #599D77;
}
body {
font-family: var(--font-sans);
}
/* Firefox scrollbar */
html {
scrollbar-width: auto;
scrollbar-color: var(--muted) var(--foreground);
}
.bg-image {
background-image: var(--background-image);
background-size: cover;
background-position: center;
}
.text-outlined {
letter-spacing: 2px;
text-shadow:
0px 0px 0 var(--primary),
0px 0px 0 var(--primary),
4px 4px 0 var(--primary),
4px 4px 0 var(--primary);
}
/* Syntax Highlighting stuff */
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
}
code.hljs {
padding: 3px 5px;
}
.hljs {
background: #222;
color: #aaa;
}
.hljs-subst {
color: #aaa;
}
.hljs-section {
color: #fff;
}
.hljs-comment,
.hljs-quote,
.hljs-meta {
color: #444;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-regexp {
color: #ffcc33;
}
.hljs-number,
.hljs-addition {
color: #00cc66;
}
.hljs-built_in,
.hljs-literal,
.hljs-type,
.hljs-template-variable,
.hljs-attribute,
.hljs-link {
color: #32aaee;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #6644aa;
}
.hljs-title,
.hljs-variable,
.hljs-deletion,
.hljs-template-tag {
color: #bb1166;
}
.hljs-section,
.hljs-doctag,
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}
/* Custom scrollbar for sidebar */
.sidebar-scroll {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 0.3s ease;
}
.sidebar-scroll:hover {
scrollbar-color: var(--color-primary) transparent;
}
/* Webkit browsers (Chrome, Safari, Edge) */
.sidebar-scroll::-webkit-scrollbar {
width: 2px;
height: 2px;
}
.sidebar-scroll::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 2px;
transition: background 0.3s ease;
}
================================================
FILE: app/layout.tsx
================================================
import TopNav from "@/components/TopNav";
import "./global.css";
import { Archivo_Black, Space_Grotesk, Space_Mono } from "next/font/google";
import { Metadata } from "next";
import { Toaster } from "@/components/retroui";
import { Analytics } from "@vercel/analytics/next";
import { SpeedInsights } from "@vercel/speed-insights/next";
import { ThemeProvider } from "@/contexts/ThemeContext";
import ThemeWrapper from "@/components/ThemeWrapper";
const sans = Space_Grotesk({
subsets: ["latin"],
weight: "400",
variable: "--font-sans",
display: "swap",
});
const head = Archivo_Black({
subsets: ["latin"],
weight: "400",
variable: "--font-head",
display: "swap",
});
const mono = Space_Mono({
subsets: ["latin"],
weight: "400",
variable: "--font-mono",
display: "swap",
});
export const metadata: Metadata = {
title: "NeoBrutalism Styled React Components | RetroUI",
description:
"RetroUI - NeoBrutalism styled component library built with React and TailwindCSS for modern web apps.",
openGraph: {
images: "https://retroui.dev/banner.png",
title: "NeoBrutalism Styled React Components | RetroUI",
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
const darkMode = localStorage.getItem('darkMode');
if (darkMode === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
} catch (e) {
console.error('Error applying theme:', e);
}
})();
`,
}}
/>
{/* <script
defer
src="https://cloud.umami.is/script.js"
data-website-id="97dd6182-c656-4265-97e0-ee9613b88078"
/> */}
<script
defer
data-website-id="dfid_zlQSgC5h2RNuCLHQTf7Fd"
data-domain="retroui.dev"
src="https://datafa.st/js/script.js">
</script>
</head>
<body
className={`${head.variable} ${sans.variable} ${mono.variable}`}
>
<ThemeProvider>
<div className="bg-background text-foreground">
<TopNav />
{children}
<Toaster />
</div>
</ThemeProvider>
<SpeedInsights />
<Analytics />
</body>
</html>
);
}
================================================
FILE: app/robots.ts
================================================
import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: "/",
},
sitemap: "https://retroui.dev/sitemap.xml",
};
}
================================================
FILE: app/rss.xml/route.ts
================================================
import { generateRegistryRssFeed } from "@wandry/analytics-sdk";
import type { NextRequest } from "next/server";
export const revalidate = 3600;
export async function GET(request: NextRequest) {
const baseUrl = new URL(request.url).origin;
const rssXml = await generateRegistryRssFeed({
baseUrl,
componentsUrl: "/docs/components",
excludeItemTypes: ["registry:block", "registry:style", "registry:lib"],
rss: {
title: "@retroui",
description: "Subscribe to @retroui updates",
link: "https://retroui.dev",
pubDateStrategy: "githubLastEdit",
},
github: {
owner: "Logging-Studio",
repo: "RetroUI",
token: process.env.GITHUB_TOKEN,
},
});
if (!rssXml) {
return new Response("RSS feed not available", {
status: 404,
headers: { "Content-Type": "text/plain" },
});
}
return new Response(rssXml, {
headers: {
"Content-Type": "application/rss+xml; charset=utf-8",
"Cache-Control":
"public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400",
},
});
}
================================================
FILE: app/sitemap.ts
================================================
import { allDocs } from "@/.contentlayer/generated";
import type { MetadataRoute } from "next";
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: "https://retroui.dev",
lastModified: new Date(),
changeFrequency: "yearly",
priority: 1,
},
...allDocs.map((doc) => ({
url: `https://retroui.dev${doc.url}`,
lastModified: doc.lastUpdated,
})),
];
}
================================================
FILE: components/CodeBlock.tsx
================================================
"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/retroui";
interface ICodeBlock extends React.HTMLAttributes<HTMLPreElement> {}
export async function copyToClipboardWithMeta(value: string, event?: Event) {
navigator.clipboard.writeText(value);
if (event) {
// trackEvent(event);
}
}
export function CodeBlock({ className, children, ...props }: ICodeBlock) {
const [hasCopied, setHasCopied] = React.useState(false);
const preRef = React.useRef<HTMLPreElement>(null);
const handleClickCopy = async () => {
const code = preRef.current?.textContent;
if (code) {
setHasCopied(true);
await navigator.clipboard.writeText(code);
setTimeout(() => {
setHasCopied(false);
}, 3000);
}
};
return (
<div className="relative">
<pre
className={cn(
"overflow-x-auto rounded-sm bg-[#282A36] mt-3 mb-6 p-4",
className,
)}
{...props}
>
<Button
id="cody-copy-button"
data-umami-event="copy-code-button"
disabled={hasCopied}
className="absolute top-4 right-4 z-10"
size="sm"
onClick={handleClickCopy}
>
{hasCopied ? "Copied" : "Copy"}
</Button>
<span ref={preRef}>{children}</span>
</pre>
</div>
);
}
================================================
FILE: components/ComponentInstall.tsx
================================================
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
import React from "react";
import { HTMLAttributes } from "react";
import { Check, Copy } from "lucide-react";
import { useState } from "react";
import { Button } from "./retroui";
interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {}
const CopyableCommand = ({ command }: { command: string }) => {
const [copied, setCopied] = useState(false);
const copyToClipboard = async () => {
await navigator.clipboard.writeText(command);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<div className="flex items-center justify-between gap-2 group">
<code className="flex-1">{command}</code>
<Button size="sm" onClick={copyToClipboard} className="hidden md:block" title="Copy to clipboard">
{copied ? "Copied" : "Copy"}
</Button>
<Button className="md:hidden" size="icon" onClick={copyToClipboard} title="Copy to clipboard mobile">
{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
);
};
export function CliCommand({
npmCommand,
yarnCommand,
pnpmCommand,
bunCommand,
}: {
npmCommand: string;
yarnCommand?: string;
pnpmCommand?: string;
bunCommand?: string;
}) {
const isNpx = npmCommand.includes("npx");
if (isNpx) {
pnpmCommand = pnpmCommand ?? npmCommand.replace("npx", "pnpm dlx");
yarnCommand = yarnCommand ?? npmCommand.replace("npx", "yarn dlx");
bunCommand = bunCommand ?? npmCommand.replace("npx", "bunx");
} else {
pnpmCommand = pnpmCommand ?? npmCommand.replace("npm", "pnpm");
yarnCommand = yarnCommand ?? npmCommand.replace("npm install", "yarn add");
bunCommand = bunCommand ?? npmCommand.replace("npm", "bun");
}
return (
<TabGroup className="p-4 my-2 bg-gray-800 rounded-md text-background/90">
<TabList className="flex space-x-4 mb-6 text-sm">
<Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
pnpm
</Tab>
<Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
npm
</Tab>
<Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
yarn
</Tab>
<Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
bun
</Tab>
</TabList>
<TabPanels className="text-sm text-accent">
<TabPanel>
<CopyableCommand command={pnpmCommand} />
</TabPanel>
<TabPanel>
<CopyableCommand command={npmCommand} />
</TabPanel>
<TabPanel>
<CopyableCommand command={yarnCommand} />
</TabPanel>
<TabPanel>
<CopyableCommand command={bunCommand} />
</TabPanel>
</TabPanels>
</TabGroup>
);
}
function ComponentInstallCli({
npmCommand,
yarnCommand,
pnpmCommand,
bunCommand,
}: {
npmCommand: string;
yarnCommand?: string;
pnpmCommand?: string;
bunCommand?: string;
}) {
return (
<TabPanel>
<CliCommand
npmCommand={npmCommand}
yarnCommand={yarnCommand}
pnpmCommand={pnpmCommand}
bunCommand={bunCommand}
/>
</TabPanel>
);
}
function ComponentInstallManual({ children }: { children: React.ReactNode }) {
return <TabPanel>{children}</TabPanel>;
}
function ComponentInstall({ children }: IComponentShowcase) {
return (
<TabGroup>
<TabList className="border-b bg-transparent flex space-x-4 mb-6 text-sm">
<Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
CLI
</Tab>
<Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
Manual
</Tab>
</TabList>
<TabPanels>{children}</TabPanels>
</TabGroup>
);
}
Object.assign(ComponentInstall, {
Cli: ComponentInstallCli,
Manual: ComponentInstallManual,
});
export { ComponentInstall };
================================================
FILE: components/ComponentShowcase.tsx
================================================
import { componentConfig } from "@/config";
import { TabGroup, TabList, TabPanels, TabPanel, Tab } from "@headlessui/react";
import React, { HTMLAttributes } from "react";
import { Button } from "./retroui";
interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
name: keyof typeof componentConfig.examples;
}
export function ComponentShowcase({ name, children }: IComponentShowcase) {
const { preview: Preview } = componentConfig.examples[name];
const Code = React.Children.toArray(children)[0];
return (
<TabGroup>
<TabList className="space-x-4 border-b mb-6 text-sm">
<Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
Preview
</Tab>
<Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
Code
</Tab>
</TabList>
<TabPanels>
<TabPanel>
<div className="border rounded-sm px-6 py-24 flex justify-center items-center min-h-80 mt-4 relative">
<a
href={`https://v0.dev/chat/api/open?url=https://retroui.dev/r/${name}.json`}
target="_blank"
>
<Button
variant="secondary"
size="sm"
className="font-sans absolute top-4 right-4"
>
Open in
<svg
viewBox="0 0 40 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 ml-2 text-current"
>
<path
d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
fill="currentColor"
></path>
<path
d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
fill="currentColor"
></path>
</svg>
</Button>
</a>
<Preview />
</div>
</TabPanel>
<TabPanel>
<div className="relative rounded-sm overflow-auto">{Code}</div>
</TabPanel>
</TabPanels>
</TabGroup>
);
}
================================================
FILE: components/ComponentSource.tsx
================================================
import { cn } from "@/lib/utils";
interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
src: string;
}
export function ComponentSource({ children, className }: ComponentSourceProps) {
return (
<div className={cn("overflow-hidden rounded-md", className)}>
{children}
</div>
);
}
================================================
FILE: components/CopyTheme.tsx
================================================
import { Button } from "@/components/retroui/Button";
import { Dialog } from "@/components/retroui/Dialog";
import { Text } from "@/components/retroui/Text";
import { Theme, themeConfig } from "@/config/theme";
import { CodeBlock } from "./CodeBlock";
export default function CopyTheme({ theme, hasRadius = false }: { theme: Theme, hasRadius?: boolean }) {
return (
<Dialog>
<Dialog.Trigger asChild>
<Button>Copy Theme</Button>
</Dialog.Trigger>
<Dialog.Content className={`theme-${theme} ${hasRadius ? "with-radius" : ""}`}>
<Dialog.Header>
<Text as="h5">Copy Theme</Text>
</Dialog.Header>
<section className="w-full p-4">
<Text className="text-lg mb-4 text-muted-foreground">Copy and paste the following theme code into your CSS file.</Text>
<CodeBlock className="w-full max-h-[480px] text-gray-300 text-sm overflow-y-auto">
{themeConfig({ hasRadius })[theme].color}
</CodeBlock>
</section>
</Dialog.Content>
</Dialog>
);
}
================================================
FILE: components/HamburgerMenu.tsx
================================================
"use client";
import { useState } from "react";
import SideNav from "./SideNav";
import { AlignJustify, X } from "lucide-react";
import { Button } from "@/components/retroui";
export default function HamburgerMenu() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<Button
size="sm"
variant="outline"
className="p-2"
onClick={() => setIsOpen((prev) => !prev)}
>
{isOpen ? (
<X className="h-4 w-4" />
) : (
<AlignJustify className="h-4 w-4" />
)}
</Button>
{isOpen && (
<div
className="absolute top-0 left-0 right-0 w-full h-screen bg-black opacity-50"
onClick={() => setIsOpen(false)}
/>
)}
{isOpen && (
<div className="absolute top-0 bottom-0 h-screen left-0 z-10">
<SideNav setIsOpen={setIsOpen} />
</div>
)}
</div>
);
}
================================================
FILE: components/JoinNewsletter.tsx
================================================
"use client";
import { Button, Text, Input } from "@/components/retroui";
import { useState } from "react";
const INIT = "INIT";
const SUBMITTING = "SUBMITTING";
const ERROR = "ERROR";
const SUCCESS = "SUCCESS";
const formStates = [INIT, SUBMITTING, ERROR, SUCCESS] as const;
const formStyles = {
id: "cltl71xnw000ris85z92rosvh",
name: "Default",
formStyle: "inline",
placeholderText: "you@example.com",
formFont: "font-sans",
formFontColor: "#000000",
formFontSizePx: 14,
buttonText: "Subscribe",
buttonFont: "font-sans",
buttonFontColor: "#ffffff",
buttonColor: "#000000",
buttonFontSizePx: 14,
successMessage: "Thanks! We'll be in touch!",
successFont: "Inter",
successFontColor: "#000000",
successFontSizePx: 14,
userGroup: "",
};
const domain = "app.loops.so";
export function JoinNewsletter() {
const [email, setEmail] = useState("");
const [formState, setFormState] = useState<(typeof formStates)[number]>(INIT);
const [errorMessage, setErrorMessage] = useState("");
const resetForm = () => {
setEmail("");
setFormState(INIT);
setErrorMessage("");
};
/**
* Rate limit the number of submissions allowed
* @returns {boolean} true if the form has been successfully submitted in the past minute
*/
const hasRecentSubmission = () => {
const time = new Date();
const timestamp = time.valueOf();
const previousTimestamp = localStorage.getItem("loops-form-timestamp");
// Indicate if the last sign up was less than a minute ago
if (
previousTimestamp &&
Number(previousTimestamp) + 60 * 1000 > timestamp
) {
setFormState(ERROR);
setErrorMessage("Too many signups, please try again in a little while");
return true;
}
localStorage.setItem("loops-form-timestamp", timestamp.toString());
return false;
};
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
// Prevent the default form submission
event.preventDefault();
// boundary conditions for submission
if (formState !== INIT) return;
if (!isValidEmail(email)) {
setFormState(ERROR);
setErrorMessage("Please enter a valid email");
return;
}
if (hasRecentSubmission()) return;
setFormState(SUBMITTING);
// build body
const formBody = `userGroup=${encodeURIComponent(
formStyles.userGroup,
)}&email=${encodeURIComponent(email)}&mailingLists=`;
// API request to add user to newsletter
fetch(`https://${domain}/api/newsletter-form/${formStyles.id}`, {
method: "POST",
body: formBody,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
})
.then((res: any) => [res.ok, res.json(), res])
.then(([ok, dataPromise, res]) => {
if (ok) {
resetForm();
setFormState(SUCCESS);
} else {
dataPromise.then((data: any) => {
setFormState(ERROR);
setErrorMessage(data.message || res.statusText);
localStorage.setItem("loops-form-timestamp", "");
});
}
})
.catch((error) => {
setFormState(ERROR);
// check for cloudflare error
if (error.message === "Failed to fetch") {
setErrorMessage(
"Too many signups, please try again in a little while",
);
} else if (error.message) {
setErrorMessage(error.message);
}
localStorage.setItem("loops-form-timestamp", "");
});
};
switch (formState) {
case SUCCESS:
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
}}
>
<p
style={{
fontFamily: `'${formStyles.successFont}', sans-serif`,
color: formStyles.successFontColor,
fontSize: `${formStyles.successFontSizePx}px`,
}}
>
{formStyles.successMessage}
</p>
</div>
);
case ERROR:
return (
<>
<SignUpFormError />
<BackButton />
</>
);
default:
return (
<div className="w-full max-w-6xl mx-auto py-16 px-4 border-2 border-black">
<div className="flex flex-col justify-center items-center text-center">
<Text as="h2">Join Our Newsletter</Text>
<p className="text-lg text-muted-foreground mb-8">
Get notified about latest updates and new launches.
</p>
<form
onSubmit={handleSubmit}
className="flex space-x-2 w-full lg:w-1/2"
>
<Input
placeholder={formStyles.placeholderText}
value={email}
type="text"
name="email"
required={true}
onChange={(e) => setEmail(e.target.value)}
/>
<Button>Subscribe</Button>
</form>
</div>
</div>
);
}
function SignUpFormError() {
return (
<div
style={{
alignItems: "center",
justifyContent: "center",
width: "100%",
}}
>
<p
style={{
fontFamily: "Inter, sans-serif",
color: "rgb(185, 28, 28)",
fontSize: "14px",
}}
>
{errorMessage || "Oops! Something went wrong, please try again"}
</p>
</div>
);
}
function BackButton() {
const [isHovered, setIsHovered] = useState(false);
return (
<button
style={{
color: "#6b7280",
font: "14px, Inter, sans-serif",
margin: "10px auto",
textAlign: "center",
background: "transparent",
border: "none",
cursor: "pointer",
textDecoration: isHovered ? "underline" : "none",
}}
onMouseOut={() => setIsHovered(false)}
onMouseOver={() => setIsHovered(true)}
onClick={resetForm}
>
← Back
</button>
);
}
}
function isValidEmail(email: any) {
return /.+@.+/.test(email);
}
================================================
FILE: components/MDX.tsx
================================================
"use client";
import { Alert, Badge, Card, Text } from "@/components/retroui";
import { useMDXComponent } from "next-contentlayer/hooks";
import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
import { ComponentShowcase } from "./ComponentShowcase";
import { cn } from "@/lib/utils";
import { ComponentSource } from "./ComponentSource";
import { CodeBlock } from "./CodeBlock";
import Link from "next/link";
import { ComponentInstall, CliCommand } from "./ComponentInstall";
import Image from "next/image";
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
import { Table } from "./retroui/Table";
const components = (type: "doc" | "blog") => ({
h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
<Text as="h1" {...props} />
),
h2: (props: HTMLAttributes<HTMLHeadingElement>) =>
type === "blog" ? (
<Text as="h2" className="mb-4 mt-8" {...props} />
) : (
<Text as="h2" className="border-b pb-1 mb-6" {...props} />
),
h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
<Text as="h3" className="mb-4" {...props} />
),
h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
<Text as="h4" className="mb-2" {...props} />
),
h5: (props: HTMLAttributes<HTMLHeadElement>) => <Text as="h5" {...props} />,
h6: (props: HTMLAttributes<HTMLHeadElement>) => <Text as="h6" {...props} />,
p: (props: HTMLAttributes<HTMLHeadElement>) =>
type === "blog" ? (
<Text {...props} className="text-lg text-foreground" />
) : (
<Text {...props} />
),
li: (props: HTMLAttributes<HTMLHeadElement>) =>
type === "blog" ? (
<Text
as="li"
{...props}
className="text-lg text-foreground ml-4 lg:ml-8 mb-2"
/>
) : (
<Text as="li" className="mb-2" {...props} />
),
img: (props: HTMLAttributes<HTMLImageElement>) => (
<img className="mx-auto w-full max-w-[600px] my-8" {...props} />
),
a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
const { href, target, rel, ...rest } = props;
if (!href) {
return <a {...rest} />;
}
const isExternal = href.startsWith("http");
return isExternal ? (
<a
href={href}
target={target || "_blank"}
rel={rel || "noopener noreferrer"}
className="underline underline-offset-4 hover:decoration-primary"
{...rest}
/>
) : (
<Link
href={href}
className="underline underline-offset-4 hover:decoration-primary"
{...rest}
/>
);
},
pre: CodeBlock,
code: ({
className,
children,
...props
}: React.HTMLAttributes<HTMLElement>) => (
<code
className={cn(
"relative rounded-sm bg-[#282A36] p-1 text-primary text-sm",
className,
)}
{...props}
>
{children}
</code>
),
TabGroup,
TabList,
Tab,
TabPanels,
TabPanel,
Table,
Link,
Badge,
Image,
Card,
Alert,
ComponentShowcase,
ComponentSource,
ComponentInstall,
CliCommand,
});
export default function MDX({
code,
type = "doc",
}: {
code: string;
type?: "doc" | "blog";
}) {
const Content = useMDXComponent(code);
return <Content components={components(type)} />;
}
================================================
FILE: components/RichTextCodeBlock.tsx
================================================
'use client'
import { useState } from 'react'
const CopyIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
</svg>
)
const CheckIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M20 6 9 17l-5-5" />
</svg>
)
export const RichTextCodeBlock: React.FC<{
code: string
language?: string
title?: string
}> = ({ code, language, title }) => {
const [copied, setCopied] = useState(false)
const handleCopy = async () => {
await navigator.clipboard.writeText(code)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<div className="my-6 rounded-lg overflow-hidden border-2 border-border bg-[#282A36]">
<div className="flex items-center justify-between px-4 py-2 bg-[#1e1f29] border-b-2 border-border">
<span className="text-sm text-gray-400 font-mono">
{title || language || 'code'}
</span>
<button
onClick={handleCopy}
className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-white transition-colors"
>
{copied ? (
<>
<CheckIcon />
<span>Copied!</span>
</>
) : (
<>
<CopyIcon />
<span>Copy</span>
</>
)}
</button>
</div>
<pre className="p-4 overflow-x-auto">
<code className="text-sm text-accent font-mono whitespace-pre">
{code}
</code>
</pre>
</div>
)
}
================================================
FILE: components/RichTextConverter.tsx
================================================
import Link from 'next/link'
import type {
DefaultNodeTypes,
SerializedUploadNode,
} from '@payloadcms/richtext-lexical'
import {
type JSXConvertersFunction,
} from '@payloadcms/richtext-lexical/react'
import { Text } from '@/components/retroui'
import { RichTextCodeBlock } from '@/components/RichTextCodeBlock'
const CustomUploadComponent: React.FC<{
node: SerializedUploadNode
}> = ({ node }) => {
if (node.relationTo === 'media') {
const uploadDoc = node.value
if (typeof uploadDoc !== 'object') {
return null
}
const { alt, height, url, width } = uploadDoc
return (
<img
alt={alt}
height={height}
src={`https://cms.retroui.dev${url}`}
width={width}
className="mx-auto w-full max-w-[600px] my-8"
/>
)
}
return null
}
type NodeTypes = DefaultNodeTypes
export const JSXConverters: JSXConvertersFunction<NodeTypes> = ({
defaultConverters,
}) => {
return {
...defaultConverters,
heading: ({ node, nodesToJSX }) => {
const children = nodesToJSX({ nodes: node.children })
const Tag = node.tag as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
const classNames: Record<string, string> = {
h1: '',
h2: 'mb-4 mt-8 lg:text-3xl',
h3: 'mb-4',
h4: 'mb-2',
h5: '',
h6: '',
}
return (
<Text as={Tag} className={classNames[Tag]}>
{children}
</Text>
)
},
paragraph: ({ node, nodesToJSX }) => {
// Handle empty paragraphs as spacing
if (!node.children || node.children.length === 0) {
return <br />
}
const children = nodesToJSX({ nodes: node.children })
return <Text className="text-lg text-foreground">{children}</Text>
},
text: ({ node }) => {
const format = node.format ?? 0
let text: React.ReactNode = node.text
// Format is a bitmask: 1=bold, 2=italic, 4=strikethrough, 8=underline, 16=code
if (format & 16) {
// Inline code
text = (
<code className="rounded-sm bg-[#282A36] px-1.5 py-0.5 text-primary text-sm">
{text}
</code>
)
}
if (format & 1) {
text = <strong>{text}</strong>
}
if (format & 2) {
text = <em>{text}</em>
}
if (format & 4) {
text = <s>{text}</s>
}
if (format & 8) {
text = <u>{text}</u>
}
return <>{text}</>
},
list: ({ node, nodesToJSX }) => {
const children = nodesToJSX({ nodes: node.children })
if (node.listType === 'bullet') {
return <ul className="list-disc pl-4 lg:pl-8 my-4">{children}</ul>
}
return <ol className="list-decimal pl-4 lg:pl-8 my-4">{children}</ol>
},
listitem: ({ node, nodesToJSX }) => {
const children = nodesToJSX({ nodes: node.children })
return (
<Text as="li" className="text-lg text-foreground ml-4 lg:ml-8 mb-2">
{children}
</Text>
)
},
link: ({ node, nodesToJSX }) => {
const children = nodesToJSX({ nodes: node.children })
const href = node.fields?.url || ''
const isExternal = href.startsWith('http')
const linkClass = 'underline underline-offset-4 hover:decoration-primary'
if (isExternal) {
return (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className={linkClass}
>
{children}
</a>
)
}
return (
<Link href={href} className={linkClass}>
{children}
</Link>
)
},
quote: ({ node, nodesToJSX }) => {
const children = nodesToJSX({ nodes: node.children })
return (
<blockquote className="border-l-4 border-primary pl-4 my-4 italic">
{children}
</blockquote>
)
},
linebreak: () => {
return <br />
},
upload: ({ node }) => {
return <CustomUploadComponent node={node} />
},
// Handle autolink nodes
autolink: ({ node, nodesToJSX }) => {
const children = nodesToJSX({ nodes: (node as any).children })
const href = (node as any).fields?.url || ''
return (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="underline underline-offset-4 hover:decoration-primary break-all"
>
{children}
</a>
)
},
// Blocks converter - nested object with slug as key
blocks: {
Code: ({ node }: any) => {
const fields = (node as any).fields
return (
<RichTextCodeBlock
code={fields?.code || ''}
language={fields?.language}
title={fields?.blockName}
/>
)
},
},
}
}
================================================
FILE: components/SideNav.tsx
================================================
"use client";
import { navConfig } from "@/config/navigation";
import { Badge, Text } from "@/components/retroui";
import Link from "next/link";
import { usePathname } from "next/navigation";
interface SideNavProps {
setIsOpen?: (isOpen: boolean) => void;
}
export default function SideNav({ setIsOpen }: SideNavProps) {
const pathname = usePathname();
return (
<div className="sidebar-scroll border-r-2 z-10 overflow-y-scroll h-full max-h-[calc(100vh-6rem)] transition-transform transform md:translate-x-0 w-full bg-background flex flex-col justify-start md:justify-start py-8">
<nav
className="flex flex-col items-start max-lg:px-6 space-y-4 z-99"
aria-label="Main navigation"
>
{navConfig.sideNavItems.map((item) => (
<div key={item.title} className="w-full">
<Text as="h5">{item.title}</Text>
<div className="flex flex-col w-full">
{item.children.map((child) => (
<Link
key={child.title}
href={child.href}
onClick={() => setIsOpen && setIsOpen(false)}
target={child.href.startsWith("http") ? "_blank" : "_self"}
className={`px-2 py-1 w-full border border-transparent text-muted-foreground flex items-center justify-between hover:text-foreground hover:bg-muted/50 transition-colors ${
pathname === child.href &&
"bg-primary text-primary-foreground"
}`}
>
{child.title}
{child.tag && (
<Badge
size="sm"
className="py-0.5 px-1.5 border text-xs border-secondary text-muted-foreground bg-secondary/10"
>
{child.tag}
</Badge>
)}
</Link>
))}
</div>
</div>
))}
</nav>
</div>
);
}
================================================
FILE: components/TableOfContents.tsx
================================================
import React from 'react';
import { TableOfContents as TOCType } from '@/lib/toc';
interface TableOfContentsProps {
toc: TOCType;
}
function renderTOCItems(items: any[], level = 0) {
if (!items || items.length === 0) return null;
return (
<ul className={`space-y-1 ${level > 0 ? 'ml-4 mt-1' : ''}`}>
{items.map((item, index) => (
<li key={index}>
<a
href={item.url}
className="text-sm hover:text-foreground transition-colors block py-1 border-l-2 border-transparent hover:border-accent pl-2"
>
{item.title}
</a>
{item.items && renderTOCItems(item.items, level + 1)}
</li>
))}
</ul>
);
}
export default function TableOfContents({ toc }: TableOfContentsProps) {
if (!toc.items || toc.items.length === 0) {
return null;
}
return (
<div className="border p-4 rounded-sm max-h-60 overflow-y-auto sidebar-scroll">
<h3 className="mb-3 border-b border-black pb-2">
On this Page
</h3>
{renderTOCItems(toc.items)}
</div>
);
}
================================================
FILE: components/Testimonial.tsx
================================================
import { Text, Card, Avatar } from "@/components/retroui";
interface TestimonialCardProps {
quote: string;
avatarSrc: string;
name: string;
title: string;
}
export default function TestimonialCard({
quote,
avatarSrc,
name,
title,
}: TestimonialCardProps) {
return (
<Card className="w-full max-w-[400px] shadow-none hover:shadow-md">
<Card.Content>
<Text className="text-lg">{quote}</Text>
<div className="flex items-center space-x-2 mt-6">
<Avatar className="h-10 w-10">
<Avatar.Image alt={`${name} avatar`} src={avatarSrc} />
</Avatar>
<div>
<div className="font-medium">{name}</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
{title}
</div>
</div>
</div>
</Card.Content>
</Card>
);
}
================================================
FILE: components/ThemeWrapper.tsx
================================================
"use client";
import { useTheme } from "@/contexts/ThemeContext";
import { useEffect } from "react";
export default function ThemeWrapper({ children }: { children: React.ReactNode }) {
const { colorTheme, variant } = useTheme();
useEffect(() => {
const wrapper = document.querySelector(".theme-wrapper");
if (wrapper) {
wrapper.className = `theme-wrapper theme-${colorTheme} ${variant}`;
}
}, [colorTheme, variant]);
return <div className={`theme-wrapper theme-${colorTheme} ${variant}`}>{children}</div>;
}
================================================
FILE: components/TopNav.tsx
================================================
"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { ArrowUpRight, GithubIcon, MoonIcon, SunIcon } from "lucide-react";
import HamburgerMenu from "./HamburgerMenu";
import { Button, Text } from "@/components/retroui";
import { navConfig } from "@/config/navigation";
import { useTheme } from "@/contexts/ThemeContext";
export default function TopNav() {
const { isDarkMode, toggleDarkMode } = useTheme();
return (
<nav className="sticky z-1 top-0 right-0 w-full border-b-2 bg-background">
<div className="w-full bg-black text-white">
<div className="container max-w-6xl mx-auto px-4 py-2 flex justify-center space-x-4 items-center">
<Text className="text-sm lg:text-center">
Ship faster with premium blocks and templates!
</Text>
<a href="https://dub.sh/retroui-pro" target="_blank">
<Button
size="sm"
className="shadow-none font-sans font-bold px-2 py-1 w-30"
>
RetroUI Pro
<ArrowUpRight className="ml-auto h-4 w-4 inline-block" />
</Button>
</a>
</div>
</div>
<div className="container max-w-6xl px-4 lg:px-0 mx-auto">
<div className="flex justify-between items-center h-16">
{/* Logo Section */}
<div className="shrink-0">
<a
href="/"
className="text-black font-head text-2xl flex items-end"
>
<Image
src="/images/logo.png"
alt="retro ui logo"
className="mr-2"
height={30}
width={30}
/>
<div className="text-foreground">RetroUI</div>
</a>
</div>
{/* Navigation Links */}
<div className="hidden md:flex space-x-4">
{navConfig.topNavItems.map((item) => (
<Link
key={item.title}
href={item.href}
className="hover:underline decoration-primary underline-offset-2 transition-all"
>
{item.title}
</Link>
))}
</div>
<div className="flex items-center space-x-4 lg:hidden">
<Link
href="https://github.com/logging-studio/retroui"
target="_blank"
rel="noopener noreferrer"
>
<GithubIcon />
</Link>
<HamburgerMenu />
</div>
<div className="hidden lg:flex items-center space-x-3">
<Link
href="https://github.com/logging-studio/retroui"
target="_blank"
rel="noopener noreferrer"
>
<Button variant="secondary" size="icon">
<GithubIcon size="14"/>
</Button>
</Link>
<Button variant="secondary" size="icon" onClick={toggleDarkMode}>
{isDarkMode ? <SunIcon size="14" /> : <MoonIcon size="14" />}
</Button>
</div>
</div>
</div>
</nav>
);
}
================================================
FILE: components/WorksWithSection.tsx
================================================
"use client";
import Image from "next/image";
import { Text } from "@/components/retroui";
import { useTheme } from "@/contexts/ThemeContext";
export default function WorksWithSection() {
const { isDarkMode } = useTheme();
const frameworks = [
{
name: "vite",
lightSrc: "/images/logos/vite.png",
darkSrc: "/images/logos/vite_white.png",
size: 60,
},
{
name: "nextjs",
lightSrc: "/images/logos/nextjs.png",
darkSrc: "/images/logos/next_white.png",
size: 60,
},
{
name: "remix",
lightSrc: "/images/logos/remix.png",
darkSrc: "/images/logos/remix_white.png",
size: 55,
},
{
name: "astro",
lightSrc: "/images/logos/astro.png",
darkSrc: "/images/logos/astro_white.png",
size: 55,
},
{
name: "gatsby",
lightSrc: "/images/logos/gatsby.png",
darkSrc: "/images/logos/gatsby_white.png",
size: 60,
},
];
return (
<section className="container max-w-6xl mx-auto px-4 lg:px-0 my-48" id="works-with">
<Text as="h2" className="text-center max-w-2xl mx-auto mb-28">
Works With Both <span className="text-outlined">SSR</span> and{" "}
<span className="text-outlined">SPA</span> Applications.
</Text>
<div className="grid grid-cols-5 gap-8 lg:gap-6 max-w-2xl mx-auto items-center">
{frameworks.map((framework) => (
<div key={framework.name}>
<Image
src={isDarkMode ? framework.darkSrc : framework.lightSrc}
alt={`${framework.name} ${isDarkMode ? 'dark' : 'light'}`}
width={framework.size}
height={framework.size}
/>
</div>
))}
</div>
</section>
);
}
================================================
FILE: components/footer.tsx
================================================
"use client";
import { Button } from "@/components/retroui/Button";
import { Input } from "@/components/retroui/Input";
import { Text } from "@/components/retroui/Text";
import { Mail, TwitterIcon } from "lucide-react";
import { useState } from "react";
import { subscribeToNewsletter } from "@/app/actions/newsletter";
const quickLinks = [
{ name: "Docs", href: "/docs" },
{ name: "Blogs", href: "/blogs" },
{ name: "Community", href: "https://discord.com/invite/Jum3NJxK6Q" },
{ name: "Pro Blocks", href: "https://pro.retroui.dev" },
];
const projectLinks = [
{ name: "CommerCN", href: "https://commercn.com" },
{ name: "Evendeals", href: "https://evendeals.com" },
{ name: "Tanstack Starter Kit", href: "https://tanstackstarterkit.com" },
];
function Footer() {
const [email, setEmail] = useState("");
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
const handleSubscribe = async (e: React.FormEvent) => {
e.preventDefault();
setStatus("loading");
const result = await subscribeToNewsletter(email);
if (result.success) {
setStatus("success");
setEmail("");
} else {
setStatus("error");
}
};
return (
<footer className="border-t-2 mt-24">
<div className="max-w-6xl mx-auto px-4 py-16">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-12">
<div className="lg:col-span-2 max-w-md">
<Text as="h2" className="mb-6">
STAY CONNECTED
</Text>
<Text className="text-muted-foreground leading-relaxed mb-2 text-sm">
Join our community to stay updated with new component releases, updates, and special offers.
</Text>
<form onSubmit={handleSubscribe} className="mb-8">
<div className="flex gap-4">
<Input
type="email"
placeholder="your@email.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<Button className="w-54 justify-center" type="submit" disabled={status === "loading"}>
{status === "loading" ? "..." : "SUBSCRIBE"}
</Button>
</div>
{status === "success" && (
<Text className="text-green-600 text-sm mt-2">Subscribed successfully!</Text>
)}
{status === "error" && (
<Text className="text-red-600 text-sm mt-2">Failed to subscribe. Try again.</Text>
)}
</form>
<div className="flex space-x-6">
<a href="mailto:arif@retroui.dev" target="_blank" className="flex items-center gap-2">
<div className="bg-black text-white p-1 shadow shadow-primary">
<Mail className="w-4 h-4" />
</div>
<span className="hover:underline underline-offset-4">
arif@retroui.dev
</span>
</a>
<a href="https://x.com/ariflogs" target="_blank" className="flex items-center gap-2">
<div className="bg-black text-white p-1 shadow shadow-primary">
<TwitterIcon className="w-4 h-4" />
</div>
<span className="hover:underline underline-offset-4">@ariflogs</span>
</a>
</div>
</div>
<div className="lg:col-span-1">
<Text as="h4" className="mb-6">
Quick Links
</Text>
<ul className="space-y-2">
{quickLinks.map((link) => (
<li key={link.name}>
<a
href={link.href}
className="hover:underline font-medium underline-offset-4 decoration-primary decoration-2 transition-all"
>
{link.name}
</a>
</li>
))}
</ul>
</div>
<div className="lg:col-span-1">
<Text as="h4" className="mb-6">
By Makers of RetroUI
</Text>
<ul className="space-y-2">
{projectLinks.map((project) => (
<li key={project.name}>
<a
href={project.href}
target="_blank"
className="hover:underline font-medium underline-offset-4 decoration-primary decoration-2 transition-all"
>
{project.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
<div className="bg-foreground">
<div className="max-w-6xl mx-auto px-4 py-6 text-center">
<Text className="text-sm text-background">
© 2026 Logging Studio. Crafted with ❤️ and ☕.
</Text>
</div>
</div>
</footer>
);
}
export default Footer;
================================================
FILE: components/index.ts
================================================
export * from "./ComponentShowcase";
export * from "./JoinNewsletter";
================================================
FILE: components/retroui/Accordion.tsx
================================================
"use client";
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
const Accordion = AccordionPrimitive.Root;
const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn(
"border-2 bg-background rounded text-foreground shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden",
className,
)}
{...props}
/>
));
AccordionItem.displayName = AccordionPrimitive.Item.displayName;
const AccordionHeader = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-start justify-between px-4 py-2 font-head cursor-pointer focus:outline-hidden [&[data-state=open]>svg]:rotate-180",
className,
)}
{...props}
>
{children}
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
));
AccordionHeader.displayName = AccordionPrimitive.Header.displayName;
const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden font-body bg-white text-gray-700 data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
{...props}
>
<div className={cn("px-4 pt-2 pb-4", className)}>{children}</div>
</AccordionPrimitive.Content>
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
const AccordionComponent = Object.assign(Accordion, {
Item: AccordionItem,
Header: AccordionHeader,
Content: AccordionContent,
});
export { AccordionComponent as Accordion };
================================================
FILE: components/retroui/Alert.tsx
================================================
import { HtmlHTMLAttributes } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
import { Text } from "@/components/retroui/Text";
const alertVariants = cva("relative w-full rounded border-2 p-4", {
variants: {
variant: {
default: "bg-background text-foreground [&_svg]:shrink-0",
solid: "bg-black text-white",
},
status: {
error: "bg-red-300 text-red-800 border-red-800",
success: "bg-green-300 text-green-800 border-green-800",
warning: "bg-yellow-300 text-yellow-800 border-yellow-800",
info: "bg-blue-300 text-blue-800 border-blue-800",
},
},
defaultVariants: {
variant: "default",
},
});
interface IAlertProps
extends HtmlHTMLAttributes<HTMLDivElement>,
VariantProps<typeof alertVariants> {}
const Alert = ({ className, variant, status, ...props }: IAlertProps) => (
<div
role="alert"
className={cn(alertVariants({ variant, status }), className)}
{...props}
/>
);
Alert.displayName = "Alert";
interface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}
const AlertTitle = ({ className, ...props }: IAlertTitleProps) => (
<Text as="h5" className={cn(className)} {...props} />
);
AlertTitle.displayName = "AlertTitle";
interface IAlertDescriptionProps
extends HtmlHTMLAttributes<HTMLParagraphElement> {}
const AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (
<div className={cn("text-muted-foreground", className)} {...props} />
);
AlertDescription.displayName = "AlertDescription";
const AlertComponent = Object.assign(Alert, {
Title: AlertTitle,
Description: AlertDescription,
});
export { AlertComponent as Alert };
================================================
FILE: components/retroui/Avatar.tsx
================================================
import * as React from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import { cn } from "@/lib/utils";
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn(
"relative flex h-14 w-14 border-2 rounded-full overflow-hidden",
className,
)}
{...props}
/>
));
Avatar.displayName = "Avatar";
const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square h-full w-full", className)}
{...props}
/>
));
AvatarImage.displayName = "Avatar.Image";
const AvatarFallback = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Fallback>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-primary text-primary-foreground",
className,
)}
{...props}
/>
));
AvatarFallback.displayName = "Avatar.Fallback";
const AvatarComponent = Object.assign(Avatar, {
Image: AvatarImage,
Fallback: AvatarFallback,
});
export { AvatarComponent as Avatar };
================================================
FILE: components/retroui/Badge.tsx
================================================
import { cn } from "@/lib/utils";
import { cva, VariantProps } from "class-variance-authority";
import React, { HTMLAttributes } from "react";
const badgeVariants = cva("font-semibold rounded inline-flex items-center", {
variants: {
variant: {
default: "bg-muted text-muted-foreground",
outline: "outline-2 outline-foreground text-foreground",
solid: "bg-foreground text-background",
surface: "outline-2 bg-primary text-primary-foreground",
},
size: {
sm: "px-2 py-1 text-xs",
md: "px-2.5 py-1.5 text-sm",
lg: "px-3 py-2 text-base",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
});
interface ButtonProps
extends HTMLAttributes<HTMLSpanElement>,
VariantProps<typeof badgeVariants> {}
export function Badge({
children,
size = "md",
variant = "default",
className = "",
...props
}: ButtonProps) {
return (
<span
className={cn(badgeVariants({ variant, size }), className)}
{...props}
>
{children}
</span>
);
}
================================================
FILE: components/retroui/BasicCard.tsx
================================================
import React from "react";
export function BasicCard() {
return (
<div className="inline-block border-2 p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
<h4 className="font-head text-2xl font-medium mb-1">
This is card Title
</h4>
<p>This is card description.</p>
</div>
);
}
================================================
FILE: components/retroui/Breadcrumb.tsx
================================================
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "@/lib/utils"
const BreadcrumbRoot = React.forwardRef<
HTMLElement,
React.ComponentPropsWithoutRef<"nav">
>(({ className, ...props }, ref) => (
<nav
ref={ref}
aria-label="breadcrumb"
className={cn("w-full text-sm", className)}
{...props}
/>
))
BreadcrumbRoot.displayName = "Breadcrumb"
const BreadcrumbList = React.forwardRef<
HTMLOListElement,
React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
<ol
ref={ref}
className={cn(
"flex flex-wrap items-center gap-1.5 sm:gap-2.5 text-muted-foreground",
className
)}
{...props}
/>
))
BreadcrumbList.displayName = "BreadcrumbList"
const BreadcrumbItem = React.forwardRef<
HTMLLIElement,
React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
<li ref={ref} className={cn("inline-flex items-center", className)} {...props} />
))
BreadcrumbItem.displayName = "BreadcrumbItem"
const BreadcrumbLink = React.forwardRef<
HTMLAnchorElement,
React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean }
>(({ asChild, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a"
return (
<Comp
ref={ref}
className={cn(
"font-medium transition-colors hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring rounded-sm",
className
)}
{...props}
/>
)
})
BreadcrumbLink.displayName = "BreadcrumbLink"
const BreadcrumbPage = React.forwardRef<
HTMLSpanElement,
React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
<span
ref={ref}
aria-current="page"
className={cn("text-foreground font-semibold", className)}
{...props}
/>
))
BreadcrumbPage.displayName = "BreadcrumbPage"
const BreadcrumbSeparator = ({
children,
className,
...props
}: React.ComponentProps<"li">) => (
<li
role="presentation"
aria-hidden="true"
className={cn("text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", className)}
{...props}
>
{children ?? <ChevronRight />}
</li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
const BreadcrumbEllipsis = ({
className,
...props
}: React.ComponentProps<"span">) => (
<span
role="presentation"
className={cn("flex h-9 w-9 items-center justify-center", className)}
{...props}
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">More</span>
</span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
const Breadcrumb = Object.assign(BreadcrumbRoot, {
List: BreadcrumbList,
Item: BreadcrumbItem,
Link: BreadcrumbLink,
Page: BreadcrumbPage,
Separator: BreadcrumbSeparator,
Ellipsis: BreadcrumbEllipsis,
})
export { Breadcrumb }
================================================
FILE: components/retroui/Button.tsx
================================================
import { cn } from "@/lib/utils";
import { cva, VariantProps } from "class-variance-authority";
import React, { ButtonHTMLAttributes } from "react";
import { Slot } from "@radix-ui/react-slot";
export const buttonVariants = cva(
"font-head transition-all rounded outline-hidden cursor-pointer duration-200 font-medium flex justify-center items-center disabled:opacity-60 disabled:cursor-not-allowed",
{
variants: {
variant: {
default:
"shadow-md hover:shadow active:shadow-none bg-primary text-primary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-primary-hover",
secondary:
"shadow-md hover:shadow active:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-secondary-hover",
outline:
"shadow-md hover:shadow active:shadow-none bg-transparent border-2 transition hover:translate-y-1 active:translate-y-2 active:translate-x-1",
link: "bg-transparent hover:underline",
ghost: "bg-transparent hover:bg-accent"
},
size: {
sm: "px-3 py-1 text-sm shadow hover:shadow-none",
md: "px-4 py-1.5 text-base",
lg: "px-6 lg:px-8 py-2 lg:py-3 text-md lg:text-lg",
icon: "p-2",
},
},
defaultVariants: {
size: "md",
variant: "default",
},
},
);
export interface IButtonProps
extends ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
export const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
(
{
children,
size = "md",
className = "",
variant = "default",
asChild = false,
...props
}: IButtonProps,
forwardedRef,
) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
ref={forwardedRef}
className={cn(buttonVariants({ variant, size }), className)}
{...props}
>
{children}
</Comp>
);
},
);
Button.displayName = "Button";
================================================
FILE: components/retroui/Calendar.tsx
================================================
"use client"
import * as React from "react"
import {
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
} from "lucide-react"
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
import { cn } from "@/lib/utils"
import { Button, buttonVariants } from "@/components/retroui/Button"
function Calendar({
className,
classNames,
showOutsideDays = true,
captionLayout = "label",
buttonVariant = "ghost",
formatters,
components,
...props
}: React.ComponentProps<typeof DayPicker> & {
buttonVariant?: React.ComponentProps<typeof Button>["variant"]
}) {
const defaultClassNames = getDefaultClassNames()
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={cn(
"bg-background w-full outline-2 shadow-md group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className
)}
captionLayout={captionLayout}
formatters={{
formatMonthDropdown: (date) =>
date.toLocaleString("default", { month: "short" }),
...formatters,
}}
classNames={{
root: cn("w-fit", defaultClassNames.root),
months: cn(
"flex gap-4 flex-col md:flex-row relative",
defaultClassNames.months
),
month: cn("flex flex-col w-full gap-4 font-head", defaultClassNames.month),
nav: cn(
"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
defaultClassNames.nav
),
button_previous: cn(
buttonVariants({ variant: buttonVariant }),
"size-8 p-2 border-2 rounded select-none",
defaultClassNames.button_previous
),
button_next: cn(
buttonVariants({ variant: buttonVariant }),
"size-8 p-2 border-2 rounded select-none",
defaultClassNames.button_next
),
month_caption: cn(
"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
defaultClassNames.month_caption
),
dropdowns: cn(
"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
defaultClassNames.dropdowns
),
dropdown_root: cn(
"relative has-focus:outline-ring outline outline-input has-focus:ring-ring/50 has-focus:ring-[3px] rounded",
defaultClassNames.dropdown_root
),
dropdown: cn(
"absolute bg-popover inset-0 opacity-0",
defaultClassNames.dropdown
),
caption_label: cn(
"select-none font-medium",
captionLayout === "label"
? "text-base"
: "rounded-none pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
defaultClassNames.caption_label
),
table: "w-full outline-collapse",
weekdays: cn("flex", defaultClassNames.weekdays),
weekday: cn(
"flex-1 font-normal text-sm select-none",
defaultClassNames.weekday
),
week: cn("flex w-full mt-2", defaultClassNames.week),
week_number_header: cn(
"select-none w-(--cell-size)",
defaultClassNames.week_number_header
),
week_number: cn(
"text-[0.8rem] select-none text-muted-foreground",
defaultClassNames.week_number
),
day: cn(
"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r group/day aspect-square select-none",
props.showWeekNumber
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l"
: "[&:first-child[data-selected=true]_button]:rounded-l",
defaultClassNames.day
),
today: cn(
"bg-accent text-accent-foreground rounded data-[selected=true]:rounded-none",
defaultClassNames.today
),
outside: cn(
"text-muted-foreground aria-selected:text-muted-foreground opacity-80",
defaultClassNames.outside
),
disabled: cn(
"text-muted-foreground opacity-50",
defaultClassNames.disabled
),
hidden: cn("invisible", defaultClassNames.hidden),
...classNames,
}}
components={{
Root: ({ className, rootRef, ...props }) => {
return (
<div
data-slot="calendar"
ref={rootRef}
className={cn(className)}
{...props}
/>
)
},
Chevron: ({ className, orientation, ...props }) => {
if (orientation === "left") {
return (
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
)
}
if (orientation === "right") {
return (
<ChevronRightIcon
className={cn("size-4", className)}
{...props}
/>
)
}
return (
<ChevronDownIcon className={cn("size-4", className)} {...props} />
)
},
DayButton: CalendarDayButton,
WeekNumber: ({ children, ...props }) => {
return (
<td {...props}>
<div className="flex size-(--cell-size) items-center justify-center text-center">
{children}
</div>
</td>
)
},
...components,
}}
{...props}
/>
)
}
function CalendarDayButton({
className,
day,
modifiers,
...props
}: React.ComponentProps<typeof DayButton>) {
const defaultClassNames = getDefaultClassNames()
const ref = React.useRef<HTMLButtonElement>(null)
React.useEffect(() => {
if (modifiers.focused) ref.current?.focus()
}, [modifiers.focused])
return (
<Button
ref={ref}
variant="ghost"
size="icon"
data-day={day.date.toLocaleDateString()}
data-selected-single={
modifiers.selected &&
!modifiers.range_start &&
!modifiers.range_end &&
!modifiers.range_middle
}
data-range-start={modifiers.range_start}
data-range-end={modifiers.range_end}
data-range-middle={modifiers.range_middle}
className={cn(
"font-sans flex justify-center items-center data-[selected-single=true]:shadow-md data-[selected-single=true]:outline-2 outline-border data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-secondary data-[range-middle=true]:hover:text-secondary-foreground data-[range-middle=true]:text-secondary-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring-1 group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[2px] data-[range-end=true]:rounded-none data-[range-end=true]:rounded-none data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-none [&>span]:text-xs",
defaultClassNames.day,
className
)}
{...props}
/>
)
}
export { Calendar, CalendarDayButton }
================================================
FILE: components/retroui/Card.tsx
================================================
import { cn } from "@/lib/utils";
import { HTMLAttributes } from "react";
import { Text } from "@/components/retroui/Text";
interface ICardProps extends HTMLAttributes<HTMLDivElement> {
className?: string;
}
const Card = ({ className, ...props }: ICardProps) => {
return (
<div
className={cn(
"inline-block border-2 rounded shadow-md transition-all hover:shadow-none bg-card",
className,
)}
{...props}
/>
);
};
const CardHeader = ({ className, ...props }: ICardProps) => {
return (
<div
className={cn("flex flex-col justify-start p-4", className)}
{...props}
/>
);
};
const CardTitle = ({ className, ...props }: ICardProps) => {
return <Text as="h3" className={cn("mb-2", className)} {...props} />;
};
const CardDescription = ({ className, ...props }: ICardProps) => (
<p className={cn("text-muted-foreground", className)} {...props} />
);
const CardContent = ({ className, ...props }: ICardProps) => {
return <div className={cn("p-4", className)} {...props} />;
};
const CardComponent = Object.assign(Card, {
Header: CardHeader,
Title: CardTitle,
Description: CardDescription,
Content: CardContent,
});
export { CardComponent as Card };
================================================
FILE: components/retroui/Carousel.tsx
================================================
"use client"
import * as React from "react"
import useEmblaCarousel, {
type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/retroui/Button"
type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]
type CarouselProps = {
opts?: CarouselOptions
plugins?: CarouselPlugin
orientation?: "horizontal" | "vertical"
setApi?: (api: CarouselApi) => void
}
type CarouselContextProps = {
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
api: ReturnType<typeof useEmblaCarousel>[1]
scrollPrev: () => void
scrollNext: () => void
canScrollPrev: boolean
canScrollNext: boolean
} & CarouselProps
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
function useCarousel() {
const context = React.useContext(CarouselContext)
if (!context) {
throw new Error("useCarousel must be used within a <Carousel />")
}
return context
}
function Carousel({
orientation = "horizontal",
opts,
setApi,
plugins,
className,
children,
...props
}: React.ComponentProps<"div"> & CarouselProps) {
const [carouselRef, api] = useEmblaCarousel(
{
...opts,
axis: orientation === "horizontal" ? "x" : "y",
},
plugins
)
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
const [canScrollNext, setCanScrollNext] = React.useState(false)
const onSelect = React.useCallback((api: CarouselApi) => {
if (!api) return
setCanScrollPrev(api.canScrollPrev())
setCanScrollNext(api.canScrollNext())
}, [])
const scrollPrev = React.useCallback(() => {
api?.scrollPrev()
}, [api])
const scrollNext = React.useCallback(() => {
api?.scrollNext()
}, [api])
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === "ArrowLeft") {
event.preventDefault()
scrollPrev()
} else if (event.key === "ArrowRight") {
event.preventDefault()
scrollNext()
}
},
[scrollPrev, scrollNext]
)
React.useEffect(() => {
if (!api || !setApi) return
setApi(api)
}, [api, setApi])
React.useEffect(() => {
if (!api) return
onSelect(api)
api.on("reInit", onSelect)
api.on("select", onSelect)
return () => {
api?.off("select", onSelect)
}
}, [api, onSelect])
return (
<CarouselContext.Provider
value={{
carouselRef,
api: api,
opts,
orientation:
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext,
}}
>
<div
onKeyDownCapture={handleKeyDown}
className={cn("relative", className)}
role="region"
aria-roledescription="carousel"
data-slot="carousel"
{...props}
>
{children}
</div>
</CarouselContext.Provider>
)
}
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
const { carouselRef, orientation } = useCarousel()
return (
<div
ref={carouselRef}
className="overflow-hidden"
data-slot="carousel-content"
>
<div
className={cn(
"flex",
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
className
)}
{...props}
/>
</div>
)
}
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
const { orientation } = useCarousel()
return (
<div
role="group"
aria-roledescription="slide"
data-slot="carousel-item"
className={cn(
"min-w-0 shrink-0 grow-0 basis-full",
orientation === "horizontal" ? "pl-4" : "pt-4",
className
)}
{...props}
/>
)
}
function CarouselPrevious({
className,
variant = "outline",
size = "icon",
...props
}: React.ComponentProps<typeof Button>) {
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
return (
<Button
data-slot="carousel-previous"
variant={variant}
size={size}
className={cn(
"absolute size-8 rounded",
orientation === "horizontal"
? "top-1/2 -left-12 -translate-y-1/2 hover:-translate-y-[calc(50%-2px)] active:-translate-y-[calc(50%-4px)]"
: "-top-12 left-1/2 -translate-x-1/2 rotate-90 hover:-translate-x-[calc(50%-2px)] active:-translate-x-[calc(50%-4px)]",
className
)}
disabled={!canScrollPrev}
onClick={scrollPrev}
{...props}
>
<ArrowLeft />
<span className="sr-only">Previous slide</span>
</Button>
)
}
function CarouselNext({
className,
variant = "outline",
size = "icon",
...props
}: React.ComponentProps<typeof Button>) {
const { orientation, scrollNext, canScrollNext } = useCarousel()
return (
<Button
data-slot="carousel-next"
variant={variant}
size={size}
className={cn(
"absolute size-8 rounded",
orientation === "horizontal"
? "top-1/2 -right-12 -translate-y-1/2 hover:-translate-y-[calc(50%-2px)] active:-translate-y-[calc(50%-4px)]"
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 hover:-translate-x-[calc(50%-2px)] active:-translate-x-[calc(50%-4px)]",
className
)}
disabled={!canScrollNext}
onClick={scrollNext}
{...props}
>
<ArrowRight />
<span className="sr-only">Next slide</span>
</Button>
)
}
const CarouselObject = Object.assign(Carousel, {
Content: CarouselContent,
Item: CarouselItem,
Previous: CarouselPrevious,
Next: CarouselNext,
})
export { CarouselObject as Carousel }
================================================
FILE: components/retroui/Checkbox.tsx
================================================
import { cn } from "@/lib/utils";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { cva, VariantProps } from "class-variance-authority";
import { Check } from "lucide-react";
const checkboxVariants = cva("border-2 rounded", {
variants: {
variant: {
default: "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground ",
outline: "",
solid:
"data-[state=checked]:bg-foreground data-[state=checked]:text-background",
},
size: {
sm: "h-4 w-4",
md: "h-5 w-5",
lg: "h-6 w-6",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
});
interface CheckboxProps
extends React.ComponentProps<typeof CheckboxPrimitive.Root>,
VariantProps<typeof checkboxVariants> {}
export const Checkbox = ({
className,
size,
variant,
...props
}: CheckboxProps) => (
<CheckboxPrimitive.Root
className={cn(
checkboxVariants({
size,
variant,
}),
className,
)}
{...props}
>
<CheckboxPrimitive.Indicator className="h-full w-full">
<Check className="h-full w-full" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
);
================================================
FILE: components/retroui/Command.tsx
================================================
"use client";
import React from "react";
import { cn } from "@/lib/utils";
import { Dialog } from "@/components/retroui/Dialog";
import { type DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { Check, LucideIcon, Search } from "lucide-react";
function Command({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive>) {
return (
<CommandPrimitive
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded bg-background text-foreground border-border shadow-md",
className,
)}
{...props}
/>
);
}
type CommandDialogProps = DialogProps & { className?: string };
const CommandDialog = ({
children,
className,
...props
}: CommandDialogProps) => {
return (
<Dialog {...props}>
<Dialog.Content
className={cn(
"overflow-hidden p-0 shadow-lg rounded w-full max-w-md",
className,
)}
>
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</Dialog.Content>
</Dialog>
);
};
function CommandInput({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
return (
<div
className="flex items-center border-border border-b px-3"
cmdk-input-wrapper=""
data-slot="command-input"
>
<Search className="me-2 h-4 w-4 shrink-0 opacity-50 text-foreground" />
<CommandPrimitive.Input
className={cn(
"flex h-11 w-full rounded bg-transparent py-3 text-sm outline-hidden text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-body",
className,
)}
{...props}
/>
</div>
);
}
function CommandList({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
return (
<CommandPrimitive.List
data-slot="command-list"
className={cn(
"max-h-[400px] overflow-auto overscroll-contain transition-[height] h-[calc(min(300px,var(--cmdk-list-height)))] bg-background",
className,
)}
{...props}
/>
);
}
function CommandEmpty({
...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
return (
<CommandPrimitive.Empty
data-slot="command-empty"
className="py-6 text-center text-sm text-muted-foreground font-body"
{...props}
/>
);
}
function CommandGroup({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
return (
<CommandPrimitive.Group
data-slot="command-group"
className={cn(
"overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground font-body",
className,
)}
{...props}
/>
);
}
function CommandSeparator({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
return (
<CommandPrimitive.Separator
data-slot="command-separator"
className={cn("h-px bg-border", className)}
{...props}
/>
);
}
function CommandItem({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
return (
<CommandPrimitive.Item
data-slot="command-item"
className={cn(
"relative flex text-foreground cursor-pointer gap-2 select-none items-center rounded px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground transition-all font-body",
className,
)}
{...props}
/>
);
}
const CommandShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
data-slot="command-shortcut"
className={cn(
"ms-auto text-xs tracking-widest text-muted-foreground font-body",
className,
)}
{...props}
/>
);
};
interface CommandCheckProps {
icon?: LucideIcon;
className?: string;
}
function CommandCheck({
icon: Icon = Check,
className,
...props
}: CommandCheckProps) {
return (
<Icon
data-slot="command-check"
data-check="true"
className={cn("size-4 ms-auto text-primary", className)}
{...props}
/>
);
}
const CommandComponent = Object.assign(Command, {
Check: CommandCheck,
Dialog: CommandDialog,
Empty: CommandEmpty,
Group: CommandGroup,
Input: CommandInput,
Item: CommandItem,
List: CommandList,
Separator: CommandSeparator,
Shortcut: CommandShortcut,
});
export { CommandComponent as Command };
================================================
FILE: components/retroui/CommandDisplay.tsx
================================================
"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>
);
}
================================================
FILE: components/retroui/ContextMenu.tsx
================================================
"use client";
import * as React from "react";
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import { cn } from "@/lib/utils";
function ContextMenu({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
}
function ContextMenuTrigger({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
return (
<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
);
}
function ContextMenuGroup({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
return (
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
);
}
function ContextMenuPortal({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
return (
<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
);
}
function ContextMenuSub({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
}
function ContextMenuRadioGroup({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
return (
<ContextMenuPrimitive.RadioGroup
data-slot="context-menu-radio-group"
{...props}
/>
);
}
function ContextMenuSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
inset?: boolean;
}) {
return (
<ContextMenuPrimitive.SubTrigger
data-slot="context-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-primary focus:text-primary-foreground data-[state=open]:bg-primary data-[state=open]:text-primary-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors",
className,
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto" />
</ContextMenuPrimitive.SubTrigger>
);
}
function ContextMenuSubContent({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
return (
<ContextMenuPrimitive.SubContent
data-slot="context-menu-sub-content"
className={cn(
"bg-background text-foreground border-2 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-[--radix-context-menu-content-transform-origin] overflow-hidden rounded-sm p-1",
className,
)}
{...props}
/>
);
}
function ContextMenuContent({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
return (
<ContextMenuPrimitive.Portal>
<ContextMenuPrimitive.Content
data-slot="context-menu-content"
className={cn(
"bg-background text-foreground border-2 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] origin-[--radix-context-menu-content-transform-origin] overflow-x-hidden overflow-y-auto rounded-sm p-1",
className,
)}
{...props}
/>
</ContextMenuPrimitive.Portal>
);
}
function ContextMenuItem({
className,
inset,
variant = "default",
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
inset?: boolean;
variant?: "default" | "destructive";
}) {
return (
<ContextMenuPrimitive.Item
data-slot="context-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-primary focus:text-primary-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors",
className,
)}
{...props}
/>
);
}
function ContextMenuCheckboxItem({
className,
children,
checked,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
return (
<ContextMenuPrimitive.CheckboxItem
data-slot="context-menu-checkbox-item"
className={cn(
"focus:bg-primary focus:text-primary-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors",
className,
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</ContextMenuPrimitive.ItemIndicator>
</span>
{children}
</ContextMenuPrimitive.CheckboxItem>
);
}
function ContextMenuRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
return (
<ContextMenuPrimitive.RadioItem
data-slot="context-menu-radio-item"
className={cn(
"focus:bg-primary focus:text-primary-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors",
className,
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</ContextMenuPrimitive.ItemIndicator>
</span>
{children}
</ContextMenuPrimitive.RadioItem>
);
}
function ContextMenuLabel({
className,
inset,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
inset?: boolean;
}) {
return (
<ContextMenuPrimitive.Label
data-slot="context-menu-label"
data-inset={inset}
className={cn(
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className,
)}
{...props}
/>
);
}
function ContextMenuSeparator({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
return (
<ContextMenuPrimitive.Separator
data-slot="context-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
);
}
function ContextMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="context-menu-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className,
)}
{...props}
/>
);
}
const ContextMenuComponent = Object.assign(ContextMenu, {
Trigger: ContextMenuTrigger,
Content: ContextMenuContent,
Item: ContextMenuItem,
CheckboxItem: ContextMenuCheckboxItem,
RadioItem: ContextMenuRadioItem,
Label: ContextMenuLabel,
Separator: ContextMenuSeparator,
Shortcut: ContextMenuShortcut,
Group: ContextMenuGroup,
Portal: ContextMenuPortal,
Sub: ContextMenuSub,
SubContent: ContextMenuSubContent,
SubTrigger: ContextMenuSubTrigger,
RadioGroup: ContextMenuRadioGroup,
});
export { ContextMenuComponent as ContextMenu };
================================================
FILE: components/retroui/Dialog.tsx
================================================
"use client";
import * as ReactDialog from "@radix-ui/react-dialog";
import { cn } from "@/lib/utils";
import { cva, VariantProps } from "class-variance-authority";
import React, { HTMLAttributes, ReactNode } from "react";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { X } from "lucide-react";
const Dialog = ReactDialog.Root;
const DialogTrigger = ReactDialog.Trigger;
const overlayVariants = cva(
` fixed bg-black/80 font-head
data-[state=open]:fade-in-0
data-[state=open]:animate-in
data-[state=closed]:animate-out
data-[state=closed]:fade-out-0
`,
{
variants: {
variant: {
default: "inset-0 z-50 bg-black/85",
none: "fixed bg-transparent",
},
},
defaultVariants: {
variant: "default",
},
},
);
interface IDialogBackgroupProps
extends HTMLAttributes<HTMLDivElement>,
VariantProps<typeof overlayVariants> {}
const DialogBackdrop = React.forwardRef<HTMLDivElement, IDialogBackgroupProps>(
function DialogBackdrop(inputProps: IDialogBackgroupProps, forwardedRef) {
const { variant = "default", className, ...props } = inputProps;
return (
<ReactDialog.Overlay
className={cn(overlayVariants({ variant }), className)}
ref={forwardedRef}
{...props}
/>
);
},
);
DialogBackdrop.displayName = "DialogBackdrop";
const dialogVariants = cva(
`fixed left-[50%] top-[50%] z-50 grid rounded overflow-hidden w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-2 bg-background shadow-lg duration-200
data-[state=open]:animate-in
data-[state=open]:fade-in-0
data-[state=open]:zoom-in-95
data-[state=closed]:animate-out
data-[state=closed]:fade-out-0
data-[state=closed]:zoom-out-95`,
{
variants: {
size: {
auto: "max-w-fit",
sm: "lg:max-w-[30%]",
md: "lg:max-w-[40%]",
lg: "lg:max-w-[50%]",
xl: "lg:max-w-[60%]",
"2xl": "lg:max-w-[70%]",
"3xl": "lg:max-w-[80%]",
"4xl": "lg:max-w-[90%]",
screen: "max-w-[100%]",
},
},
defaultVariants: {
size: "auto",
},
},
);
interface IDialogContentProps
extends HTMLAttributes<HTMLDivElement>,
VariantProps<typeof dialogVariants> {
overlay?: IDialogBackgroupProps;
}
const DialogContent = React.forwardRef<HTMLDivElement, IDialogContentProps>(
function DialogContent(inputProps: IDialogContentProps, forwardedRef) {
const {
children,
size = "auto",
className,
overlay,
...props
} = inputProps;
return (
<ReactDialog.Portal>
<DialogBackdrop {...overlay} />
<ReactDialog.Content
className={cn(dialogVariants({ size }), className)}
ref={forwardedRef}
{...props}
>
<VisuallyHidden>
<ReactDialog.Title />
</VisuallyHidden>
<div className="flex flex-col relative">{children}</div>
</ReactDialog.Content>
</ReactDialog.Portal>
);
},
);
DialogContent.displayName = "DialogContent";
interface IDialogDescriptionProps extends HTMLAttributes<HTMLDivElement> {}
const DialogDescription = ({
children,
className,
...props
}: IDialogDescriptionProps) => {
return (
<ReactDialog.Description className={cn(className)} {...props}>
{children}
</ReactDialog.Description>
);
};
const dialogFooterVariants = cva(
"flex items-center justify-end border-t-2 min-h-12 gap-4 px-4 py-2",
{
variants: {
variant: {
default: "bg-background text-foreground",
},
position: {
fixed: "sticky bottom-0",
static: "static",
},
},
defaultVariants: {
position: "fixed",
},
},
);
export interface IDialogFooterProps
extends HTMLAttributes<HTMLDivElement>,
VariantProps<typeof dialogFooterVariants> {}
const DialogFooter = ({
children,
className,
position,
variant,
...props
}: IDialogFooterProps) => {
return (
<div
className={cn(dialogFooterVariants({ position, variant }), className)}
{...props}
>
{children}
</div>
);
};
const dialogHeaderVariants = cva(
"flex items-center justify-between border-b-2 px-4 min-h-12",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground",
},
position: {
fixed: "sticky top-0",
static: "static",
},
},
defaultVariants: {
variant: "default",
position: "static",
},
},
);
const DialogHeaderDefaultLayout = ({ children }: { children: ReactNode }) => {
return (
<>
{children}
<DialogTrigger title="Close pop-up" className="cursor-pointer" asChild>
<X />
</DialogTrigger>
</>
);
};
interface IDialogHeaderProps
extends HTMLAttributes<HTMLDivElement>,
VariantProps<typeof dialogHeaderVariants>,
ReactDialog.DialogTitleProps {}
const DialogHeader = ({
children,
className,
position,
variant,
asChild,
...props
}: IDialogHeaderProps) => {
return (
<div
className={cn(dialogHeaderVariants({ position, variant }), className)}
{...props}
>
{asChild ? (
children
) : (
<DialogHeaderDefaultLayout>{children}</DialogHeaderDefaultLayout>
)}
</div>
);
};
const DialogComponent = Object.assign(Dialog, {
Trigger: DialogTrigger,
Header: DialogHeader,
Content: DialogContent,
Description: DialogDescription,
Footer: DialogFooter,
});
export { DialogComponent as Dialog };
================================================
FILE: components/retroui/Drawer.tsx
================================================
"use client"
import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"
import { cn } from "@/lib/utils"
function Drawer({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
return <DrawerPrimitive.Root data-slot="drawer" {...props} />
}
function DrawerTrigger({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}
function DrawerPortal({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}
function DrawerClose({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}
function DrawerOverlay({
className,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
return (
<DrawerPrimitive.Overlay
data-slot="drawer-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props}
/>
)
}
function DrawerContent({
className,
children,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
return (
<DrawerPortal data-slot="drawer-portal">
<DrawerOverlay />
<DrawerPrimitive.Content
data-slot="drawer-content"
className={cn(
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b data-[vaul-drawer-direction=top]:border-b-2",
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t data-[vaul-drawer-direction=bottom]:border-t-2",
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l-2 data-[vaul-drawer-direction=right]:sm:max-w-sm",
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r-2 data-[vaul-drawer-direction=left]:sm:max-w-sm",
className
)}
{...props}
>
<div className="bg-foreground mx-auto mt-4 hidden h-1 w-[60px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
)
}
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="drawer-header"
className={cn(
"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
className
)}
{...props}
/>
)
}
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="drawer-footer"
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
)
}
function DrawerTitle({
className,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
return (
<DrawerPrimitive.Title
data-slot="drawer-title"
className={cn("text-foreground text-xl font-head font-medium", className)}
{...props}
/>
)
}
function DrawerDescription({
className,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
return (
<DrawerPrimitive.Description
data-slot="drawer-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
}
const DrawerComponent = Object.assign(Drawer, {
Trigger: DrawerTrigger,
Portal: DrawerPortal,
Overlay: DrawerOverlay,
Close: DrawerClose,
Content: DrawerContent,
Header: DrawerHeader,
Footer: DrawerFooter,
Title: DrawerTitle,
Description: DrawerDescription,
});
export { DrawerComponent as Drawer };
================================================
FILE: components/retroui/Empty.tsx
================================================
import { Text } from "@/components/retroui/Text";
import { cn } from "@/lib/utils";
import { Ghost } from "lucide-react";
import { HTMLAttributes } from "react";
interface IEmptyProps extends HTMLAttributes<HTMLDivElement> {
className?: string;
}
const Empty = ({ className, ...props }: IEmptyProps) => {
return (
<div
className={cn(
"flex flex-col items-center justify-center p-4 md:p-8 border-2 rounded shadow-md transition-all hover:shadow-none bg-card text-center",
className,
)}
{...props}
/>
);
};
Empty.displayName = "Empty";
const EmptyContent = ({ className, ...props }: IEmptyProps) => {
return (
<div
className={cn("flex flex-col items-center gap-3", className)}
{...props}
/>
);
};
EmptyContent.displayName = "Empty.Content";
const EmptyIcon = ({ children, className, ...props }: IEmptyProps) => {
return (
<div className={cn(className)} {...props}>
{children || <Ghost className="w-full h-full" />}
</div>
);
};
EmptyIcon.displayName = "Empty.Icon";
const EmptyTitle = ({ className, ...props }: IEmptyProps) => {
return (
<Text
as="h3"
className={cn("text-lg md:text-2xl font-bold", className)}
{...props}
/>
);
};
EmptyTitle.displayName = "Empty.Title";
const EmptySeparator = ({ className, ...props }: IEmptyProps) => {
return <div role="separator" className={cn("w-full h-1 bg-primary", className)} {...props} />;
};
EmptySeparator.displayName = "Empty.Separator";
const EmptyDescription = ({
className,
...props
}: HTMLAttributes<HTMLParagraphElement>) => (
<p
className={cn("text-muted-foreground max-w-[320px]", className)}
{...props}
/>
);
EmptyDescription.displayName = "Empty.Description";
const EmptyComponent = Object.assign(Empty, {
Content: EmptyContent,
Icon: EmptyIcon,
Title: EmptyTitle,
Separator: EmptySeparator,
Description: EmptyDescription,
});
export { EmptyComponent as Empty };
================================================
FILE: components/retroui/IconButton.tsx
================================================
import React, { ButtonHTMLAttributes } from "react";
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
size?: "sm" | "md" | "lg";
className?: string;
variant?: "primary" | "outline" | "link";
}
export function IconButton({
children,
size = "md",
className = "",
variant = "primary",
...props
}: ButtonProps) {
const sizeClasses = {
sm: "p-2",
md: "p-3",
lg: "p-4",
};
const variantClasses = {
primary:
"bg-primary text-black border-2 border-black hover:bg-primary-hover",
outline: "bg-transparent text-black border-2 border-black",
link: "bg-transparent text-primary hover:underline",
};
return (
<button
className={`font-head border-2 border-black shadow-md hover:shadow-xs transition-all ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
{...props}
>
{children}
</button>
);
}
================================================
FILE: components/retroui/Input.tsx
================================================
import React, { InputHTMLAttributes } from "react";
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
className?: string;
}
export const Input: React.FC<InputProps> = ({
type = "text",
placeholder = "Enter text",
className = "",
...props
}) => {
return (
<input
type={type}
placeholder={placeholder}
className={`px-4 py-2 w-full rounded border-2 shadow-md transition focus:outline-hidden focus:shadow-xs ${
props["aria-invalid"]
? "border-destructive text-destructive shadow-xs shadow-destructive"
: ""
} ${className}`}
{...props}
/>
);
};
================================================
FILE: components/retroui/Label.tsx
================================================
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils";
const labelVariants = cva(
"leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
);
export const Label = ({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) => (
<LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />
);
================================================
FILE: components/retroui/Loader.tsx
================================================
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const loaderVariants = cva("flex gap-1", {
variants: {
variant: {
default: "[&>div]:bg-primary [&>div]:border-border",
secondary:
"[&>div]:bg-secondary [&>div]:border-border",
outline: "[&>div]:bg-transparent [&>div]:border-border",
},
size: {
sm: "[&>div]:w-2 [&>div]:h-2",
md: "[&>div]:w-3 [&>div]:h-3",
lg: "[&>div]:w-4 [&>div]:h-4",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
});
interface LoaderProps
extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
VariantProps<typeof loaderVariants> {
asChild?: boolean;
count?: number; // number of bouncing dots
duration?: number; // animation duration in seconds
delayStep?: number; // delay in ms
}
const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(
(
{
className,
variant,
size,
count = 3,
duration = 0.5,
delayStep = 100,
...props
},
ref,
) => {
return (
<div
className={cn(loaderVariants({ variant, size }), className)}
ref={ref}
role="status"
aria-label="Loading..."
{...props}
>
{Array.from({ length: count }).map((_, i) => (
<div
key={i}
className="border-2 animate-bounce"
style={{
animationDuration: `${duration}s`,
animationIterationCount: "infinite",
animationDelay: `${i * delayStep}ms`,
}}
/>
))}
</div>
);
},
);
Loader.displayName = "Loader";
export { Loader };
================================================
FILE: components/retroui/Login.tsx
================================================
import React from "react";
import { Text } from "./Text";
import { Input } from "./Input";
import { Button } from "./Button";
import Link from "next/link";
export function Login() {
return (
<div className="max-w-80 p-4 border-2 border-black shadow-md space-y-3">
<div className="text-center">
<Text as="h2">Login</Text>
</div>
<form className="flex flex-col gap-5 ">
<div className="flex flex-col items-center justify-center">
<label htmlFor="email" className="w-11/12">
Email
</label>
<Input id="email" type="email" placeholder="email" />
</div>
<div className="flex flex-col items-center justify-center">
<label htmlFor="password" className="w-11/12">
Password
</label>
<Input id="password" type="password" placeholder="password" />
</div>
<div className="flex flex-col items-center justify-center py-4 gap-1">
<Button className="rounded-full active:shadow-none active:scale-95">
Submit
</Button>
<div className="px-4 py-2 space-x-1">
<span>Don't have an account?</span>
<Link href="/" className="text-primary-700 hover:underline">
sign-in
</Link>
</div>
</div>
</form>
</div>
);
}
================================================
FILE: components/retroui/Menu.tsx
================================================
"use client";
import { cn } from "@/lib/utils";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import React, { ComponentPropsWithoutRef } from "react";
const Menu = DropdownMenu.Root;
const Trigger = DropdownMenu.Trigger;
interface IMenuContent
extends ComponentPropsWithoutRef<typeof DropdownMenu.Content> {}
const Content = ({ className, ...props }: IMenuContent) => (
<DropdownMenu.Portal>
<DropdownMenu.Content
side="bottom"
align="start"
className={cn(
"bg-white border-2 shadow-md absolute top-2 min-w-20",
className,
)}
{...props}
/>
</DropdownMenu.Portal>
);
const MenuItem = React.forwardRef<
HTMLDivElement,
ComponentPropsWithoutRef<typeof DropdownMenu.Item>
>(({ className, ...props }, ref) => (
<DropdownMenu.Item
ref={ref}
className={cn(
"relative text-black flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-primary focus:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50",
className,
)}
{...props}
/>
));
MenuItem.displayName = "MenuItem";
const MenuComponent = Object.assign(Menu, {
Trigger,
Content,
Item: MenuItem,
});
export { MenuComponent as Menu };
================================================
FILE: components/retroui/Popover.tsx
================================================
"use client";
import * as React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import { cn } from "@/lib/utils";
import { cva, VariantProps } from "class-variance-authority";
const popoverContentVariants = cva(
"z-50 w-72 border-2 bg-background p-4 text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
);
const Popover = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverAnchor = PopoverPrimitive.Anchor;
const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
VariantProps<typeof popoverContentVariants>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
popoverContentVariants({
className,
}),
)}
{...props}
/>
</PopoverPrimitive.Portal>
));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
const PopoverObject = Object.assign(Popover, {
Trigger: PopoverTrigger,
Content: PopoverContent,
Anchor: PopoverAnchor,
});
export { PopoverObject as Popover };
================================================
FILE: components/retroui/ProductCard.tsx
================================================
import React from "react";
import { Button } from "./Button";
export function ProductCard() {
return (
<div className="max-w-80 p-4 border-2 border-black">
<img
alt="product image"
src="https://images.unsplash.com/photo-1596998791568-386ef5297c2e?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
<div className="mt-4 space-y-4">
<h3 className="font-head text-3xl font-medium mb-1">Classic Gameboy</h3>
<div className="flex justify-between items-center">
<span className="text-lg font-semibold">$29.99</span>
<Button>Add To Cart</Button>
</div>
</div>
</div>
);
}
================================================
FILE: components/retroui/Progress.tsx
================================================
"use client";
import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";
import { cn } from "@/lib/utils";
const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
className={cn(
"relative h-4 w-full overflow-hidden bg-background border-2",
className,
)}
{...props}
>
<ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>
));
Progress.displayName = ProgressPrimitive.Root.displayName;
export { Progress };
================================================
FILE: components/retroui/Radio.tsx
================================================
import { cn } from "@/lib/utils";
import * as RadioPrimitive from "@radix-ui/react-radio-group";
import { cva, VariantProps } from "class-variance-authority";
const radioVariants = cva("border-border border-2", {
variants: {
variant: {
default: "",
outline: "",
solid: "",
},
size: {
sm: "h-4 w-4",
md: "h-5 w-5",
lg: "h-6 w-6",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
});
const radioIndicatorVariants = cva("flex ", {
variants: {
variant: {
default: "bg-primary border-2 border-border",
outline: "border-2 border-border",
solid: "bg-border",
},
size: {
sm: "h-2 w-2",
md: "h-2.5 w-2.5",
lg: "h-3.5 w-3.5",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
});
interface RadioGroupProps
extends React.ComponentProps<typeof RadioPrimitive.Root> {}
export const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (
<RadioPrimitive.Root className={cn("grid gap-2", className)} {...props} />
);
interface RadioProps
extends React.ComponentProps<typeof RadioPrimitive.Item>,
VariantProps<typeof radioVariants> {}
export const RadioItem = ({
children,
className,
size,
variant,
...props
}: RadioProps) => (
<RadioPrimitive.Item
{...props}
className={cn(
radioVariants({
size,
variant,
}),
className,
)}
>
<RadioPrimitive.Indicator className="flex justify-center items-center">
<span className={radioIndicatorVariants({ size, variant })}></span>
</RadioPrimitive.Indicator>
{children}
</RadioPrimitive.Item>
);
const RadioComponent = Object.assign(RadioGroupRoot, {
Item: RadioItem,
});
export { RadioComponent as RadioGroup };
================================================
FILE: components/retroui/Select.tsx
================================================
"use client";
import { cn } from "@/lib/utils";
import * as SelectPrimitive from "@radix-ui/react-select";
import { Check, ChevronDown, ChevronUp } from "lucide-react";
import React from "react";
const Select = SelectPrimitive.Root;
const SelectTrigger = ({
className,
children,
...props
}: SelectPrimitive.SelectTriggerProps) => {
return (
<SelectPrimitive.Trigger
className={cn(
"flex h-10 rounded min-w-40 items-center shadow-md focus:shadow-xs justify-between border-2 border-input border-border bg-transparent px-4 py-2 placeholder:text-muted-foreground outline-none focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="ml-2 h-4 w-4" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
);
};
const SelectValue = SelectPrimitive.Value;
const SelectIcon = SelectPrimitive.Icon;
const SelectContent = ({
className,
children,
position = "popper",
...props
}: SelectPrimitive.SelectContentProps) => {
return (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
className={cn(
"relative z-50 min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,
)}
position={position}
{...props}
>
<SelectPrimitive.ScrollUpButton className="flex cursor-default items-center justify-center py-1 text-muted-foreground">
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
<SelectPrimitive.Viewport
className={cn(
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectPrimitive.ScrollDownButton className="flex cursor-default items-center justify-center py-1 text-muted-foreground">
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
);
};
const SelectGroup = SelectPrimitive.Group;
const SelectItem = ({
className,
children,
...props
}: SelectPrimitive.SelectItemProps) => (
<SelectPrimitive.Item
className={cn(
"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-none data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground focus:bg-primary focus:text-primary-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className,
)}
{...props}
>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4 text-foreground" />
</SelectPrimitive.ItemIndicator>
</span>
</SelectPrimitive.Item>
);
const SelectLabel = SelectPrimitive.Label;
const SelectSeparator = SelectPrimitive.Separator;
const SelectObj = Object.assign(Select, {
Trigger: SelectTrigger,
Value: SelectValue,
Icon: SelectIcon,
Content: SelectContent,
Group: SelectGroup,
Item: SelectItem,
Label: SelectLabel,
Separator: SelectSeparator,
});
export { SelectObj as Select };
================================================
FILE: components/retroui/Slider.tsx
================================================
"use client";
import * as React from "react";
import * as SliderPrimitive from "@radix-ui/react-slider";
import { cn } from "@/lib/utils";
const Slider = React.forwardRef<
React.ElementRef<typeof SliderPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
<SliderPrimitive.Root
ref={ref}
className={cn(
"relative flex w-full touch-none select-none items-center",
className,
)}
{...props}
>
<SliderPrimitive.Track className="relative h-3 w-full grow overflow-hidden bg-background border-2">
<SliderPrimitive.Range className="absolute h-full bg-primary" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="block h-4.5 w-4.5 border-2 bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
</SliderPrimitive.Root>
));
Slider.displayName = SliderPrimitive.Root.displayName;
export { Slider };
================================================
FILE: components/retroui/Sonner.tsx
================================================
"use client";
import { Toaster as Sonner } from "sonner";
type ToasterProps = React.ComponentProps<typeof Sonner>;
const Toaster = ({ ...props }: ToasterProps) => {
return (
<Sonner
toastOptions={{
classNames: {
toast:
"h-auto w-full p-4 bg-background border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border flex items-center relative",
description:
"group-[.toast]:text-muted-foreground ml-2 text-sm font-sans",
actionButton:
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 bg-background border-border shadow hover:shadow-xs hover:translate-[2px] duration-200 transition-all focus:shadow-none border-2 ml-auto h-fit min-w-fit",
cancelButton:
"group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 text-sm bg-background border-border shadow hover:shadow-xs hover:translate-[2px] duration-200 transition-all focus:shadow-none border-2 ml-auto h-fit min-w-fit",
title: "ml-2 font-sans",
closeButton:
"absolute bg-background -top-1 -left-1 rounded-full p-0.5",
},
unstyled: true,
}}
{...props}
/>
);
};
export { Toaster };
================================================
FILE: components/retroui/Switch.tsx
================================================
"use client";
import * as React from "react";
import * as SwitchPrimitives from "@radix-ui/react-switch";
import { cn } from "@/lib/utils";
const Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
className,
)}
{...props}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background",
)}
/>
</SwitchPrimitives.Root>
);
export { Switch };
================================================
FILE: components/retroui/Tab.tsx
================================================
import { cn } from "@/lib/utils";
import {
Tab,
TabGroup,
TabList,
TabListProps,
TabPanel,
TabPanelProps,
TabPanels,
TabProps,
} from "@headlessui/react";
const Tabs = TabGroup;
const TabsPanels = TabPanels;
interface ITabsTriggerList extends TabListProps {
className?: string;
}
const TabsTriggerList = ({
children,
className,
...props
}: ITabsTriggerList) => {
return (
<TabList className={cn("flex flex-row space-x-2 w-full", className)} {...props}>
{children}
</TabList>
);
};
interface ITabsTrigger extends TabProps {
className?: string;
}
const TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {
return (
<Tab
className={cn(
"px-4 py-1 border-2 border-transparent data-selected:border-border data-selected:bg-primary data-selected:text-primary-foreground data-selected:font-semibold focus:outline-hidden",
className,
)}
{...props}
>
{children}
</Tab>
);
};
interface ITabsContent extends TabPanelProps {
className?: string;
}
const TabsContent = ({ children, className, ...props }: ITabsContent) => {
return (
<TabPanel
className={cn("border-2 border-border mt-2 p-4 w-full", className)}
{...props}
>
{children}
</TabPanel>
);
};
export { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList };
================================================
FILE: components/retroui/Table.tsx
================================================
import * as React from "react"
import { cn } from "@/lib/utils"
const Table = React.forwardRef<
HTMLTableElement,
React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="relative h-full w-full overflow-auto">
<table
ref={ref}
className={cn("w-full caption-bottom text-sm border-2 shadow-lg", className)}
{...props}
/>
</div>
))
Table.displayName = "Table"
const TableHeader = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<thead ref={ref} className={cn("[&_tr]:border-b bg-primary text-primary-foreground font-head", className)} {...props} />
))
TableHeader.displayName = "TableHeader"
const TableBody = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tbody
ref={ref}
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>
))
TableBody.displayName = "TableBody"
const TableFooter = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tfoot
ref={ref}
className={cn(
"border-t bg-accent text-accent-foreground font-medium [&>tr]:last:border-b-0",
className
)}
{...props}
/>
))
TableFooter.displayName = "TableFooter"
const TableRow = React.forwardRef<
HTMLTableRowElement,
React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
<tr
ref={ref}
className={cn(
"border-b transition-colors hover:bg-primary/50 hover:text-primary-foreground data-[state=selected]:bg-muted",
className
)}
{...props}
/>
))
TableRow.displayName = "TableRow"
const TableHead = React.forwardRef<
HTMLTableCellElement,
React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<th
ref={ref}
className={cn(
"h-10 md:h-12 px-4 text-left align-middle font-medium text-primary-foreground [&:has([role=checkbox])]:pr-0",
className
)}
{...props}
/>
))
TableHead.displayName = "TableHead"
const TableCell = React.forwardRef<
HTMLTableCellElement,
React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<td
ref={ref}
className={cn("p-2 md:p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props}
/>
))
TableCell.displayName = "TableCell"
const TableCaption = React.forwardRef<
HTMLTableCaptionElement,
React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
<caption
ref={ref}
className={cn("my-2 text-sm text-muted-foreground", className)}
{...props}
/>
))
TableCaption.displayName = "TableCaption"
const TableObj = Object.assign(Table, {
Header: TableHeader,
Body: TableBody,
Footer: TableFooter,
Row: TableRow,
Head: TableHead,
Cell: TableCell,
Caption: TableCaption,
})
export {
TableObj as Table,
}
================================================
FILE: components/retroui/TableOfContents.tsx
================================================
"use client";
import { cn } from '@/lib/utils';
import React, { useEffect, useState } from 'react';
interface TOCItem {
title: string;
url: string;
level: number;
items?: TOCItem[];
}
interface ManualTOCItem {
id: string;
title: string;
depth: number;
}
interface TableOfContentsProps {
depth?: number;
className?: string;
children?: React.ReactNode;
data?: ManualTOCItem[];
}
function generateTOCFromDOM(depth: number = 6): TOCItem[] {
const headings: NodeListOf<HTMLHeadingElement> = document.querySelectorAll(
Array.from({ length: depth }, (_, i) => `h${i + 1}`).join(', ')
);
const items: TOCItem[] = [];
const stack: TOCItem[] = [];
headings.forEach((heading) => {
const level = parseInt(heading.tagName.charAt(1));
const id = heading.id || heading.textContent?.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '') || '';
if (!heading.id && id) {
heading.id = id;
}
const item: TOCItem = {
title: heading.textContent || '',
url: `#${id}`,
level,
};
while (stack.length > 0 && stack[stack.length - 1].level >= level) {
stack.pop();
}
if (stack.length === 0) {
items.push(item);
} else {
const parent = stack[stack.length - 1];
if (!parent.items) parent.items = [];
parent.items.push(item);
}
stack.push(item);
});
return items;
}
function convertManualDataToTOC(data: ManualTOCItem[]): TOCItem[] {
const items: TOCItem[] = [];
const stack: TOCItem[] = [];
data.forEach((item) => {
const tocItem: TOCItem = {
title: item.title,
url: `#${item.id}`,
level: item.depth,
};
while (stack.length > 0 && stack[stack.length - 1].level >= item.depth) {
stack.pop();
}
if (stack.length === 0) {
items.push(tocItem);
} else {
const parent = stack[stack.length - 1];
if (!parent.items) parent.items = [];
parent.items.push(tocItem);
}
stack.push(tocItem);
});
return items;
}
function renderTOCItems(items: TOCItem[], level = 0, activeId: string | null) {
if (!items || items.length === 0) return null;
return (
<ul className={`space-y-1 ${level > 0 ? 'ml-4 mt-1' : ''}`}>
{items.map((item, index) => {
const isActive = activeId === item.url.substring(1);
return (
<li key={index}>
<a
href={item.url}
className={`text-sm max-w-full truncate transition-colors block py-1 border-l-2 pl-2 ${
isActive
? 'text-accent-foreground border-border bg-accent'
: 'border-transparent hover:border-border hover:text-foreground'
}`}
>
{item.title}
</a>
{item.items && renderTOCItems(item.items, level + 1, activeId)}
</li>
);
})}
</ul>
);
}
export function TableOfContents({
depth = 2,
className = "",
children,
data,
}: TableOfContentsProps) {
const [tocItems, setTocItems] = useState<TOCItem[]>([]);
const [activeId, setActiveId] = useState<string | null>(null);
useEffect(() => {
if (data) {
const items = convertManualDataToTOC(data);
setTocItems(items);
return;
}
const items = generateTOCFromDOM(depth);
setTocItems(items);
const observer = new MutationObserver(() => {
const updatedItems = generateTOCFromDOM(depth);
setTocItems(updatedItems);
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['id']
});
return () => observer.disconnect();
}, [depth, data]);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setActiveId(entry.target.id);
}
});
},
{ rootMargin: '-20% 0% -35% 0%' }
);
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
headings.forEach((heading) => observer.observe(heading));
return () => observer.disconnect();
}, []);
if (tocItems.length === 0) {
return null;
}
return (
<div className={cn("border-2 shadow-md p-4 rounded w-52 h-60 overflow-y-auto sidebar-scroll", className)}>
{children}
{renderTOCItems(tocItems, 0, activeId)}
</div>
);
}
================================================
FILE: components/retroui/Text.tsx
================================================
import { ElementType, HTMLAttributes } from "react";
import { VariantProps, cva } from "class-variance-authority";
import { cn } from "@/lib/utils";
const textVariants = cva("font-head", {
variants: {
as: {
p: "font-sans text-base",
li: "font-sans text-base",
a: "font-sans text-base hover:underline underline-offset-2 decoration-primary",
h1: "text-4xl lg:text-5xl font-bold",
h2: "text-3xl lg:text-4xl font-semibold",
h3: "text-2xl font-medium",
h4: "text-xl font-normal",
h5: "text-lg font-normal",
h6: "text-base font-normal",
},
},
defaultVariants: {
as: "p",
},
});
interface TextProps
extends Omit<HTMLAttributes<HTMLElement>, "className">,
VariantProps<typeof textVariants> {
className?: string;
}
export const Text = (props: TextProps) => {
const { className, as, ...otherProps } = props;
const Tag: ElementType = as || "p";
return (
<Tag className={cn(textVariants({ as }), className)} {...otherProps} />
);
};
================================================
FILE: components/retroui/Textarea.tsx
================================================
import React from "react";
import { cn } from "@/lib/utils";
export function Textarea({
type = "text",
placeholder = "Enter text...",
className = "",
...props
}) {
return (
<textarea
placeholder={placeholder}
rows={4}
className={cn(
"px-4 py-2 w-full border-2 rounded border-input shadow-md transition focus:outline-hidden focus:shadow-xs placeholder:text-muted-foreground",
className
)}
{...props}
/>
);
}
================================================
FILE: components/retroui/Toggle.tsx
================================================
"use client";
import * as React from "react";
import * as TogglePrimitive from "@radix-ui/react-toggle";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const toggleVariants = cva(
"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
{
variants: {
variant: {
default:
"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted",
outlined:
"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
solid: "border-2 border-input bg-transparent hover:bg-secondary hover:text-secondary-foreground hover:border-secondary data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground data-[state=on]:border-secondary",
"outline-muted":
"border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted",
},
size: {
default: "h-10 px-3 min-w-10",
sm: "h-9 px-2.5 min-w-9",
lg: "h-11 px-5 min-w-11",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
const Toggle = React.forwardRef<
React.ElementRef<typeof TogglePrimitive.Root>,
React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
<TogglePrimitive.Root
ref={ref}
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
));
Toggle.displayName = TogglePrimitive.Root.displayName;
export { Toggle, toggleVariants };
================================================
FILE: components/retroui/ToggleGroup.tsx
================================================
"use client";
import * as React from "react";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
import { type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
import { toggleVariants } from "./Toggle";
const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants>
>({
size: "default",
variant: "default",
});
const ToggleGroup = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
<ToggleGroupPrimitive.Root
ref={ref}
className={cn("flex items-center justify-center gap-1", className)}
{...props}
>
<ToggleGroupContext.Provider value={{ variant, size }}>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
));
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
const ToggleGroupItem = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
const context = React.useContext(ToggleGroupContext);
return (
<ToggleGroupPrimitive.Item
ref={ref}
className={cn(
toggleVariants({
variant: context.variant || variant,
size: context.size || size,
}),
className,
)}
{...props}
>
{children}
</ToggleGroupPrimitive.Item>
);
});
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
export { ToggleGroup, ToggleGroupItem };
================================================
FILE: components/retroui/Tooltip.tsx
================================================
"use client";
import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { cn } from "@/lib/utils";
import { cva, VariantProps } from "class-variance-authority";
const tooltipContentVariants = cva(
"z-50 overflow-hidden border-2 border-border bg-background px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
{
variants: {
variant: {
default: "bg-background text-foreground",
primary: "bg-primary text-primary-foreground",
solid: "bg-black text-white",
},
},
defaultVariants: {
variant: "default",
},
},
);
const TooltipProvider = TooltipPrimitive.Provider;
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
VariantProps<typeof tooltipContentVariants>
>(({ className, sideOffset = 4, variant, ...props }, ref) => (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
tooltipContentVariants({
variant,
className,
}),
)}
{...props}
/>
</TooltipPrimitive.Portal>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
const TooltipObject = Object.assign(Tooltip, {
Trigger: TooltipTrigger,
Content: TooltipContent,
Provider: TooltipProvider,
});
export { TooltipObject as Tooltip };
================================================
FILE: components/retroui/charts/AreaChart.tsx
================================================
"use client"
import { cn } from "@/lib/utils"
import React from "react"
import {
Area,
AreaChart as RechartsAreaChart,
CartesianGrid,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from "recharts"
interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
data: Record<string, any>[]
index: string
categories: string[]
strokeColors?: string[]
fillColors?: string[]
tooltipBgColor?: string
tooltipBorderColor?: string
gridColor?: string
valueFormatter?: (value: number) => string
showGrid?: boolean
showTooltip?: boolean
fill?: "gradient" | "solid"
className?: string
}
const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
(
{
data = [],
index,
categories = [],
strokeColors = ["var(--foreground)"],
fillColors = ["var(--primary)"],
tooltipBgColor = "var(--background)",
tooltipBorderColor = "var(--border)",
gridColor = "var(--muted)",
valueFormatter = (value: number) => value.toString(),
showGrid = true,
showTooltip = true,
fill = "gradient",
className,
...props
},
ref
) => {
const chartId = React.useId()
return (
<div ref={ref} className={cn("h-80 w-full", className)} {...props}>
<ResponsiveContainer width="100%" height="100%">
<RechartsAreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
<defs>
{categories.map((category, index) => {
const fillColor = fillColors[index] || fillColors[0]
const gradientId = `gradient-${chartId}-${category}`
return (
<linearGradient key={category} id={gradientId} x1="0" y1="0" x2="0" y2="1">
{fill === "gradient" ? (
<>
<stop offset="5%" stopColor={fillColor} stopOpacity={0.8} />
<stop offset="95%" stopColor={fillColor} stopOpacity={0} />
</>
) : (
<stop stopColor={fillColor} stopOpacity={0.6} />
)}
</linearGradient>
)
})}
</defs>
{showGrid && (
<CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
)}
<XAxis
dataKey={index}
axisLine={false}
tickLine={false}
className="text-xs fill-muted-foreground"
/>
<YAxis
axisLine={false}
tickLine={false}
className="text-xs fill-muted-foreground"
tickFormatter={valueFormatter}
/>
{showTooltip && (
<Tooltip
content={({ active, payload, label }) =
gitextract_ggy5d18g/
├── .eslintrc.json
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ └── deploy.yml
├── .gitignore
├── .prettierrc
├── .vscode/
│ └── settings.json
├── CONTRIBUTING.md
├── Dockerfile
├── LICENCE.md
├── README.md
├── app/
│ ├── (docs)/
│ │ └── docs/
│ │ ├── [[...slug]]/
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── (marketing)/
│ │ ├── blogs/
│ │ │ ├── [slug]/
│ │ │ │ └── page.tsx
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── page.tsx
│ │ ├── showcase/
│ │ │ └── page.tsx
│ │ └── themes/
│ │ └── page.tsx
│ ├── (sink)/
│ │ └── demo/
│ │ └── components/
│ │ └── page.tsx
│ ├── actions/
│ │ └── newsletter.ts
│ ├── global.css
│ ├── layout.tsx
│ ├── robots.ts
│ ├── rss.xml/
│ │ └── route.ts
│ └── sitemap.ts
├── bun.lockb
├── components/
│ ├── CodeBlock.tsx
│ ├── ComponentInstall.tsx
│ ├── ComponentShowcase.tsx
│ ├── ComponentSource.tsx
│ ├── CopyTheme.tsx
│ ├── HamburgerMenu.tsx
│ ├── JoinNewsletter.tsx
│ ├── MDX.tsx
│ ├── RichTextCodeBlock.tsx
│ ├── RichTextConverter.tsx
│ ├── SideNav.tsx
│ ├── TableOfContents.tsx
│ ├── Testimonial.tsx
│ ├── ThemeWrapper.tsx
│ ├── TopNav.tsx
│ ├── WorksWithSection.tsx
│ ├── footer.tsx
│ ├── index.ts
│ └── retroui/
│ ├── Accordion.tsx
│ ├── Alert.tsx
│ ├── Avatar.tsx
│ ├── Badge.tsx
│ ├── BasicCard.tsx
│ ├── Breadcrumb.tsx
│ ├── Button.tsx
│ ├── Calendar.tsx
│ ├── Card.tsx
│ ├── Carousel.tsx
│ ├── Checkbox.tsx
│ ├── Command.tsx
│ ├── CommandDisplay.tsx
│ ├── ContextMenu.tsx
│ ├── Dialog.tsx
│ ├── Drawer.tsx
│ ├── Empty.tsx
│ ├── IconButton.tsx
│ ├── Input.tsx
│ ├── Label.tsx
│ ├── Loader.tsx
│ ├── Login.tsx
│ ├── Menu.tsx
│ ├── Popover.tsx
│ ├── ProductCard.tsx
│ ├── Progress.tsx
│ ├── Radio.tsx
│ ├── Select.tsx
│ ├── Slider.tsx
│ ├── Sonner.tsx
│ ├── Switch.tsx
│ ├── Tab.tsx
│ ├── Table.tsx
│ ├── TableOfContents.tsx
│ ├── Text.tsx
│ ├── Textarea.tsx
│ ├── Toggle.tsx
│ ├── ToggleGroup.tsx
│ ├── Tooltip.tsx
│ ├── charts/
│ │ ├── AreaChart.tsx
│ │ ├── BarChart.tsx
│ │ ├── LineChart.tsx
│ │ └── PieChart.tsx
│ └── index.ts
├── config/
│ ├── components.ts
│ ├── index.ts
│ ├── navigation.ts
│ └── theme.ts
├── content/
│ ├── blogs/
│ │ ├── retroui-with-payload-cms.mdx
│ │ ├── top-10-nextjs-ui-library.mdx
│ │ ├── top-5-react-ui-library.mdx
│ │ └── why-neobrutalism-is-perfect-for-modern-websites.mdx
│ └── docs/
│ ├── charts/
│ │ ├── area-chart.mdx
│ │ ├── bar-chart.mdx
│ │ ├── line-chart.mdx
│ │ └── pie-chart.mdx
│ ├── components/
│ │ ├── accordion.mdx
│ │ ├── alert.mdx
│ │ ├── avatar.mdx
│ │ ├── badge.mdx
│ │ ├── breadcrumb.mdx
│ │ ├── button.mdx
│ │ ├── calendar.mdx
│ │ ├── card.mdx
│ │ ├── carousel.mdx
│ │ ├── checkbox.mdx
│ │ ├── command.mdx
│ │ ├── context-menu.mdx
│ │ ├── dialog.mdx
│ │ ├── drawer.mdx
│ │ ├── empty.mdx
│ │ ├── input.mdx
│ │ ├── label.mdx
│ │ ├── loader.mdx
│ │ ├── menu.mdx
│ │ ├── popover.mdx
│ │ ├── progress.mdx
│ │ ├── radio.mdx
│ │ ├── select.mdx
│ │ ├── slider.mdx
│ │ ├── sonner.mdx
│ │ ├── switch.mdx
│ │ ├── tab.mdx
│ │ ├── table.mdx
│ │ ├── text.mdx
│ │ ├── textarea.mdx
│ │ ├── toc.mdx
│ │ ├── toggle-group.mdx
│ │ ├── toggle.mdx
│ │ └── tooltip.mdx
│ ├── index.mdx
│ ├── install/
│ │ ├── index.mdx
│ │ ├── nextjs.mdx
│ │ └── vite.mdx
│ └── utils/
│ └── cn.mdx
├── contentlayer.config.ts
├── contexts/
│ └── ThemeContext.tsx
├── lib/
│ ├── payload.ts
│ ├── registry.ts
│ ├── toc.ts
│ └── utils.ts
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── preview/
│ ├── blocks/
│ │ ├── course-card.tsx
│ │ ├── sign-in.tsx
│ │ └── team-members.tsx
│ ├── charts/
│ │ ├── area-chart-style-default.tsx
│ │ ├── area-chart-style-minimal.tsx
│ │ ├── area-chart-style-multiple.tsx
│ │ ├── area-chart-style-stacked.tsx
│ │ ├── bar-chart-style-default.tsx
│ │ ├── bar-chart-style-grouped.tsx
│ │ ├── bar-chart-style-horizontal.tsx
│ │ ├── bar-chart-style-multiple.tsx
│ │ ├── bar-chart-style-stacked.tsx
│ │ ├── line-chart-style-curved.tsx
│ │ ├── line-chart-style-default.tsx
│ │ ├── line-chart-style-dots.tsx
│ │ ├── line-chart-style-multiple.tsx
│ │ ├── pie-chart-style-default.tsx
│ │ ├── pie-chart-style-donut.tsx
│ │ └── pie-chart-style-small.tsx
│ └── components/
│ ├── accordion-style-default.tsx
│ ├── alert-style-all-status.tsx
│ ├── alert-style-default.tsx
│ ├── alert-style-solid.tsx
│ ├── alert-style-with-icon.tsx
│ ├── avatar-style-circle-fallbacks.tsx
│ ├── avatar-style-circle-sizes.tsx
│ ├── avatar-style-circle.tsx
│ ├── badge-style-default.tsx
│ ├── badge-style-rounded.tsx
│ ├── badge-style-sizes.tsx
│ ├── badge-style-variants.tsx
│ ├── breadcrumb-custom-separator.tsx
│ ├── breadcrumb-link-component.tsx
│ ├── breadcrumb-style-collapsed.tsx
│ ├── breadcrumb-style-default.tsx
│ ├── button-style-default.tsx
│ ├── button-style-icon.tsx
│ ├── button-style-link.tsx
│ ├── button-style-outline.tsx
│ ├── button-style-secondary.tsx
│ ├── button-style-with-icon.tsx
│ ├── calendar-style-default.tsx
│ ├── card-style-commerce.tsx
│ ├── card-style-default.tsx
│ ├── card-style-testimonial.tsx
│ ├── carousel-style-default.tsx
│ ├── carousel-style-sizes.tsx
│ ├── carousel-style-vertical.tsx
│ ├── checkbox-style-default.tsx
│ ├── checkbox-style-sizes.tsx
│ ├── checkbox-style-variants.tsx
│ ├── command-style-default.tsx
│ ├── command-style-dialog.tsx
│ ├── context-menu-style-default.tsx
│ ├── dialog-style-default.tsx
│ ├── dialog-style-width-variant.tsx
│ ├── dialog-style-with-footer.tsx
│ ├── dialog-style-with-form.tsx
│ ├── drawer-style-default.tsx
│ ├── drawer-style-right-direction.tsx
│ ├── empty-style-custom-everything.tsx
│ ├── empty-style-custom-icon.tsx
│ ├── empty-style-default.tsx
│ ├── empty-style-table.tsx
│ ├── input-style-default.tsx
│ ├── input-style-error.tsx
│ ├── input-style-with-label.tsx
│ ├── label-style-default.tsx
│ ├── label.tsx
│ ├── loader-style-custom.tsx
│ ├── loader-style-default.tsx
│ ├── loader-style-outline.tsx
│ ├── loader-style-sizes.tsx
│ ├── loader-style-solid.tsx
│ ├── menu-style-default.tsx
│ ├── popover-style-default-shadow.tsx
│ ├── popover-style-default.tsx
│ ├── progress-style-default.tsx
│ ├── radio-style-default.tsx
│ ├── radio-style-sizes.tsx
│ ├── radio-style-variants.tsx
│ ├── retro-player.tsx
│ ├── select-style-default.tsx
│ ├── slider-style-default.tsx
│ ├── sonner-style-colored-status.tsx
│ ├── sonner-style-default.tsx
│ ├── sonner-style-error.tsx
│ ├── sonner-style-status.tsx
│ ├── switch-style-default.tsx
│ ├── switch-style-disabled.tsx
│ ├── tab-style-default.tsx
│ ├── table-style-default.tsx
│ ├── table-with-checkbox.tsx
│ ├── table-with-sticky-header.tsx
│ ├── text-headings.tsx
│ ├── textarea-style-default.tsx
│ ├── toc-style-default.tsx
│ ├── toc-style-depth.tsx
│ ├── toc-style-manual.tsx
│ ├── toggle-group-style-default.tsx
│ ├── toggle-group-style-outline-muted.tsx
│ ├── toggle-group-style-outlined.tsx
│ ├── toggle-group-style-solid.tsx
│ ├── toggle-style-default.tsx
│ ├── toggle-style-outline-muted.tsx
│ ├── toggle-style-outlined.tsx
│ ├── toggle-style-solid.tsx
│ ├── tooltip-style-default.tsx
│ ├── tooltip-style-primary.tsx
│ ├── tooltip-style-solid.tsx
│ └── typography-p.tsx
├── public/
│ └── r/
│ ├── accordion-style-default.json
│ ├── accordion.json
│ ├── alert-style-all-status.json
│ ├── alert-style-default.json
│ ├── alert-style-solid.json
│ ├── alert-style-with-icon.json
│ ├── alert.json
│ ├── area-chart.json
│ ├── avatar-style-circle-sizes.json
│ ├── avatar-style-circle.json
│ ├── avatar-style-fallbacks.json
│ ├── avatar.json
│ ├── badge-style-default.json
│ ├── badge-style-sizes.json
│ ├── badge-style-variants.json
│ ├── badge.json
│ ├── bar-chart.json
│ ├── breadcrumb.json
│ ├── button-style-default.json
│ ├── button-style-link.json
│ ├── button-style-outline.json
│ ├── button-style-secondary.json
│ ├── button-style-with-icon.json
│ ├── button.json
│ ├── calendar.json
│ ├── card-style-commerce.json
│ ├── card-style-default.json
│ ├── card-style-testimonial.json
│ ├── card.json
│ ├── carousel.json
│ ├── checkbox-style-default.json
│ ├── checkbox-style-toggle.json
│ ├── checkbox.json
│ ├── command.json
│ ├── context-menu.json
│ ├── dialog-style-default.json
│ ├── dialog-style-width-variant.json
│ ├── dialog-style-with-footer.json
│ ├── dialog-style-with-form.json
│ ├── dialog.json
│ ├── drawer.json
│ ├── input-style-default.json
│ ├── input-style-error.json
│ ├── input-style-with-label.json
│ ├── input.json
│ ├── label.json
│ ├── line-chart.json
│ ├── loader.json
│ ├── menu-style-default.json
│ ├── menu.json
│ ├── pie-chart.json
│ ├── popover-style-default-shadow.json
│ ├── popover-style-default.json
│ ├── popover-style-primary-shadow.json
│ ├── popover-style-primary.json
│ ├── popover.json
│ ├── progress-style-default.json
│ ├── progress.json
│ ├── radio-style-default.json
│ ├── radio-style-sizes.json
│ ├── radio-style-variants.json
│ ├── radio.json
│ ├── registry.json
│ ├── select-style-default.json
│ ├── select.json
│ ├── slider.json
│ ├── sonner-style-default.json
│ ├── sonner-style-error.json
│ ├── sonner-style-rich-colors.json
│ ├── sonner-style-warning.json
│ ├── sonner.json
│ ├── switch-style-default.json
│ ├── switch-style-disabled.json
│ ├── switch.json
│ ├── tab-style-default.json
│ ├── tab.json
│ ├── table-style-default.json
│ ├── table-with-checkbox.json
│ ├── table-with-sticky-header.json
│ ├── table.json
│ ├── text-headings.json
│ ├── text.json
│ ├── textarea-style-default.json
│ ├── textarea.json
│ ├── toc.json
│ ├── toggle-group-outlined.json
│ ├── toggle-group-style-default.json
│ ├── toggle-group-style-outline-muted.json
│ ├── toggle-group-style-outlined.json
│ ├── toggle-group-style-solid.json
│ ├── toggle-group.json
│ ├── toggle-style-default.json
│ ├── toggle-style-outline-muted.json
│ ├── toggle-style-outlined.json
│ ├── toggle-style-solid.json
│ ├── toggle.json
│ ├── tooltip-style-default.json
│ ├── tooltip-style-primary.json
│ ├── tooltip-style-solid.json
│ ├── tooltip.json
│ ├── typography-p.json
│ └── utils.json
├── registry.json
├── showcase.json
├── tasks.md
├── tsconfig.json
└── types/
├── index.d.ts
└── unist.d.ts
SYMBOL INDEX (276 symbols across 176 files)
FILE: app/(docs)/docs/[[...slug]]/page.tsx
type IProps (line 12) | interface IProps {
function getDocParams (line 16) | function getDocParams({ params }: IProps) {
function generateMetadata (line 27) | async function generateMetadata({ params }: IProps): Promise<Metadata> {
function page (line 42) | async function page({ params }: IProps) {
FILE: app/(docs)/docs/layout.tsx
function ComponentLayout (line 8) | function ComponentLayout({
FILE: app/(marketing)/blogs/[slug]/page.tsx
type IProps (line 11) | interface IProps {
type Post (line 15) | type Post = {
function getBlogParams (line 32) | async function getBlogParams({ params }: IProps) {
function generateMetadata (line 44) | async function generateMetadata({ params }: IProps): Promise<Metadata> {
function page (line 69) | async function page({ params }: IProps) {
FILE: app/(marketing)/blogs/layout.tsx
function BlogsLayout (line 7) | function BlogsLayout({
FILE: app/(marketing)/blogs/page.tsx
type Post (line 9) | type Post = {
function page (line 21) | async function page() {
FILE: app/(marketing)/page.tsx
function getContributors (line 29) | async function getContributors(): Promise<
function Home (line 52) | async function Home() {
FILE: app/(marketing)/showcase/page.tsx
function ShowcasePage (line 8) | function ShowcasePage() {
FILE: app/(marketing)/themes/page.tsx
function Themes (line 59) | function Themes() {
FILE: app/(sink)/demo/components/page.tsx
function page (line 6) | function page() {
FILE: app/actions/newsletter.ts
function subscribeToNewsletter (line 7) | async function subscribeToNewsletter(email: string) {
FILE: app/layout.tsx
function RootLayout (line 42) | function RootLayout({
FILE: app/robots.ts
function robots (line 3) | function robots(): MetadataRoute.Robots {
FILE: app/rss.xml/route.ts
function GET (line 6) | async function GET(request: NextRequest) {
FILE: app/sitemap.ts
function sitemap (line 4) | function sitemap(): MetadataRoute.Sitemap {
FILE: components/CodeBlock.tsx
type ICodeBlock (line 7) | interface ICodeBlock extends React.HTMLAttributes<HTMLPreElement> {}
function copyToClipboardWithMeta (line 9) | async function copyToClipboardWithMeta(value: string, event?: Event) {
function CodeBlock (line 16) | function CodeBlock({ className, children, ...props }: ICodeBlock) {
FILE: components/ComponentInstall.tsx
type IComponentShowcase (line 8) | interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {}
function CliCommand (line 32) | function CliCommand({
function ComponentInstallCli (line 88) | function ComponentInstallCli({
function ComponentInstallManual (line 111) | function ComponentInstallManual({ children }: { children: React.ReactNod...
function ComponentInstall (line 115) | function ComponentInstall({ children }: IComponentShowcase) {
FILE: components/ComponentShowcase.tsx
type IComponentShowcase (line 6) | interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
function ComponentShowcase (line 10) | function ComponentShowcase({ name, children }: IComponentShowcase) {
FILE: components/ComponentSource.tsx
type ComponentSourceProps (line 3) | interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivEleme...
function ComponentSource (line 7) | function ComponentSource({ children, className }: ComponentSourceProps) {
FILE: components/CopyTheme.tsx
function CopyTheme (line 7) | function CopyTheme({ theme, hasRadius = false }: { theme: Theme, hasRadi...
FILE: components/HamburgerMenu.tsx
function HamburgerMenu (line 8) | function HamburgerMenu() {
FILE: components/JoinNewsletter.tsx
constant INIT (line 6) | const INIT = "INIT";
constant SUBMITTING (line 7) | const SUBMITTING = "SUBMITTING";
constant ERROR (line 8) | const ERROR = "ERROR";
constant SUCCESS (line 9) | const SUCCESS = "SUCCESS";
function JoinNewsletter (line 32) | function JoinNewsletter() {
function isValidEmail (line 225) | function isValidEmail(email: any) {
FILE: components/MDX.tsx
function MDX (line 111) | function MDX({
FILE: components/RichTextConverter.tsx
type NodeTypes (line 35) | type NodeTypes = DefaultNodeTypes
FILE: components/SideNav.tsx
type SideNavProps (line 8) | interface SideNavProps {
function SideNav (line 12) | function SideNav({ setIsOpen }: SideNavProps) {
FILE: components/TableOfContents.tsx
type TableOfContentsProps (line 4) | interface TableOfContentsProps {
function renderTOCItems (line 8) | function renderTOCItems(items: any[], level = 0) {
function TableOfContents (line 28) | function TableOfContents({ toc }: TableOfContentsProps) {
FILE: components/Testimonial.tsx
type TestimonialCardProps (line 3) | interface TestimonialCardProps {
function TestimonialCard (line 10) | function TestimonialCard({
FILE: components/ThemeWrapper.tsx
function ThemeWrapper (line 6) | function ThemeWrapper({ children }: { children: React.ReactNode }) {
FILE: components/TopNav.tsx
function TopNav (line 11) | function TopNav() {
FILE: components/WorksWithSection.tsx
function WorksWithSection (line 7) | function WorksWithSection() {
FILE: components/footer.tsx
function Footer (line 23) | function Footer() {
FILE: components/retroui/Alert.tsx
type IAlertProps (line 25) | interface IAlertProps
type IAlertTitleProps (line 38) | interface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement...
type IAlertDescriptionProps (line 44) | interface IAlertDescriptionProps
FILE: components/retroui/Badge.tsx
type ButtonProps (line 25) | interface ButtonProps
function Badge (line 29) | function Badge({
FILE: components/retroui/BasicCard.tsx
function BasicCard (line 3) | function BasicCard() {
FILE: components/retroui/Button.tsx
type IButtonProps (line 34) | interface IButtonProps
FILE: components/retroui/Calendar.tsx
function Calendar (line 14) | function Calendar({
function CalendarDayButton (line 172) | function CalendarDayButton({
FILE: components/retroui/Card.tsx
type ICardProps (line 5) | interface ICardProps extends HTMLAttributes<HTMLDivElement> {
FILE: components/retroui/Carousel.tsx
type CarouselApi (line 12) | type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters (line 13) | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions (line 14) | type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin (line 15) | type CarouselPlugin = UseCarouselParameters[1]
type CarouselProps (line 17) | type CarouselProps = {
type CarouselContextProps (line 24) | type CarouselContextProps = {
function useCarousel (line 35) | function useCarousel() {
function Carousel (line 45) | function Carousel({
function CarouselContent (line 135) | function CarouselContent({ className, ...props }: React.ComponentProps<"...
function CarouselItem (line 156) | function CarouselItem({ className, ...props }: React.ComponentProps<"div...
function CarouselPrevious (line 174) | function CarouselPrevious({
function CarouselNext (line 204) | function CarouselNext({
FILE: components/retroui/Checkbox.tsx
type CheckboxProps (line 26) | interface CheckboxProps
FILE: components/retroui/Command.tsx
function Command (line 10) | function Command({
type CommandDialogProps (line 25) | type CommandDialogProps = DialogProps & { className?: string };
function CommandInput (line 48) | function CommandInput({
function CommandList (line 70) | function CommandList({
function CommandEmpty (line 86) | function CommandEmpty({
function CommandGroup (line 98) | function CommandGroup({
function CommandSeparator (line 114) | function CommandSeparator({
function CommandItem (line 127) | function CommandItem({
type CommandCheckProps (line 159) | interface CommandCheckProps {
function CommandCheck (line 164) | function CommandCheck({
FILE: components/retroui/CommandDisplay.tsx
type CommandDisplayProps (line 6) | interface CommandDisplayProps {
function CommandDisplay (line 10) | function CommandDisplay({ command }: CommandDisplayProps) {
FILE: components/retroui/ContextMenu.tsx
function ContextMenu (line 9) | function ContextMenu({
function ContextMenuTrigger (line 15) | function ContextMenuTrigger({
function ContextMenuGroup (line 23) | function ContextMenuGroup({
function ContextMenuPortal (line 31) | function ContextMenuPortal({
function ContextMenuSub (line 39) | function ContextMenuSub({
function ContextMenuRadioGroup (line 45) | function ContextMenuRadioGroup({
function ContextMenuSubTrigger (line 56) | function ContextMenuSubTrigger({
function ContextMenuSubContent (line 80) | function ContextMenuSubContent({
function ContextMenuContent (line 96) | function ContextMenuContent({
function ContextMenuItem (line 114) | function ContextMenuItem({
function ContextMenuCheckboxItem (line 137) | function ContextMenuCheckboxItem({
function ContextMenuRadioItem (line 163) | function ContextMenuRadioItem({
function ContextMenuLabel (line 187) | function ContextMenuLabel({
function ContextMenuSeparator (line 207) | function ContextMenuSeparator({
function ContextMenuShortcut (line 220) | function ContextMenuShortcut({
FILE: components/retroui/Dialog.tsx
type IDialogBackgroupProps (line 33) | interface IDialogBackgroupProps
type IDialogContentProps (line 80) | interface IDialogContentProps
type IDialogDescriptionProps (line 115) | interface IDialogDescriptionProps extends HTMLAttributes<HTMLDivElement> {}
type IDialogFooterProps (line 146) | interface IDialogFooterProps
type IDialogHeaderProps (line 197) | interface IDialogHeaderProps
FILE: components/retroui/Drawer.tsx
function Drawer (line 8) | function Drawer({
function DrawerTrigger (line 14) | function DrawerTrigger({
function DrawerPortal (line 20) | function DrawerPortal({
function DrawerClose (line 26) | function DrawerClose({
function DrawerOverlay (line 32) | function DrawerOverlay({
function DrawerContent (line 48) | function DrawerContent({
function DrawerHeader (line 75) | function DrawerHeader({ className, ...props }: React.ComponentProps<"div...
function DrawerFooter (line 88) | function DrawerFooter({ className, ...props }: React.ComponentProps<"div...
function DrawerTitle (line 98) | function DrawerTitle({
function DrawerDescription (line 111) | function DrawerDescription({
FILE: components/retroui/Empty.tsx
type IEmptyProps (line 6) | interface IEmptyProps extends HTMLAttributes<HTMLDivElement> {
FILE: components/retroui/IconButton.tsx
type ButtonProps (line 3) | interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
function IconButton (line 9) | function IconButton({
FILE: components/retroui/Input.tsx
type InputProps (line 3) | interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
FILE: components/retroui/Loader.tsx
type LoaderProps (line 25) | interface LoaderProps
FILE: components/retroui/Login.tsx
function Login (line 7) | function Login() {
FILE: components/retroui/Menu.tsx
type IMenuContent (line 10) | interface IMenuContent
FILE: components/retroui/ProductCard.tsx
function ProductCard (line 4) | function ProductCard() {
FILE: components/retroui/Radio.tsx
type RadioGroupProps (line 43) | interface RadioGroupProps
type RadioProps (line 50) | interface RadioProps
FILE: components/retroui/Sonner.tsx
type ToasterProps (line 5) | type ToasterProps = React.ComponentProps<typeof Sonner>;
FILE: components/retroui/Tab.tsx
type ITabsTriggerList (line 16) | interface ITabsTriggerList extends TabListProps {
type ITabsTrigger (line 31) | interface ITabsTrigger extends TabProps {
type ITabsContent (line 48) | interface ITabsContent extends TabPanelProps {
FILE: components/retroui/TableOfContents.tsx
type TOCItem (line 7) | interface TOCItem {
type ManualTOCItem (line 14) | interface ManualTOCItem {
type TableOfContentsProps (line 20) | interface TableOfContentsProps {
function generateTOCFromDOM (line 27) | function generateTOCFromDOM(depth: number = 6): TOCItem[] {
function convertManualDataToTOC (line 67) | function convertManualDataToTOC(data: ManualTOCItem[]): TOCItem[] {
function renderTOCItems (line 96) | function renderTOCItems(items: TOCItem[], level = 0, activeId: string | ...
function TableOfContents (line 123) | function TableOfContents({
FILE: components/retroui/Text.tsx
type TextProps (line 24) | interface TextProps
FILE: components/retroui/Textarea.tsx
function Textarea (line 4) | function Textarea({
FILE: components/retroui/charts/AreaChart.tsx
type AreaChartProps (line 15) | interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
FILE: components/retroui/charts/BarChart.tsx
type BarChartProps (line 15) | interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
FILE: components/retroui/charts/LineChart.tsx
type LineChartProps (line 15) | interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
FILE: components/retroui/charts/PieChart.tsx
type PieChartProps (line 13) | interface PieChartProps extends React.HTMLAttributes<HTMLDivElement> {
FILE: config/theme.ts
type Theme (line 1) | enum Theme {
FILE: contexts/ThemeContext.tsx
type DarkMode (line 6) | type DarkMode = "light" | "dark";
type ThemeContextType (line 8) | interface ThemeContextType {
function ThemeProvider (line 21) | function ThemeProvider({ children }: { children: React.ReactNode }) {
function useTheme (line 94) | function useTheme() {
FILE: lib/toc.ts
function flattenNode (line 8) | function flattenNode(node: any): string {
type Item (line 19) | interface Item {
type Items (line 25) | interface Items {
function getItems (line 29) | function getItems(node: any, current: any): Items {
type TableOfContents (line 73) | type TableOfContents = Items
FILE: lib/utils.ts
function cn (line 4) | function cn(...classes: ClassNameValue[]) {
FILE: preview/blocks/sign-in.tsx
function SignInBlock (line 10) | function SignInBlock() {
FILE: preview/blocks/team-members.tsx
function TeamMembersBlock (line 6) | function TeamMembersBlock() {
FILE: preview/charts/area-chart-style-default.tsx
function ChartStyleDefault (line 7) | function ChartStyleDefault() {
FILE: preview/charts/area-chart-style-minimal.tsx
function AreaChartStyleMinimal (line 12) | function AreaChartStyleMinimal() {
FILE: preview/charts/area-chart-style-multiple.tsx
function ChartStyleMultiple (line 5) | function ChartStyleMultiple() {
FILE: preview/charts/area-chart-style-stacked.tsx
function AreaChartStyleStacked (line 12) | function AreaChartStyleStacked() {
FILE: preview/charts/bar-chart-style-default.tsx
function BarChartStyleDefault (line 5) | function BarChartStyleDefault() {
FILE: preview/charts/bar-chart-style-grouped.tsx
function BarChartStyleMultiple (line 5) | function BarChartStyleMultiple() {
FILE: preview/charts/bar-chart-style-horizontal.tsx
function BarChartStyleHorizontal (line 11) | function BarChartStyleHorizontal() {
FILE: preview/charts/bar-chart-style-multiple.tsx
function BarChartStyleMultiple (line 5) | function BarChartStyleMultiple() {
FILE: preview/charts/bar-chart-style-stacked.tsx
function BarChartStyleStacked (line 5) | function BarChartStyleStacked() {
FILE: preview/charts/line-chart-style-curved.tsx
function LineChartStyleCurved (line 13) | function LineChartStyleCurved() {
FILE: preview/charts/line-chart-style-default.tsx
function LineChartStyleDefault (line 5) | function LineChartStyleDefault() {
FILE: preview/charts/line-chart-style-dots.tsx
function LineChartStyleDots (line 12) | function LineChartStyleDots() {
FILE: preview/charts/line-chart-style-multiple.tsx
function LineChartStyleMultiple (line 5) | function LineChartStyleMultiple() {
FILE: preview/charts/pie-chart-style-default.tsx
function PieChartStyleDefault (line 10) | function PieChartStyleDefault() {
FILE: preview/charts/pie-chart-style-donut.tsx
function PieChartStyleDonut (line 10) | function PieChartStyleDonut() {
FILE: preview/charts/pie-chart-style-small.tsx
function PieChartStyleSmall (line 10) | function PieChartStyleSmall() {
FILE: preview/components/accordion-style-default.tsx
function AccordionStyleDefault (line 5) | function AccordionStyleDefault() {
FILE: preview/components/alert-style-all-status.tsx
function AlertAllStatus (line 4) | function AlertAllStatus() {
FILE: preview/components/alert-style-default.tsx
function AlertStyleDefault (line 3) | function AlertStyleDefault() {
FILE: preview/components/alert-style-solid.tsx
function AlertStyleDefault (line 3) | function AlertStyleDefault() {
FILE: preview/components/alert-style-with-icon.tsx
function AlertStyleDefaultIcon (line 4) | function AlertStyleDefaultIcon() {
FILE: preview/components/avatar-style-circle-fallbacks.tsx
function AvatarStyleFallback (line 3) | function AvatarStyleFallback() {
FILE: preview/components/avatar-style-circle-sizes.tsx
function AvatarStyleCircleSizes (line 3) | function AvatarStyleCircleSizes() {
FILE: preview/components/avatar-style-circle.tsx
function AvatarStyleCircle (line 3) | function AvatarStyleCircle() {
FILE: preview/components/badge-style-default.tsx
function BadgeStyleDefault (line 3) | function BadgeStyleDefault() {
FILE: preview/components/badge-style-rounded.tsx
function BadgeStyleRounded (line 3) | function BadgeStyleRounded() {
FILE: preview/components/badge-style-sizes.tsx
function BadgeStyleVariants (line 3) | function BadgeStyleVariants() {
FILE: preview/components/badge-style-variants.tsx
function BadgeStyleVariants (line 3) | function BadgeStyleVariants() {
FILE: preview/components/breadcrumb-custom-separator.tsx
function BreadcrumbCustomSeparator (line 4) | function BreadcrumbCustomSeparator() {
FILE: preview/components/breadcrumb-link-component.tsx
function BreadcrumbLinkComponent (line 5) | function BreadcrumbLinkComponent() {
FILE: preview/components/breadcrumb-style-collapsed.tsx
function BreadcrumbCollapsed (line 5) | function BreadcrumbCollapsed() {
FILE: preview/components/breadcrumb-style-default.tsx
function BreadcrumbStyleDefault (line 3) | function BreadcrumbStyleDefault() {
FILE: preview/components/button-style-default.tsx
function ButtonStyleDefault (line 3) | function ButtonStyleDefault() {
FILE: preview/components/button-style-icon.tsx
function ButtonStyleIcon (line 4) | function ButtonStyleIcon() {
FILE: preview/components/button-style-link.tsx
function ButtonStyleLink (line 3) | function ButtonStyleLink() {
FILE: preview/components/button-style-outline.tsx
function ButtonStyleOutline (line 3) | function ButtonStyleOutline() {
FILE: preview/components/button-style-secondary.tsx
function ButtonStyleSecondary (line 3) | function ButtonStyleSecondary() {
FILE: preview/components/button-style-with-icon.tsx
function ButtonStyleWithIcon (line 4) | function ButtonStyleWithIcon() {
FILE: preview/components/calendar-style-default.tsx
function CalendarStyleDefault (line 7) | function CalendarStyleDefault() {
FILE: preview/components/card-style-commerce.tsx
function CommerceCard (line 4) | function CommerceCard() {
FILE: preview/components/card-style-default.tsx
function BasicCard (line 3) | function BasicCard() {
FILE: preview/components/card-style-testimonial.tsx
function TestimonialCard (line 5) | function TestimonialCard() {
FILE: preview/components/carousel-style-default.tsx
function CarouselStyleDefault (line 8) | function CarouselStyleDefault() {
FILE: preview/components/carousel-style-sizes.tsx
function CarouselStyleSizes (line 8) | function CarouselStyleSizes() {
FILE: preview/components/carousel-style-vertical.tsx
function CarouselStyleVertical (line 15) | function CarouselStyleVertical() {
FILE: preview/components/checkbox-style-default.tsx
function CheckboxStyleDefault (line 4) | function CheckboxStyleDefault() {
FILE: preview/components/checkbox-style-sizes.tsx
function CheckboxStyleSizes (line 3) | function CheckboxStyleSizes() {
FILE: preview/components/checkbox-style-variants.tsx
function CheckboxStyleVariants (line 3) | function CheckboxStyleVariants() {
FILE: preview/components/command-style-default.tsx
function CommandStyleDefault (line 14) | function CommandStyleDefault() {
FILE: preview/components/command-style-dialog.tsx
function Component (line 15) | function Component() {
FILE: preview/components/context-menu-style-default.tsx
function ContextMenuStyleDefault (line 5) | function ContextMenuStyleDefault() {
FILE: preview/components/dialog-style-default.tsx
function DialogStyleDefault (line 5) | function DialogStyleDefault() {
FILE: preview/components/dialog-style-width-variant.tsx
type Variants (line 6) | type Variants =
function DialogStyleWidthVariant (line 17) | function DialogStyleWidthVariant() {
FILE: preview/components/dialog-style-with-footer.tsx
function DialogStyleWithFooter (line 5) | function DialogStyleWithFooter() {
FILE: preview/components/dialog-style-with-form.tsx
function DialogStyleWithForm (line 6) | function DialogStyleWithForm() {
FILE: preview/components/drawer-style-default.tsx
function DrawerStyleDefault (line 5) | function DrawerStyleDefault() {
FILE: preview/components/drawer-style-right-direction.tsx
function DrawerStyleRightDirection (line 8) | function DrawerStyleRightDirection() {
FILE: preview/components/empty-style-custom-everything.tsx
function CustomEverythingEmpty (line 5) | function CustomEverythingEmpty() {
FILE: preview/components/empty-style-custom-icon.tsx
function CustomIconEmpty (line 3) | function CustomIconEmpty() {
FILE: preview/components/empty-style-default.tsx
function DefaultEmpty (line 3) | function DefaultEmpty() {
FILE: preview/components/empty-style-table.tsx
function TableEmpty (line 7) | function TableEmpty() {
FILE: preview/components/input-style-default.tsx
function InputStyleDefault (line 3) | function InputStyleDefault() {
FILE: preview/components/input-style-error.tsx
function InputStyleError (line 4) | function InputStyleError() {
FILE: preview/components/input-style-with-label.tsx
function InputStyleWithLabel (line 4) | function InputStyleWithLabel() {
FILE: preview/components/label-style-default.tsx
function LabelStyleDefault (line 3) | function LabelStyleDefault() {
FILE: preview/components/label.tsx
function LabelDefault (line 6) | function LabelDefault() {
FILE: preview/components/loader-style-custom.tsx
function LoaderPreview (line 3) | function LoaderPreview() {
FILE: preview/components/loader-style-default.tsx
function LoaderPreview (line 3) | function LoaderPreview() {
FILE: preview/components/loader-style-outline.tsx
function LoaderPreview (line 3) | function LoaderPreview() {
FILE: preview/components/loader-style-sizes.tsx
function LoaderPreview (line 3) | function LoaderPreview() {
FILE: preview/components/loader-style-solid.tsx
function LoaderPreview (line 3) | function LoaderPreview() {
FILE: preview/components/menu-style-default.tsx
function MenuDefault (line 4) | function MenuDefault() {
FILE: preview/components/popover-style-default-shadow.tsx
function PopoverStyleDefaultShadow (line 5) | function PopoverStyleDefaultShadow() {
FILE: preview/components/popover-style-default.tsx
function PopoverStyleDefault (line 5) | function PopoverStyleDefault() {
FILE: preview/components/progress-style-default.tsx
function ProgressDemo (line 7) | function ProgressDemo() {
FILE: preview/components/radio-style-default.tsx
function RadioStyleSizes (line 3) | function RadioStyleSizes() {
FILE: preview/components/radio-style-sizes.tsx
function RadioStyleSizes (line 3) | function RadioStyleSizes() {
FILE: preview/components/radio-style-variants.tsx
function RadioStyleVariants (line 3) | function RadioStyleVariants() {
FILE: preview/components/retro-player.tsx
function RetroPlayerStyle (line 15) | function RetroPlayerStyle() {
FILE: preview/components/select-style-default.tsx
function SelectStyleDefault (line 4) | function SelectStyleDefault() {
FILE: preview/components/slider-style-default.tsx
function SliderDefault (line 3) | function SliderDefault() {
FILE: preview/components/sonner-style-colored-status.tsx
function SonnerStyleRichColors (line 4) | function SonnerStyleRichColors() {
FILE: preview/components/sonner-style-default.tsx
function SonnerStyleDefault (line 4) | function SonnerStyleDefault() {
FILE: preview/components/sonner-style-error.tsx
function SonnerStyleError (line 4) | function SonnerStyleError() {
FILE: preview/components/sonner-style-status.tsx
function SonnerStyleStatus (line 4) | function SonnerStyleStatus() {
FILE: preview/components/switch-style-default.tsx
function SwitchStyleDefault (line 4) | function SwitchStyleDefault() {
FILE: preview/components/switch-style-disabled.tsx
function SwitchStyleDisabled (line 4) | function SwitchStyleDisabled() {
FILE: preview/components/tab-style-default.tsx
function TabStyleDefault (line 3) | function TabStyleDefault() {
FILE: preview/components/table-style-default.tsx
function TableStyleDefault (line 58) | function TableStyleDefault() {
FILE: preview/components/table-with-checkbox.tsx
function TableWithCheckbox (line 52) | function TableWithCheckbox() {
FILE: preview/components/table-with-sticky-header.tsx
function TableWithStickyHeader (line 92) | function TableWithStickyHeader() {
FILE: preview/components/text-headings.tsx
function TextHeadings (line 3) | function TextHeadings() {
FILE: preview/components/textarea-style-default.tsx
function TextareaStyleDefault (line 3) | function TextareaStyleDefault() {
FILE: preview/components/toc-style-default.tsx
function TocStyleDefault (line 4) | function TocStyleDefault() {
FILE: preview/components/toc-style-depth.tsx
function TocStyleDepth (line 5) | function TocStyleDepth() {
FILE: preview/components/toc-style-manual.tsx
function TocStyleManual (line 4) | function TocStyleManual() {
FILE: preview/components/toggle-group-style-default.tsx
function ToggleGroupStyleDefault (line 6) | function ToggleGroupStyleDefault() {
FILE: preview/components/toggle-group-style-outline-muted.tsx
function ToggleGroupStyleOutlineMuted (line 6) | function ToggleGroupStyleOutlineMuted() {
FILE: preview/components/toggle-group-style-outlined.tsx
function ToggleGroupStyleOutlined (line 6) | function ToggleGroupStyleOutlined() {
FILE: preview/components/toggle-group-style-solid.tsx
function ToggleGroupStyleSolid (line 6) | function ToggleGroupStyleSolid() {
FILE: preview/components/toggle-style-default.tsx
function ToggleStyleDefault (line 4) | function ToggleStyleDefault() {
FILE: preview/components/toggle-style-outline-muted.tsx
function ToggleStyleOutlineMuted (line 4) | function ToggleStyleOutlineMuted() {
FILE: preview/components/toggle-style-outlined.tsx
function ToggleStyleOutlined (line 4) | function ToggleStyleOutlined() {
FILE: preview/components/toggle-style-solid.tsx
function ToggleStyleSolid (line 4) | function ToggleStyleSolid() {
FILE: preview/components/tooltip-style-default.tsx
function TooltipStyleDefault (line 5) | function TooltipStyleDefault() {
FILE: preview/components/tooltip-style-primary.tsx
function TooltipStylePrimary (line 5) | function TooltipStylePrimary() {
FILE: preview/components/tooltip-style-solid.tsx
function TooltipStyleSolid (line 5) | function TooltipStyleSolid() {
FILE: preview/components/typography-p.tsx
function TextParagraph (line 3) | function TextParagraph() {
FILE: types/index.d.ts
type INavItem (line 1) | interface INavItem {
type INavItemWithChildren (line 7) | interface INavItemWithChildren {
type INavigationConfig (line 12) | interface INavigationConfig {
FILE: types/unist.d.ts
type UnistNode (line 3) | interface UnistNode extends Node {
type UnistTree (line 24) | interface UnistTree extends Node {
type NpmCommands (line 29) | interface NpmCommands {
Condensed preview — 367 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (826K chars).
[
{
"path": ".eslintrc.json",
"chars": 40,
"preview": "{\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": ".github/FUNDING.yml",
"chars": 23,
"preview": "github: Logging-Studio\n"
},
{
"path": ".github/workflows/deploy.yml",
"chars": 1135,
"preview": "name: \"Deploy to VPS\"\n\non:\n release:\n types:\n - published\n\njobs:\n build-and-deploy:\n runs-on: ubuntu-latest"
},
{
"path": ".gitignore",
"chars": 444,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": ".prettierrc",
"chars": 56,
"preview": "{\n \"tabWidth\": 2,\n \"semi\": true,\n \"printWidth\": 80\n}\n"
},
{
"path": ".vscode/settings.json",
"chars": 372,
"preview": "{\n \"cSpell.words\": [\"clsx\", \"rehype\", \"retroui\"],\n \"tailwindCSS.experimental.classRegex\": [\n [\"cva\\\\(([^)]*)\\\\)\", \""
},
{
"path": "CONTRIBUTING.md",
"chars": 1959,
"preview": "# Contributing to RetroUI\n\nThank you for your interest in contributing to RetroUI 🙏. I hope this guide to help you get s"
},
{
"path": "Dockerfile",
"chars": 248,
"preview": "FROM node:22.7.0-slim\n\nWORKDIR /retroui\n\nCOPY ./package.json ./pnpm-lock.yaml ./\nRUN npm i pnpm -g \\\n && pnpm install"
},
{
"path": "LICENCE.md",
"chars": 1069,
"preview": "MIT License\n\nCopyright (c) 2024 Arif Hossain\n\nPermission is hereby granted, free of charge, to any person obtaining a co"
},
{
"path": "README.md",
"chars": 474,
"preview": "# Retro UI\n\nRetroUI is a retro-styled Tailwind CSS component library for modern web apps.\n\n![RetroUI banner](./public/ba"
},
{
"path": "app/(docs)/docs/[[...slug]]/page.tsx",
"chars": 2765,
"preview": "import React from \"react\";\nimport { allDocs } from \"contentlayer/generated\";\nimport { notFound } from \"next/navigation\";"
},
{
"path": "app/(docs)/docs/layout.tsx",
"chars": 630,
"preview": "import SideNav from \"@/components/SideNav\";\nimport { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n titl"
},
{
"path": "app/(marketing)/blogs/[slug]/page.tsx",
"chars": 4213,
"preview": "import React from \"react\";\nimport { notFound } from \"next/navigation\";\nimport { format } from \"date-fns\";\nimport { Avata"
},
{
"path": "app/(marketing)/blogs/layout.tsx",
"chars": 367,
"preview": "import { Metadata } from \"next\";\nimport Footer from \"@/components/footer\";\nexport const metadata: Metadata = {\n title: "
},
{
"path": "app/(marketing)/blogs/page.tsx",
"chars": 2309,
"preview": "import { allBlogs } from \"@/.contentlayer/generated\";\nimport { Avatar, Card, Text } from \"@/components/retroui\";\nimport "
},
{
"path": "app/(marketing)/page.tsx",
"chars": 11481,
"preview": "\"use server\";\n\nimport {\n Button,\n Text,\n Input,\n Textarea,\n Card,\n Avatar,\n Badge,\n CommandDisplay,\n} from \"@/co"
},
{
"path": "app/(marketing)/showcase/page.tsx",
"chars": 2582,
"preview": "import showcaseData from \"@/showcase.json\";\nimport { Card, Text, Button } from \"@/components/retroui\";\nimport Image from"
},
{
"path": "app/(marketing)/themes/page.tsx",
"chars": 5382,
"preview": "\"use client\";\n\nimport {\n Card,\n Select,\n Text,\n} from \"@/components/retroui\";\nimport ChartStyleMultiple from \"@"
},
{
"path": "app/(sink)/demo/components/page.tsx",
"chars": 868,
"preview": "\"use client\";\n\nimport React from \"react\";\nimport { TableOfContents } from \"@/components/retroui/TableOfContents\";\n\nexpor"
},
{
"path": "app/actions/newsletter.ts",
"chars": 566,
"preview": "\"use server\";\n\nimport { Resend } from \"resend\";\n\nconst resend = new Resend(process.env.RESEND_API_KEY);\n\nexport async fu"
},
{
"path": "app/global.css",
"chars": 10843,
"preview": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@theme inline {\n --font-head: var(--font-head);\n --font-sans: var(--"
},
{
"path": "app/layout.tsx",
"chars": 2624,
"preview": "import TopNav from \"@/components/TopNav\";\nimport \"./global.css\";\nimport { Archivo_Black, Space_Grotesk, Space_Mono } fro"
},
{
"path": "app/robots.ts",
"chars": 227,
"preview": "import type { MetadataRoute } from \"next\";\n\nexport default function robots(): MetadataRoute.Robots {\n return {\n rule"
},
{
"path": "app/rss.xml/route.ts",
"chars": 1086,
"preview": "import { generateRegistryRssFeed } from \"@wandry/analytics-sdk\";\nimport type { NextRequest } from \"next/server\";\n\nexport"
},
{
"path": "app/sitemap.ts",
"chars": 426,
"preview": "import { allDocs } from \"@/.contentlayer/generated\";\nimport type { MetadataRoute } from \"next\";\n\nexport default function"
},
{
"path": "components/CodeBlock.tsx",
"chars": 1392,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/re"
},
{
"path": "components/ComponentInstall.tsx",
"chars": 4602,
"preview": "import { Tab, TabGroup, TabList, TabPanel, TabPanels } from \"@headlessui/react\";\nimport React from \"react\";\nimport { HTM"
},
{
"path": "components/ComponentShowcase.tsx",
"chars": 2831,
"preview": "import { componentConfig } from \"@/config\";\nimport { TabGroup, TabList, TabPanels, TabPanel, Tab } from \"@headlessui/rea"
},
{
"path": "components/ComponentSource.tsx",
"chars": 324,
"preview": "import { cn } from \"@/lib/utils\";\n\ninterface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {\n src: "
},
{
"path": "components/CopyTheme.tsx",
"chars": 1184,
"preview": "import { Button } from \"@/components/retroui/Button\";\nimport { Dialog } from \"@/components/retroui/Dialog\";\nimport { Tex"
},
{
"path": "components/HamburgerMenu.tsx",
"chars": 935,
"preview": "\"use client\";\n\nimport { useState } from \"react\";\nimport SideNav from \"./SideNav\";\nimport { AlignJustify, X } from \"lucid"
},
{
"path": "components/JoinNewsletter.tsx",
"chars": 6226,
"preview": "\"use client\";\n\nimport { Button, Text, Input } from \"@/components/retroui\";\nimport { useState } from \"react\";\n\nconst INIT"
},
{
"path": "components/MDX.tsx",
"chars": 3233,
"preview": "\"use client\";\n\nimport { Alert, Badge, Card, Text } from \"@/components/retroui\";\nimport { useMDXComponent } from \"next-co"
},
{
"path": "components/RichTextCodeBlock.tsx",
"chars": 1991,
"preview": "'use client'\n\nimport { useState } from 'react'\n\nconst CopyIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n "
},
{
"path": "components/RichTextConverter.tsx",
"chars": 4834,
"preview": "import Link from 'next/link'\nimport type {\n DefaultNodeTypes,\n SerializedUploadNode,\n} from '@payloadcms/richtext-lexi"
},
{
"path": "components/SideNav.tsx",
"chars": 2006,
"preview": "\"use client\";\n\nimport { navConfig } from \"@/config/navigation\";\nimport { Badge, Text } from \"@/components/retroui\";\nimpo"
},
{
"path": "components/TableOfContents.tsx",
"chars": 1086,
"preview": "import React from 'react';\nimport { TableOfContents as TOCType } from '@/lib/toc';\n\ninterface TableOfContentsProps {\n t"
},
{
"path": "components/Testimonial.tsx",
"chars": 872,
"preview": "import { Text, Card, Avatar } from \"@/components/retroui\";\n\ninterface TestimonialCardProps {\n quote: string;\n avatarSr"
},
{
"path": "components/ThemeWrapper.tsx",
"chars": 537,
"preview": "\"use client\";\n\nimport { useTheme } from \"@/contexts/ThemeContext\";\nimport { useEffect } from \"react\";\n\nexport default fu"
},
{
"path": "components/TopNav.tsx",
"chars": 3181,
"preview": "\"use client\";\nimport React from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { ArrowUpR"
},
{
"path": "components/WorksWithSection.tsx",
"chars": 1770,
"preview": "\"use client\";\n\nimport Image from \"next/image\";\nimport { Text } from \"@/components/retroui\";\nimport { useTheme } from \"@/"
},
{
"path": "components/footer.tsx",
"chars": 5023,
"preview": "\"use client\";\n\nimport { Button } from \"@/components/retroui/Button\";\nimport { Input } from \"@/components/retroui/Input\";"
},
{
"path": "components/index.ts",
"chars": 71,
"preview": "export * from \"./ComponentShowcase\";\nexport * from \"./JoinNewsletter\";\n"
},
{
"path": "components/retroui/Accordion.tsx",
"chars": 2295,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport {"
},
{
"path": "components/retroui/Alert.tsx",
"chars": 1733,
"preview": "import { HtmlHTMLAttributes } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport {"
},
{
"path": "components/retroui/Avatar.tsx",
"chars": 1474,
"preview": "import * as React from \"react\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nimport { cn } from \"@/lib/ut"
},
{
"path": "components/retroui/Badge.tsx",
"chars": 1048,
"preview": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { HTMLAttr"
},
{
"path": "components/retroui/BasicCard.tsx",
"chars": 328,
"preview": "import React from \"react\";\n\nexport function BasicCard() {\n return (\n <div className=\"inline-block border-2 p-4 shado"
},
{
"path": "components/retroui/Breadcrumb.tsx",
"chars": 2859,
"preview": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from "
},
{
"path": "components/retroui/Button.tsx",
"chars": 2148,
"preview": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHT"
},
{
"path": "components/retroui/Calendar.tsx",
"chars": 7619,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from \""
},
{
"path": "components/retroui/Card.tsx",
"chars": 1232,
"preview": "import { cn } from \"@/lib/utils\";\nimport { HTMLAttributes } from \"react\";\nimport { Text } from \"@/components/retroui/Tex"
},
{
"path": "components/retroui/Carousel.tsx",
"chars": 6757,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-car"
},
{
"path": "components/retroui/Checkbox.tsx",
"chars": 1202,
"preview": "import { cn } from \"@/lib/utils\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cva, VariantPr"
},
{
"path": "components/retroui/Command.tsx",
"chars": 5168,
"preview": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Dialog } from \"@/components/retroui"
},
{
"path": "components/retroui/CommandDisplay.tsx",
"chars": 1733,
"preview": "\"use client\";\n\nimport { ClipboardIcon, CheckIcon } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface Com"
},
{
"path": "components/retroui/ContextMenu.tsx",
"chars": 8553,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimp"
},
{
"path": "components/retroui/Dialog.tsx",
"chars": 5553,
"preview": "\"use client\";\n\nimport * as ReactDialog from \"@radix-ui/react-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { cva, Va"
},
{
"path": "components/retroui/Drawer.tsx",
"chars": 4442,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib"
},
{
"path": "components/retroui/Empty.tsx",
"chars": 1972,
"preview": "import { Text } from \"@/components/retroui/Text\";\nimport { cn } from \"@/lib/utils\";\nimport { Ghost } from \"lucide-react\""
},
{
"path": "components/retroui/IconButton.tsx",
"chars": 906,
"preview": "import React, { ButtonHTMLAttributes } from \"react\";\n\ninterface ButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme"
},
{
"path": "components/retroui/Input.tsx",
"chars": 641,
"preview": "import React, { InputHTMLAttributes } from \"react\";\n\ninterface InputProps extends InputHTMLAttributes<HTMLInputElement> "
},
{
"path": "components/retroui/Label.tsx",
"chars": 469,
"preview": "import * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva } from \"class-vari"
},
{
"path": "components/retroui/Loader.tsx",
"chars": 1739,
"preview": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@"
},
{
"path": "components/retroui/Login.tsx",
"chars": 1370,
"preview": "import React from \"react\";\nimport { Text } from \"./Text\";\nimport { Input } from \"./Input\";\nimport { Button } from \"./But"
},
{
"path": "components/retroui/Menu.tsx",
"chars": 1284,
"preview": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport R"
},
{
"path": "components/retroui/Popover.tsx",
"chars": 1646,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\n\nimport { cn"
},
{
"path": "components/retroui/ProductCard.tsx",
"chars": 721,
"preview": "import React from \"react\";\nimport { Button } from \"./Button\";\n\nexport function ProductCard() {\n return (\n <div class"
},
{
"path": "components/retroui/Progress.tsx",
"chars": 796,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { "
},
{
"path": "components/retroui/Radio.tsx",
"chars": 1799,
"preview": "import { cn } from \"@/lib/utils\";\nimport * as RadioPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva, VariantPr"
},
{
"path": "components/retroui/Select.tsx",
"chars": 3926,
"preview": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Che"
},
{
"path": "components/retroui/Slider.tsx",
"chars": 1031,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\n\nimport { cn }"
},
{
"path": "components/retroui/Sonner.tsx",
"chars": 1295,
"preview": "\"use client\";\n\nimport { Toaster as Sonner } from \"sonner\";\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\n\nco"
},
{
"path": "components/retroui/Switch.tsx",
"chars": 825,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn "
},
{
"path": "components/retroui/Tab.tsx",
"chars": 1367,
"preview": "import { cn } from \"@/lib/utils\";\nimport {\n Tab,\n TabGroup,\n TabList,\n TabListProps,\n TabPanel,\n TabPanelProps,\n "
},
{
"path": "components/retroui/Table.tsx",
"chars": 3233,
"preview": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n"
},
{
"path": "components/retroui/TableOfContents.tsx",
"chars": 5113,
"preview": "\n\"use client\";\n\nimport { cn } from '@/lib/utils';\nimport React, { useEffect, useState } from 'react';\n\ninterface TOCItem"
},
{
"path": "components/retroui/Text.tsx",
"chars": 1019,
"preview": "import { ElementType, HTMLAttributes } from \"react\";\nimport { VariantProps, cva } from \"class-variance-authority\";\nimpor"
},
{
"path": "components/retroui/Textarea.tsx",
"chars": 474,
"preview": "import React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function Textarea({\n type = \"text\",\n placeholder "
},
{
"path": "components/retroui/Toggle.tsx",
"chars": 2186,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, "
},
{
"path": "components/retroui/ToggleGroup.tsx",
"chars": 1900,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimp"
},
{
"path": "components/retroui/Tooltip.tsx",
"chars": 1874,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn"
},
{
"path": "components/retroui/charts/AreaChart.tsx",
"chars": 5087,
"preview": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n Area,\n AreaChart as RechartsAreaCha"
},
{
"path": "components/retroui/charts/BarChart.tsx",
"chars": 5073,
"preview": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n Bar,\n BarChart as RechartsBarChart,"
},
{
"path": "components/retroui/charts/LineChart.tsx",
"chars": 4216,
"preview": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n CartesianGrid,\n Line,\n LineChart a"
},
{
"path": "components/retroui/charts/PieChart.tsx",
"chars": 2995,
"preview": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n Cell,\n Pie,\n PieChart as RechartsP"
},
{
"path": "components/retroui/index.ts",
"chars": 772,
"preview": "export * from \"./Button\";\nexport * from \"./Input\";\nexport * from \"./Textarea\";\nexport * from \"./Checkbox\";\nexport * from"
},
{
"path": "config/components.ts",
"chars": 27128,
"preview": "import { lazy } from \"react\";\n\nexport const componentConfig: {\n core: {\n [key: string]: {\n name: string;\n "
},
{
"path": "config/index.ts",
"chars": 60,
"preview": "export * from \"./components\";\nexport * from \"./navigation\";\n"
},
{
"path": "config/navigation.ts",
"chars": 4077,
"preview": "import { INavigationConfig } from \"@/types\";\n\nconst componentsRoute = \"/docs/components\";\nconst chartsRoute = \"/docs/cha"
},
{
"path": "config/theme.ts",
"chars": 8604,
"preview": "export enum Theme {\n Default = \"default\",\n Purple = \"purple\",\n Lime = \"lime\",\n Red = \"red\",\n Lavender = \""
},
{
"path": "content/blogs/retroui-with-payload-cms.mdx",
"chars": 11773,
"preview": "---\ntitle: Integrate RetroUI with Payload CMS\ncoverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/retr"
},
{
"path": "content/blogs/top-10-nextjs-ui-library.mdx",
"chars": 18204,
"preview": "---\ntitle: Top 10 Next.js UI Libraries in 2025\ncoverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top"
},
{
"path": "content/blogs/top-5-react-ui-library.mdx",
"chars": 7923,
"preview": "---\ntitle: Top 5 React UI Libraries in 2025\ncoverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top-5-"
},
{
"path": "content/blogs/why-neobrutalism-is-perfect-for-modern-websites.mdx",
"chars": 5261,
"preview": "---\ntitle: Why Neo-Brutalism is Perfect for Modern Websites\ncoverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2."
},
{
"path": "content/docs/charts/area-chart.mdx",
"chars": 5117,
"preview": "---\ntitle: Area Chart\ndescription: A customizable area chart component to visualize your data with gradient fills and sm"
},
{
"path": "content/docs/charts/bar-chart.mdx",
"chars": 5523,
"preview": "---\ntitle: Bar Chart\ndescription: A customizable bar chart component to visualize your data with support for multiple ca"
},
{
"path": "content/docs/charts/line-chart.mdx",
"chars": 4993,
"preview": "---\ntitle: Line Chart\ndescription: A customizable line chart component to visualize trends and data over time with smoot"
},
{
"path": "content/docs/charts/pie-chart.mdx",
"chars": 4368,
"preview": "---\ntitle: Pie Chart\ndescription: A customizable pie chart component to visualize proportional data with support for don"
},
{
"path": "content/docs/components/accordion.mdx",
"chars": 885,
"preview": "---\ntitle: Accordion\ndescription: This collapsible component let's your users read only the content they care about. 😌\nl"
},
{
"path": "content/docs/components/alert.mdx",
"chars": 941,
"preview": "---\ntitle: Alert\ndescription: Notify your users about important events and updates. 📣\nlastUpdated: 24 Oct, 2024\nlinks:\n "
},
{
"path": "content/docs/components/avatar.mdx",
"chars": 965,
"preview": "---\ntitle: Avatar\ndescription: Default rounded avatar that can show your users profile picture. ✨\nlastUpdated: 12 Oct, 2"
},
{
"path": "content/docs/components/badge.mdx",
"chars": 969,
"preview": "---\ntitle: Badge\ndescription: The component that looks like a button but isn't clickable!\nlastUpdated: 30 Oct, 2024\nlink"
},
{
"path": "content/docs/components/breadcrumb.mdx",
"chars": 1110,
"preview": "---\ntitle: Breadcrumb\ndescription: A navigation component that shows users where they are within a hierarchy.\nlastUpdate"
},
{
"path": "content/docs/components/button.mdx",
"chars": 1131,
"preview": "---\ntitle: Button\ndescription: This bold button makes sure your users click on it and perform the actions you want! 🚀\nla"
},
{
"path": "content/docs/components/calendar.mdx",
"chars": 646,
"preview": "---\ntitle: Calendar\ndescription: Let your users select a date to cancel subscription.\nlastUpdated: 14 Nov, 2025\n---\n\n<Co"
},
{
"path": "content/docs/components/card.mdx",
"chars": 898,
"preview": "---\ntitle: Card\ndescription: A customizable card component to visualize your content. 📝\nlastUpdated: 09 Sep, 2025\nlinks:"
},
{
"path": "content/docs/components/carousel.mdx",
"chars": 808,
"preview": "---\ntitle: Carousel\ndescription: Let your users select a date to cancel subscription.\nlastUpdated: 14 Nov, 2025\n---\n\n<Co"
},
{
"path": "content/docs/components/checkbox.mdx",
"chars": 937,
"preview": "---\ntitle: Checkbox\ndescription: Let users confirm or reject an option.\nlastUpdated: 13 Feb, 2024\nlinks:\n api_reference"
},
{
"path": "content/docs/components/command.mdx",
"chars": 742,
"preview": "---\ntitle: Command\ndescription: A command palette component for quick navigation and actions\nlastUpdated: 21 Aug, 2025\nl"
},
{
"path": "content/docs/components/context-menu.mdx",
"chars": 703,
"preview": "---\ntitle: Context Menu\ndescription: Displays a menu to the user — such as a set of actions or functions — triggered by "
},
{
"path": "content/docs/components/dialog.mdx",
"chars": 1356,
"preview": "---\ntitle: Dialog\ndescription: An impactful dialog that ensures your important messages and actions get the attention th"
},
{
"path": "content/docs/components/drawer.mdx",
"chars": 810,
"preview": "---\ntitle: Drawer\ndescription: A component that can slide in from any side of the screen.\nlastUpdated: 21 Aug, 2025\nlink"
},
{
"path": "content/docs/components/empty.mdx",
"chars": 1311,
"preview": "---\ntitle: Empty\ndescription: The component that shows when there is no data to show!\nlastUpdated: 13 Jan, 2026\nlinks:\n "
},
{
"path": "content/docs/components/input.mdx",
"chars": 806,
"preview": "---\ntitle: Input\ndescription: This pretty input makes your users want to type stuff! ⌨️\nlastUpdated: 09 Sep, 2025\nlinks:"
},
{
"path": "content/docs/components/label.mdx",
"chars": 733,
"preview": "---\ntitle: Label\ndescription: A universal component for labeling various inputs.\nlastUpdated: 09 Sep, 2025\nlinks:\n sour"
},
{
"path": "content/docs/components/loader.mdx",
"chars": 2634,
"preview": "---\ntitle: Loader\ndescription: A customizable loading indicator with bouncing squares. 🔄\nlastUpdated: 20 Aug, 2025\nlinks"
},
{
"path": "content/docs/components/menu.mdx",
"chars": 809,
"preview": "---\ntitle: Menu\ndescription: Show your users a list of actions they can take. 📋\nlastUpdated: 09 Sep, 2025\nlinks:\n api_r"
},
{
"path": "content/docs/components/popover.mdx",
"chars": 1112,
"preview": "---\ntitle: Popover\ndescription: A handy small component for your little input needs...😉\nlastUpdated: 09 Sep, 2025\nlinks:"
},
{
"path": "content/docs/components/progress.mdx",
"chars": 830,
"preview": "---\ntitle: Progress\ndescription: Let's you users know how long to wait.\nlastUpdated: 09 Sep, 2025\nlinks:\n api_reference"
},
{
"path": "content/docs/components/radio.mdx",
"chars": 969,
"preview": "---\ntitle: Radio\ndescription: Sometimes you need to pick multiple options! That's where the Radio component comes into p"
},
{
"path": "content/docs/components/select.mdx",
"chars": 827,
"preview": "---\ntitle: Select\ndescription: Let your users pick what they want.\nlastUpdated: 09 Sep, 2025\nlinks:\n api_reference: htt"
},
{
"path": "content/docs/components/slider.mdx",
"chars": 815,
"preview": "---\ntitle: Slider\ndescription: A customizable slider component with two variants.\nlastUpdated: 09 Sep, 2025\nlinks:\n api"
},
{
"path": "content/docs/components/sonner.mdx",
"chars": 1517,
"preview": "---\ntitle: Sonner\ndescription: A beautiful toast component that can grab audience attention from any place.\nlastUpdated:"
},
{
"path": "content/docs/components/switch.mdx",
"chars": 928,
"preview": "---\ntitle: Switch\ndescription: Let users to turn on or off your marketing emails or notifications.\nlastUpdated: 09 Sep, "
},
{
"path": "content/docs/components/tab.mdx",
"chars": 273,
"preview": "---\ntitle: Tabs\ndescription: Switch between different views using tabs.\nlastUpdated: 08 Oct, 2024\nlinks:\n source: https"
},
{
"path": "content/docs/components/table.mdx",
"chars": 1310,
"preview": "---\ntitle: Table\ndescription: Display your data in a structured tabular format.\nlastUpdated: 14 Nov, 2025\nlinks:\n sourc"
},
{
"path": "content/docs/components/text.mdx",
"chars": 1143,
"preview": "---\ntitle: Text\ndescription: Show your texts in different styles. 💅\nlastUpdated: 09 Sep, 2025\nlinks:\n source: https://g"
},
{
"path": "content/docs/components/textarea.mdx",
"chars": 313,
"preview": "---\ntitle: Textarea\ndescription: This pretty input makes your users want to type lots of stuff! ⌨️ ⌨️\nlastUpdated: 08 Oc"
},
{
"path": "content/docs/components/toc.mdx",
"chars": 813,
"preview": "---\ntitle: Table of Contents\ndescription: Generate a table of contents for your markdown content.\nlastUpdated: 08 Oct, 2"
},
{
"path": "content/docs/components/toggle-group.mdx",
"chars": 1459,
"preview": "---\ntitle: Toggle Group\ndescription: Group of toggling buttons...🤙\nlastUpdated: 09 Sep, 2025\nlinks:\n source: https://gi"
},
{
"path": "content/docs/components/toggle.mdx",
"chars": 955,
"preview": "---\ntitle: Toggle\ndescription: This crazy toggling button keeps people toggling...😃\nlastUpdated: 09 Sep, 2025\nlinks:\n s"
},
{
"path": "content/docs/components/tooltip.mdx",
"chars": 974,
"preview": "---\ntitle: Tooltip\ndescription: A cool way to give your users a hint of what a component does...😉\nlastUpdated: 09 Sep, 2"
},
{
"path": "content/docs/index.mdx",
"chars": 1547,
"preview": "---\ntitle: Introduction\ndescription: Why another UI Library?\nlastUpdated: 7 Mar, 2024\n---\n\nIf you don't want to put much"
},
{
"path": "content/docs/install/index.mdx",
"chars": 1128,
"preview": "---\ntitle: Installation\ndescription: This guide will help you get started with RetroUI.\nlastUpdated: 30 May, 2025\n---\n\nR"
},
{
"path": "content/docs/install/nextjs.mdx",
"chars": 4285,
"preview": "---\ntitle: Next.js\ndescription: RetroUI ❤️ Next.js\nlastUpdated: 6 Mar, 2024\n---\n\n### 1. Create Project\n\nRun the init com"
},
{
"path": "content/docs/install/vite.mdx",
"chars": 5931,
"preview": "---\ntitle: Vite\ndescription: RetroUI ❤️ Vite\nlastUpdated: 30 May, 2025\n---\n\n### 1. Create Project\n\nStart by creating a n"
},
{
"path": "content/docs/utils/cn.mdx",
"chars": 731,
"preview": "---\ntitle: cn\ndescription: A utilily function that saves you from style conflicts.\nlastUpdated: 17 Oct, 2024\nlinks:\n so"
},
{
"path": "contentlayer.config.ts",
"chars": 4897,
"preview": "import path from \"path\";\nimport fs from \"fs\";\nimport {\n defineDocumentType,\n defineNestedType,\n makeSource,\n} from \"c"
},
{
"path": "contexts/ThemeContext.tsx",
"chars": 2825,
"preview": "\"use client\";\n\nimport React, { createContext, useContext, useEffect, useState } from \"react\";\nimport { Theme as ColorThe"
},
{
"path": "lib/payload.ts",
"chars": 127,
"preview": "import { PayloadSDK } from '@payloadcms/sdk'\n\n\nexport const sdk = new PayloadSDK({\n baseURL: 'https://cms.retroui.dev/a"
},
{
"path": "lib/registry.ts",
"chars": 108,
"preview": "export const registryDependencyPath = (item: string) => {\n return `https://retroui.dev/r/${item}.json`;\n};\n"
},
{
"path": "lib/toc.ts",
"chars": 1724,
"preview": "import { toc } from \"mdast-util-toc\"\nimport { remark } from \"remark\"\nimport { visit } from \"unist-util-visit\"\nimport typ"
},
{
"path": "lib/utils.ts",
"chars": 170,
"preview": "import clsx from \"clsx\";\nimport { ClassNameValue, twMerge } from \"tailwind-merge\";\n\nexport function cn(...classes: Class"
},
{
"path": "next.config.mjs",
"chars": 446,
"preview": "import { withContentlayer } from \"next-contentlayer\";\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n r"
},
{
"path": "package.json",
"chars": 2559,
"preview": "{\n \"name\": \"retro-ui\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"nex"
},
{
"path": "postcss.config.mjs",
"chars": 146,
"preview": "/** @type {import('postcss-load-config').Config} */\nconst config = {\n plugins: {\n \"@tailwindcss/postcss\": {},\n },\n}"
},
{
"path": "preview/blocks/course-card.tsx",
"chars": 2290,
"preview": "import { Card } from \"@/components/retroui/Card\";\nimport { Badge } from \"@/components/retroui/Badge\";\nimport { Text } fr"
},
{
"path": "preview/blocks/sign-in.tsx",
"chars": 4117,
"preview": "import { Button } from \"@/components/retroui/Button\";\nimport { Text } from \"@/components/retroui/Text\";\n\nimport { Checkb"
},
{
"path": "preview/blocks/team-members.tsx",
"chars": 3312,
"preview": "import { Avatar } from \"@/components/retroui/Avatar\";\nimport { Badge } from \"@/components/retroui/Badge\";\nimport { Text "
},
{
"path": "preview/charts/area-chart-style-default.tsx",
"chars": 537,
"preview": "// import { LineChart, Line, CartesianGrid, XAxis, YAxis, ResponsiveContainer } from 'recharts';\n\nimport { AreaChart } f"
},
{
"path": "preview/charts/area-chart-style-minimal.tsx",
"chars": 605,
"preview": "import { AreaChart } from \"@/components/retroui/charts/AreaChart\";\n\nconst data = [\n { date: '01', value: 120 },\n { dat"
},
{
"path": "preview/charts/area-chart-style-multiple.tsx",
"chars": 656,
"preview": "import { AreaChart } from \"@/components/retroui/charts/AreaChart\";\n\nconst data = [{ name: 'Jan', orders: 12, cancel: 9 }"
},
{
"path": "preview/charts/area-chart-style-stacked.tsx",
"chars": 846,
"preview": "import { AreaChart } from \"@/components/retroui/charts/AreaChart\";\n\nconst data = [\n { name: 'Jan', mobile: 20, desktop:"
},
{
"path": "preview/charts/bar-chart-style-default.tsx",
"chars": 439,
"preview": "import { BarChart } from \"@/components/retroui/charts/BarChart\";\n\nconst data = [{ name: 'Jan', orders: 12 }, { name: 'Fe"
},
{
"path": "preview/charts/bar-chart-style-grouped.tsx",
"chars": 656,
"preview": "import { BarChart } from \"@/components/retroui/charts/BarChart\";\n\nconst data = [{ name: 'Jan', orders: 12, cancel: 9 }, "
},
{
"path": "preview/charts/bar-chart-style-horizontal.tsx",
"chars": 575,
"preview": "import { BarChart } from \"@/components/retroui/charts/BarChart\";\n\nconst data = [\n { category: 'Sales', value: 400 },\n "
},
{
"path": "preview/charts/bar-chart-style-multiple.tsx",
"chars": 656,
"preview": "import { BarChart } from \"@/components/retroui/charts/BarChart\";\n\nconst data = [{ name: 'Jan', orders: 12, cancel: 9 }, "
},
{
"path": "preview/charts/bar-chart-style-stacked.tsx",
"chars": 603,
"preview": "import { BarChart } from \"@/components/retroui/charts/BarChart\";\n\nconst data = [{ name: 'Jan', orders: 12, cancel: 2 }, "
},
{
"path": "preview/charts/line-chart-style-curved.tsx",
"chars": 743,
"preview": "import { LineChart } from \"@/components/retroui/charts/LineChart\";\n\nconst data = [\n { time: '00:00', cpu: 20, memory: 4"
},
{
"path": "preview/charts/line-chart-style-default.tsx",
"chars": 443,
"preview": "import { LineChart } from \"@/components/retroui/charts/LineChart\";\n\nconst data = [{ name: 'Jan', orders: 12 }, { name: '"
},
{
"path": "preview/charts/line-chart-style-dots.tsx",
"chars": 655,
"preview": "import { LineChart } from \"@/components/retroui/charts/LineChart\";\n\nconst data = [\n { week: 'W1', engagement: 85 },\n {"
},
{
"path": "preview/charts/line-chart-style-multiple.tsx",
"chars": 594,
"preview": "import { LineChart } from \"@/components/retroui/charts/LineChart\";\n\nconst data = [{ name: 'Jan', orders: 12, cancel: 9 }"
},
{
"path": "preview/charts/pie-chart-style-default.tsx",
"chars": 397,
"preview": "import { PieChart } from \"@/components/retroui/charts/PieChart\";\n\nconst data = [\n { name: 'Desktop', value: 400 },\n { "
},
{
"path": "preview/charts/pie-chart-style-donut.tsx",
"chars": 522,
"preview": "import { PieChart } from \"@/components/retroui/charts/PieChart\";\n\nconst data = [\n { name: 'Desktop', value: 400 },\n { "
},
{
"path": "preview/charts/pie-chart-style-small.tsx",
"chars": 607,
"preview": "import { PieChart } from \"@/components/retroui/charts/PieChart\";\n\nconst data = [\n { browser: 'Chrome', users: 65 },\n {"
},
{
"path": "preview/components/accordion-style-default.tsx",
"chars": 953,
"preview": "\"use client\";\n\nimport { Accordion } from \"@/components/retroui/Accordion\";\n\nexport default function AccordionStyleDefaul"
},
{
"path": "preview/components/alert-style-all-status.tsx",
"chars": 937,
"preview": "import { Alert } from \"@/components/retroui/Alert\";\nimport { CheckCircle, InfoIcon, XIcon } from \"lucide-react\";\n\nexport"
},
{
"path": "preview/components/alert-style-default.tsx",
"chars": 307,
"preview": "import { Alert } from \"@/components/retroui/Alert\";\n\nexport default function AlertStyleDefault() {\n return (\n <Alert"
},
{
"path": "preview/components/alert-style-solid.tsx",
"chars": 323,
"preview": "import { Alert } from \"@/components/retroui/Alert\";\n\nexport default function AlertStyleDefault() {\n return (\n <Alert"
},
{
"path": "preview/components/alert-style-with-icon.tsx",
"chars": 457,
"preview": "import { Alert } from \"@/components/retroui/Alert\";\nimport { CheckCircle } from \"lucide-react\";\n\nexport default function"
},
{
"path": "preview/components/avatar-style-circle-fallbacks.tsx",
"chars": 249,
"preview": "import { Avatar } from \"@/components/retroui/Avatar\";\n\nexport default function AvatarStyleFallback() {\n return (\n <A"
},
{
"path": "preview/components/avatar-style-circle-sizes.tsx",
"chars": 661,
"preview": "import { Avatar } from \"@/components/retroui/Avatar\";\n\nexport default function AvatarStyleCircleSizes() {\n return (\n "
},
{
"path": "preview/components/avatar-style-circle.tsx",
"chars": 255,
"preview": "import { Avatar } from \"@/components/retroui/Avatar\";\n\nexport default function AvatarStyleCircle() {\n return (\n <Ava"
},
{
"path": "preview/components/badge-style-default.tsx",
"chars": 140,
"preview": "import { Badge } from \"@/components/retroui/Badge\";\n\nexport default function BadgeStyleDefault() {\n return <Badge>Defau"
},
{
"path": "preview/components/badge-style-rounded.tsx",
"chars": 327,
"preview": "import { Badge } from \"@/components/retroui/Badge\";\n\nexport default function BadgeStyleRounded() {\n return (\n <div c"
},
{
"path": "preview/components/badge-style-sizes.tsx",
"chars": 263,
"preview": "import { Badge } from \"@/components/retroui/Badge\";\n\nexport default function BadgeStyleVariants() {\n return (\n <div "
},
{
"path": "preview/components/badge-style-variants.tsx",
"chars": 339,
"preview": "import { Badge } from \"@/components/retroui/Badge\";\n\nexport default function BadgeStyleVariants() {\n return (\n <div "
},
{
"path": "preview/components/breadcrumb-custom-separator.tsx",
"chars": 777,
"preview": "import { Breadcrumb } from \"@/components/retroui/Breadcrumb\";\nimport { Slash } from \"lucide-react\";\n\nexport default func"
},
{
"path": "preview/components/breadcrumb-link-component.tsx",
"chars": 755,
"preview": "import Link from \"next/link\"\n\nimport { Breadcrumb } from \"@/components/retroui/Breadcrumb\"\n\nexport default function Brea"
},
{
"path": "preview/components/breadcrumb-style-collapsed.tsx",
"chars": 839,
"preview": "import Link from \"next/link\"\n\nimport { Breadcrumb } from \"@/components/retroui/Breadcrumb\";\n\nexport default function Bre"
},
{
"path": "preview/components/breadcrumb-style-default.tsx",
"chars": 636,
"preview": "import { Breadcrumb } from \"@/components/retroui/Breadcrumb\";\n\nexport default function BreadcrumbStyleDefault() {\n retu"
},
{
"path": "preview/components/button-style-default.tsx",
"chars": 141,
"preview": "import { Button } from \"@/components/retroui/Button\";\n\nexport default function ButtonStyleDefault() {\n return <Button>C"
},
{
"path": "preview/components/button-style-icon.tsx",
"chars": 234,
"preview": "import { Button } from \"@/components/retroui/Button\";\nimport { PenIcon } from \"lucide-react\";\n\nexport default function B"
},
{
"path": "preview/components/button-style-link.tsx",
"chars": 153,
"preview": "import { Button } from \"@/components/retroui/Button\";\n\nexport default function ButtonStyleLink() {\n return <Button vari"
},
{
"path": "preview/components/button-style-outline.tsx",
"chars": 159,
"preview": "import { Button } from \"@/components/retroui/Button\";\n\nexport default function ButtonStyleOutline() {\n return <Button v"
},
{
"path": "preview/components/button-style-secondary.tsx",
"chars": 163,
"preview": "import { Button } from \"@/components/retroui/Button\";\n\nexport default function ButtonStyleSecondary() {\n return <Button"
},
{
"path": "preview/components/button-style-with-icon.tsx",
"chars": 296,
"preview": "import { Button } from \"@/components/retroui/Button\";\nimport { Trash } from \"lucide-react\";\n\nexport default function But"
},
{
"path": "preview/components/calendar-style-default.tsx",
"chars": 357,
"preview": "\"use client\"\n\nimport { Calendar } from \"@/components/retroui/Calendar\"\n\nconst start = new Date()\n\nexport default functio"
},
{
"path": "preview/components/card-style-commerce.tsx",
"chars": 714,
"preview": "import { Button } from \"@/components/retroui/Button\";\nimport { Card } from \"@/components/retroui/Card\";\n\nexport default "
},
{
"path": "preview/components/card-style-default.tsx",
"chars": 370,
"preview": "import { Card } from \"@/components/retroui/Card\";\n\nexport default function BasicCard() {\n return (\n <Card>\n <Ca"
},
{
"path": "preview/components/card-style-testimonial.tsx",
"chars": 1064,
"preview": "import { Text } from \"@/components/retroui/Text\";\nimport { Card } from \"@/components/retroui/Card\";\nimport { Avatar } fr"
},
{
"path": "preview/components/carousel-style-default.tsx",
"chars": 997,
"preview": "import * as React from \"react\"\n\nimport { Card } from \"@/components/retroui/Card\"\nimport {\n Carousel,\n} from \"@/compon"
},
{
"path": "preview/components/carousel-style-sizes.tsx",
"chars": 1033,
"preview": "import * as React from \"react\"\n\nimport { Card } from \"@/components/retroui/Card\"\nimport {\n Carousel,\n} from \"@/compon"
},
{
"path": "preview/components/carousel-style-vertical.tsx",
"chars": 1416,
"preview": "import * as React from \"react\"\n\nimport { Card } from \"@/components/retroui/Card\"\nimport {\n Carousel,\n} from \"@/compon"
},
{
"path": "preview/components/checkbox-style-default.tsx",
"chars": 299,
"preview": "import { Checkbox } from \"@/components/retroui/Checkbox\";\nimport { Text } from \"@/components/retroui/Text\";\n\nexport defa"
},
{
"path": "preview/components/checkbox-style-sizes.tsx",
"chars": 245,
"preview": "import { Checkbox } from \"@/components/retroui/Checkbox\";\n\nexport default function CheckboxStyleSizes() {\n return (\n "
},
{
"path": "preview/components/checkbox-style-variants.tsx",
"chars": 262,
"preview": "import { Checkbox } from \"@/components/retroui/Checkbox\";\n\nexport default function CheckboxStyleVariants() {\n return (\n"
},
{
"path": "preview/components/command-style-default.tsx",
"chars": 1609,
"preview": "\"use client\";\n\nimport { Command } from \"@/components/retroui/Command\";\n\nimport {\n Settings,\n User,\n Calendar,\n Calcu"
},
{
"path": "preview/components/command-style-dialog.tsx",
"chars": 2291,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Command } from \"@/components/retroui/Command\";\n\nimport {\n Calcu"
}
]
// ... and 167 more files (download for full content)
About this extraction
This page contains the full source code of the logging-studio/retroui GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 367 files (735.5 KB), approximately 200.7k tokens, and a symbol index with 276 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.