a
This commit is contained in:
Ubuntu
@@ -0,0 +1,389 @@
|
||||
---
|
||||
title: Integrate RetroUI with Payload CMS
|
||||
coverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/retroui-with-payload-cms/retroui-with-payload-cms-cover.png
|
||||
description: Using UI libraries can significantly speed up your development. In this article, we will explore the top 5 for your next React project.
|
||||
tags:
|
||||
- react
|
||||
- ui library
|
||||
- top 5
|
||||
author:
|
||||
name: Arif Hossain
|
||||
avatar: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/arif.jpg
|
||||
x: ariflogs
|
||||
status: draft
|
||||
publishedAt: 14 Nov, 2025
|
||||
---
|
||||
|
||||
|
||||
|
||||
A practical, end‑to‑end guide to wire up **Payload CMS** as your content backend and **RetroUI** as your front‑end component kit—then ship a clean, neo‑brutalist **Blog List** in Next.js.
|
||||
|
||||
> Works great if your stack is **Next.js + TailwindCSS**. Payload is Next‑native and RetroUI is Tailwind‑first, so they snap together nicely.
|
||||
|
||||
---
|
||||
|
||||
## What you’ll build
|
||||
|
||||
* A Payload CMS app with a **Posts** collection
|
||||
* A Next.js front‑end that fetches posts from Payload’s REST API
|
||||
* A `/blog` page that renders a responsive list using RetroUI components (Cards, Badges, Buttons)
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
* **Node.js 20.9+** (Payload requires Node 20.9 or newer)
|
||||
* **Next.js 15+** for the front‑end (Payload is Next‑native)
|
||||
* Any compatible DB: SQLite (dev), Postgres, or MongoDB
|
||||
|
||||
> Tip: For local development, SQLite is the quickest path. Switch to Postgres/Mongo when deploying.
|
||||
|
||||
---
|
||||
|
||||
## Part 1 — Set up Payload CMS
|
||||
|
||||
You can add Payload to an existing Next.js app or scaffold a new one. We’ll scaffold a dedicated Payload project so its API stays clean and portable.
|
||||
|
||||
### 1) Create a new Payload app
|
||||
|
||||
```bash
|
||||
npx create-payload-app
|
||||
# Follow the prompts: choose a template (blank or blog), set DB (SQLite for dev), etc.
|
||||
cd <your-payload-app>
|
||||
pnpm dev # or npm run dev / yarn dev
|
||||
```
|
||||
|
||||
This starts Payload and its Admin UI (usually at `http://localhost:3000/admin`).
|
||||
|
||||
### 2) Define a Posts collection
|
||||
|
||||
Create `src/collections/Posts.ts`:
|
||||
|
||||
```ts
|
||||
import { CollectionConfig } from 'payload/types';
|
||||
|
||||
const Posts: CollectionConfig = {
|
||||
slug: 'posts',
|
||||
admin: {
|
||||
useAsTitle: 'title',
|
||||
defaultColumns: ['title', 'publishedAt', 'status'],
|
||||
},
|
||||
access: {
|
||||
read: () => true, // public read access for blog
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'slug',
|
||||
type: 'text',
|
||||
required: true,
|
||||
unique: true,
|
||||
},
|
||||
{
|
||||
name: 'excerpt',
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
name: 'coverImage',
|
||||
type: 'upload',
|
||||
relationTo: 'media',
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: 'Draft', value: 'draft' },
|
||||
{ label: 'Published', value: 'published' },
|
||||
],
|
||||
defaultValue: 'draft',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'publishedAt',
|
||||
type: 'date',
|
||||
admin: { position: 'sidebar' },
|
||||
},
|
||||
{
|
||||
name: 'content',
|
||||
type: 'richText',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default Posts;
|
||||
```
|
||||
|
||||
Add it to your main config `src/payload.config.ts`:
|
||||
|
||||
```ts
|
||||
import { buildConfig } from 'payload/config';
|
||||
import Posts from './collections/Posts';
|
||||
|
||||
export default buildConfig({
|
||||
serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
|
||||
admin: { user: 'users' },
|
||||
collections: [
|
||||
Posts,
|
||||
// Media and Users collections if you need them
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
> If you don’t have a **Media** or **Users** collection yet, run `create-payload-app` with a blog template or add simple collections for uploads and auth later.
|
||||
|
||||
### 3) Seed a few posts
|
||||
|
||||
Open the Admin UI → **Posts** → **Create New** and add a couple of published posts with past `publishedAt` dates.
|
||||
|
||||
### 4) Confirm the REST API works
|
||||
|
||||
Payload exposes a REST API by default at `/api/<collection>`.
|
||||
|
||||
Visit:
|
||||
|
||||
```
|
||||
http://localhost:3000/api/posts?limit=10&sort=-publishedAt&where[status][equals]=published
|
||||
```
|
||||
|
||||
You should see JSON with your posts.
|
||||
|
||||
> When you deploy, set `PAYLOAD_PUBLIC_SERVER_URL` and your DB env vars. If you’re hosting Payload separately from Next.js, enable **CORS** for your front‑end origin.
|
||||
|
||||
---
|
||||
|
||||
## Part 2 — Set up Next.js + RetroUI front‑end
|
||||
|
||||
We’ll build a Next.js app that consumes the Payload REST API and renders a Blog List using **RetroUI** components.
|
||||
|
||||
### 1) Create the Next.js app
|
||||
|
||||
```bash
|
||||
npx create-next-app@latest retroui-payload-blog
|
||||
cd retroui-payload-blog
|
||||
```
|
||||
|
||||
### 2) Install TailwindCSS (if you didn’t choose the Tailwind template)
|
||||
|
||||
```bash
|
||||
pnpm i -D tailwindcss postcss autoprefixer
|
||||
npx tailwindcss init -p
|
||||
```
|
||||
|
||||
Add `./components/**/*.{ts,tsx}` and `./app/**/*.{ts,tsx}` to `tailwind.config.ts` content. Also include RetroUI’s paths if required by the installer.
|
||||
|
||||
### 3) Install RetroUI
|
||||
|
||||
Use the official installer (CLI) or manual install. Example (pnpm):
|
||||
|
||||
```bash
|
||||
pnpm add retroui
|
||||
```
|
||||
|
||||
Then import components where needed. (If RetroUI ships a CLI to copy components, run it here and follow prompts.)
|
||||
|
||||
### 4) Connect to Payload (env + fetch helper)
|
||||
|
||||
Create `.env.local`:
|
||||
|
||||
```
|
||||
NEXT_PUBLIC_PAYLOAD_BASE_URL=http://localhost:3000
|
||||
```
|
||||
|
||||
Add a tiny fetch utility `lib/payload.ts`:
|
||||
|
||||
```ts
|
||||
export type Post = {
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
excerpt?: string;
|
||||
coverImage?: { url: string; filename: string } | string | null;
|
||||
status: 'draft' | 'published';
|
||||
publishedAt?: string | null;
|
||||
};
|
||||
|
||||
export async function getPublishedPosts(limit = 12) {
|
||||
const base = process.env.NEXT_PUBLIC_PAYLOAD_BASE_URL;
|
||||
const url = new URL('/api/posts', base);
|
||||
url.searchParams.set('limit', String(limit));
|
||||
url.searchParams.set('sort', '-publishedAt');
|
||||
url.searchParams.set('where[status][equals]', 'published');
|
||||
|
||||
const res = await fetch(url.toString(), { next: { revalidate: 60 } });
|
||||
if (!res.ok) throw new Error(`Failed to fetch posts: ${res.status}`);
|
||||
const data = await res.json();
|
||||
return data.docs as Post[];
|
||||
}
|
||||
```
|
||||
|
||||
### 5) Build the Blog List page with RetroUI
|
||||
|
||||
Create `app/blog/page.tsx` (App Router):
|
||||
|
||||
```tsx
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { getPublishedPosts, type Post } from '@/lib/payload';
|
||||
|
||||
// Example RetroUI components — adjust paths/names per your install
|
||||
import { Card } from 'retroui/card';
|
||||
import { Button } from 'retroui/button';
|
||||
import { Badge } from 'retroui/badge';
|
||||
|
||||
export const revalidate = 60; // ISR cadence
|
||||
|
||||
export default async function BlogListPage() {
|
||||
const posts = await getPublishedPosts(12);
|
||||
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-10">
|
||||
<h1 className="text-4xl font-extrabold mb-6">Blog</h1>
|
||||
<p className="text-muted-foreground mb-10">
|
||||
Latest posts from the Payload CMS backend, styled with RetroUI.
|
||||
</p>
|
||||
|
||||
<section className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{posts.map((post) => (
|
||||
<Card key={post.id} className="p-0 overflow-hidden">
|
||||
{typeof post.coverImage === 'object' && post.coverImage?.url ? (
|
||||
<div className="relative h-44 w-full">
|
||||
<Image
|
||||
src={post.coverImage.url}
|
||||
alt={post.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="p-5 space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">Article</Badge>
|
||||
{post.publishedAt ? (
|
||||
<span className="text-xs opacity-70">
|
||||
{new Date(post.publishedAt).toLocaleDateString()}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold leading-tight">
|
||||
<Link href={`/blog/${post.slug}`}>{post.title}</Link>
|
||||
</h2>
|
||||
|
||||
{post.excerpt ? (
|
||||
<p className="text-sm text-muted-foreground line-clamp-3">
|
||||
{post.excerpt}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="pt-2">
|
||||
<Button asChild>
|
||||
<Link href={`/blog/${post.slug}`}>Read more</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
> If your RetroUI package exposes different import names/paths, adjust `import { Card } from 'retroui/card'` lines to match. You can also swap in any other RetroUI components (Tabs, Inputs, etc.).
|
||||
|
||||
### 6) Post detail page (optional)
|
||||
|
||||
Create `app/blog/[slug]/page.tsx`:
|
||||
|
||||
```tsx
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
async function getPost(slug: string) {
|
||||
const base = process.env.NEXT_PUBLIC_PAYLOAD_BASE_URL!;
|
||||
const url = new URL('/api/posts', base);
|
||||
url.searchParams.set('limit', '1');
|
||||
url.searchParams.set('where[slug][equals]', slug);
|
||||
const res = await fetch(url.toString(), { next: { revalidate: 60 } });
|
||||
if (!res.ok) throw new Error('Failed to load post');
|
||||
const data = await res.json();
|
||||
return data.docs[0];
|
||||
}
|
||||
|
||||
export default async function PostPage({ params }: { params: { slug: string } }) {
|
||||
const post = await getPost(params.slug);
|
||||
if (!post) return <div className="p-10">Not found</div>;
|
||||
|
||||
return (
|
||||
<article className="container mx-auto px-4 py-10 max-w-3xl">
|
||||
<Link href="/blog" className="underline">← Back to blog</Link>
|
||||
<h1 className="text-4xl font-extrabold mt-3">{post.title}</h1>
|
||||
{post.coverImage?.url ? (
|
||||
<div className="relative h-80 w-full my-6">
|
||||
<Image src={post.coverImage.url} alt={post.title} fill className="object-cover" />
|
||||
</div>
|
||||
) : null}
|
||||
{post.content?.root ? (
|
||||
// If using Payload Lexical richText renderer, render here
|
||||
<div className="prose prose-neutral dark:prose-invert">
|
||||
{/* Render your rich text */}
|
||||
</div>
|
||||
) : (
|
||||
post.excerpt ? <p className="mt-4 text-lg">{post.excerpt}</p> : null
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
> For rich text, use your preferred Payload Renderer (e.g., @payloadcms/richtext-lexical) and render accordingly.
|
||||
|
||||
---
|
||||
|
||||
## Part 3 — Cross‑origin & deployment notes
|
||||
|
||||
If your Next.js app runs at a different origin than Payload:
|
||||
|
||||
* Enable **CORS** in Payload: set `cors: ["https://your-next-app.com", "http://localhost:3000"]` in `payload.config.ts`.
|
||||
* Set `serverURL` (and `PAYLOAD_PUBLIC_SERVER_URL`) correctly so image URLs resolve.
|
||||
* Protect drafts: we allowed public `read` above. For private content, replace with an `access.read` function that checks auth/roles.
|
||||
|
||||
Deployment options:
|
||||
|
||||
* **Self‑host** (Node app on a VPS) or deploy to **Vercel**/**Cloudflare** for modern DX.
|
||||
* Use **SQLite** for quick demos, **Postgres/Mongo** for prod.
|
||||
|
||||
---
|
||||
|
||||
## Part 4 — Enhancements
|
||||
|
||||
* **Search & filters**: Use Payload’s query parameters (e.g., `where[title][like]`) and wire a RetroUI **Input** + **Tabs** to filter.
|
||||
* **Pagination**: the REST API returns `totalDocs`, `limit`, `page`—build “Load more” with a RetroUI Button.
|
||||
* **Images**: move `coverImage` to a dedicated **Media** collection and use Payload’s upload adapter.
|
||||
* **Preview mode**: set up a draft preview route in Next.js that fetches with draft‑auth headers.
|
||||
* **GraphQL**: Payload also exposes GraphQL—use it if you prefer typed queries.
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
* **CORS errors**: Check `cors` config and ensure `serverURL` is set.
|
||||
* **Images not showing**: Confirm the `url` returned for uploads and that Next.js `next.config.js` allows the Payload domain under `images.domains`.
|
||||
* **Nothing renders**: Inspect the fetch URL in `lib/payload.ts`. Ensure records exist and `status` is `published`.
|
||||
|
||||
---
|
||||
|
||||
## Recap
|
||||
|
||||
You now have:
|
||||
|
||||
* A Payload CMS app exposing posts over REST
|
||||
* A Next.js site styled with RetroUI
|
||||
* A `/blog` that lists and links to individual posts
|
||||
|
||||
From here, add authors, categories, and tags; style with more RetroUI components; and ship it.
|
||||
@@ -0,0 +1,380 @@
|
||||
---
|
||||
title: Top 10 Next.js UI Libraries in 2025
|
||||
coverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top-10-nextjs-2025/cover.png
|
||||
description: Using UI libraries can significantly speed up your development. In this article, we will explore the top 10 for your Next.js project.
|
||||
tags:
|
||||
- nextjs
|
||||
- ui library
|
||||
- top 10
|
||||
author:
|
||||
name: Imran Hossain
|
||||
avatar: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/imran.jpg
|
||||
linkedin: faraazhossainimran
|
||||
|
||||
status: published
|
||||
publishedAt: 31 May, 2025
|
||||
---
|
||||
|
||||
Next.js has become the go-to React framework for building modern, full-stack web applications. But great functionality alone isn't enough. Your app needs a beautiful, fast, and accessible user interface. That’s where UI libraries come in.
|
||||
|
||||
<br />
|
||||
|
||||
Using UI libraries can dramatically streamline your development workflow. The good news is that there’s no shortage of high-quality UI libraries that work seamlessly with Next.js. Below are the top 10 UI libraries in 2025 that can help you build modern, user-friendly interfaces more efficiently in your next Next.js project.
|
||||
|
||||
<br />
|
||||
|
||||
## [1. RetroUI](https://retroui.dev)
|
||||
|
||||
|
||||
|
||||
If you are bored with generic looking UI libraries, you should check out [RetroUI](https://retroui.dev). It brings a combination of retro and modern design elements to create a unique and memorable user experience.
|
||||
The library is built with React and Tailwind CSS, making it easy to integrate into your existing projects.
|
||||
|
||||
<br />
|
||||
|
||||
RetroUI comes with 100+ utility components, including `buttons`, `cards`, `modals`, and more that you can just copy-paste into your projects.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why use RetroUI in 2025?
|
||||
|
||||
- **Unique Design:** RetroUI's unique design elements make it stand out from other UI libraries.
|
||||
- **Easy to Use:** RetroUI's components are easy to use and can be customized with Tailwind CSS.
|
||||
- **Bold Design System:** For websites that aims to look bold, RetroUI can be a perfect fit.
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **Bold Design System:** RetroUI's biggest benefit can also be it's biggest drawback, If you are looking for a more subtle design, RetroUI might not be the best fit.
|
||||
- **Smaller Community Size:** As a new UI library, RetroUI doesn't have a large community yet compared to other mainstream libraries.
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case
|
||||
|
||||
Perfect for someone looking to combine old school and modern design!
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [2. Shadcn/ui](https://ui.shadcn.com)
|
||||
|
||||
|
||||
|
||||
|
||||
Shadcn/ui has quickly become one of the most talked-about UI libraries in the React and Next.js ecosystem. It blends the power of **Tailwind CSS**, **Radix UI**, and modern design principles to provide a customizable and production-ready set of components.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why shadcn/ui in 2025?
|
||||
|
||||
- **Modern Aesthetic**: Components follow sleek, minimal, and accessible design standards, fitting perfectly with modern UI trends.
|
||||
- **Composable & Customizable**: Built on Tailwind CSS and Radix UI primitives, giving developers full control over styles and behavior.
|
||||
- **TypeScript Friendly**: All components are fully typed, providing a great developer experience with auto completion and safety.
|
||||
- **Great for Next.js**: Designed with app directory support in mind, making it a natural fit for modern Next.js projects.
|
||||
|
||||
```tsx
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
<Button variant="outline">Click me</Button>
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **Manual Setup**: Unlike Chakra or Material UI, you don’t install it as a complete package. You copy and paste components into your project, which can be tedious for some developers.
|
||||
- **Learning Curve**: Requires some familiarity with Tailwind CSS and Radix UI to fully unlock its potential.
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case
|
||||
|
||||
Ideal for developers who want full control over styling and component behavior while maintaining a modern design system. Especially great for teams building custom design systems or wanting highly optimized Next.js apps without the bloat.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
|
||||
## [3. Chakra UI](https://chakra-ui.com)
|
||||
|
||||
|
||||
**Chakra UI** is a popular React component library known for its simplicity, accessibility, and developer-friendly API. It provides a comprehensive set of pre-styled components that speed up the development of clean, responsive UIs.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why Chakra UI in 2025?
|
||||
|
||||
- **Large Selection of Components**: Comes with a wide range of ready-to-use components like modals, forms, alerts, icons, cards, and more.
|
||||
- **Prop-Based Styling**: Uses a utility prop system that makes styling components intuitive and efficient without writing separate CSS.
|
||||
- **Theming Support**: Fully customizable theme system with support for dark mode and a live theme playground.
|
||||
- **Accessibility Built-in**: All components follow WAI-ARIA standards and are keyboard-navigable by default.
|
||||
- **Helpful Utilities**: Includes extra helper components and hooks such as useDisclosure, useToast, and more for managing UI state easily.
|
||||
|
||||
```tsx
|
||||
import { FormatNumber } from "@chakra-ui/react";
|
||||
|
||||
<FormatNumber value={1234.45} style="currency" currency="USD" />;
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **Bundle Size**: The total package size exceeds 2MB (unpacked), and when combined with dependencies, it can add notable weight to your application.
|
||||
- **Less Tailwind-Friendly**: Chakra’s styling system differs from utility-first frameworks like Tailwind, which may be limiting for some teams.
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case
|
||||
|
||||
Perfect for developers who want to move fast without worrying about styling from scratch. Great for dashboards, admin panels, and apps where accessibility and design consistency are important out-of-the-box.
|
||||
|
||||
|
||||
## [4. MUI (Material UI)](https://mui.com)
|
||||
|
||||
|
||||
|
||||
**MUI (Material UI)**is one of the most established and feature-rich UI libraries for React. Based on Google's Material Design, it offers a large set of components, robust customization options, and strong community support, making it a go-to choice for many production apps.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why MUI in 2025?
|
||||
|
||||
- **Comprehensive Component Library**: Offers 100+ high-quality components including tables, date pickers, data grids, and more.
|
||||
- **Material Design Compliance**: Implements Google's Material Design out-of-the-box for a professional, polished look.
|
||||
- **Theming & Customization**: Advanced theming system allows deep customization to fit any design system.
|
||||
- **Powerful Layout Tools**: Includes responsive Grid and Box components that simplify layout creation.
|
||||
- **Strong Ecosystem**: Comes with official add-ons like MUI X for data-rich components and design kits for Figma.
|
||||
|
||||
```tsx
|
||||
import Button from "@mui/material/Button";
|
||||
|
||||
<Button variant="contained" color="primary">Click Me</Button>
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **Large Bundle Size**: MUI’s component richness comes at the cost of performance — it can significantly increase bundle size.
|
||||
- **Style Customization Can Be Verbose**: Overriding styles using the sx prop or styled() can be less intuitive for Tailwind or Chakra users.
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case
|
||||
|
||||
Best for enterprise-level applications or teams that want a robust, scalable, and production-ready UI solution with built-in accessibility and design consistency. Ideal for admin dashboards, CRMs, and SaaS platforms.
|
||||
|
||||
|
||||
## [5. Radix UI](https://www.radix-ui.com)
|
||||
|
||||
|
||||
**Radix UI** is a low-level UI component library that provides unstyled, accessible primitives for building custom and highly flexible interfaces. Rather than giving you styled components, it offers logic and behavior, allowing complete control over design.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why Radix UI in 2025?
|
||||
|
||||
- **Unstyled by Design**: Gives you complete styling freedom using any CSS approach — Tailwind, CSS Modules, Styled Components, etc.
|
||||
- **Accessibility First**: Every component adheres to WAI-ARIA standards and comes with built-in accessibility logic.
|
||||
- **Composability**: Components are built as primitives, allowing you to compose and extend them to suit your design needs.
|
||||
- **Framework-Agnostic**: While optimized for React, Radix UI is modular enough to be integrated into various setups, including modern Next.js apps.
|
||||
- **Consistent API**: Offers a unified API across all components, making it predictable and easy to use once you're familiar with one.
|
||||
|
||||
|
||||
```tsx
|
||||
import * as Switch from '@radix-ui/react-switch';
|
||||
|
||||
<Switch.Root className="...">
|
||||
<Switch.Thumb className="..." />
|
||||
</Switch.Root>
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **No Styling Included**: Beginners may find it harder to use, as it requires pairing with a styling solution (e.g., Tailwind CSS).
|
||||
- **Not a Full UI Kit**: Radix UI doesn’t provide all the components you'd find in traditional UI libraries (e.g., tables, charts, etc.).
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case
|
||||
|
||||
Perfect for developers and teams who want full control over their UI design and behavior. Ideal for custom design systems and projects where flexibility and accessibility are top priorities.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [6. Mantine](https://mantine.dev)
|
||||
|
||||
|
||||
|
||||
**Mantine** is a modern React component library that offers a rich set of customizable and accessible UI components, combined with powerful hooks and utilities. It focuses on developer experience and performance, making it a great choice for building scalable Next.js applications.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why Mantine in 2025?
|
||||
|
||||
- **Extensive Component Library**: Includes over 100 components such as modals, notifications, inputs, and advanced data display elements.
|
||||
- **Flexible Styling**: Supports multiple styling approaches including CSS-in-JS, Tailwind CSS integration, and theme overrides.
|
||||
- **Built-in Dark Mode**: Offers easy dark/light theme switching with seamless theming capabilities.
|
||||
- **Rich Utility Hooks**: Provides handy hooks for common tasks like form handling, modals, and media queries.
|
||||
- **TypeScript Support**: Fully typed components for excellent developer experience and safer code.
|
||||
|
||||
```tsx
|
||||
import { Button } from '@mantine/core';
|
||||
|
||||
<Button variant="outline">Click me</Button>
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **Smaller Community**: Compared to Chakra UI or MUI, Mantine’s community is growing but still smaller, meaning fewer third-party resources.
|
||||
- **Less Established**: Being relatively newer, some components or integrations might be less battle-tested.
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case
|
||||
|
||||
Ideal for developers looking for a comprehensive and flexible UI toolkit with great developer ergonomics. Perfect for building both small projects and complex apps that require a customizable design system.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [7. Hero UI](https://heroui.com)
|
||||
|
||||
|
||||
|
||||
|
||||
**Hero UI** is a lightweight, Tailwind CSS-based component library that focuses on delivering clean, accessible, and modern UI components out-of-the-box. It emphasizes simplicity and responsiveness, making it an excellent choice for developers who prefer a utility-first CSS approach like Tailwind.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why Hero UI in 2025?
|
||||
|
||||
- **Tailwind-First Design**: Built entirely with Tailwind CSS, ensuring consistency and ease of customization for Tailwind users.
|
||||
- **Accessible Components**: Prioritizes accessibility with keyboard navigation and screen-reader-friendly components.
|
||||
- **Simple Integration**: Easy to plug into any Tailwind + React or Next.js project without heavy configuration.
|
||||
- **Well-Designed Defaults**: Offers visually appealing default styles that align with modern UI trends without overwhelming customization.
|
||||
- **Fast Prototyping**: Perfect for building UIs quickly with pre-designed, responsive components.
|
||||
|
||||
```tsx
|
||||
import { Button } from '@hero-ui/react';
|
||||
|
||||
<Button variant="primary">Click me</Button>
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **Limited Component Set**: Compared to larger libraries like MUI or Mantine, Hero UI has a smaller set of components.
|
||||
- **Tailwind Dependency**: Not suitable if you don’t want to use Tailwind CSS, as it relies heavily on Tailwind utility classes.
|
||||
- **Minimal Ecosystem**: Fewer plugins or extended tools compared to more mature libraries.
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case
|
||||
|
||||
Best for developers working with Tailwind CSS who want clean, ready-to-use components with minimal setup. Ideal for small to mid-sized projects, landing pages, and startups looking to ship quickly with a modern design.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [8. Ant Design](https://ant.design)
|
||||
|
||||
|
||||
|
||||
**Ant Design** is a comprehensive and enterprise-grade UI library built for React. Developed by Alibaba, it is widely used in production-level applications, especially in enterprise and admin dashboards, due to its vast component set and professional design system.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why Ant Design in 2025?
|
||||
|
||||
- **Rich Component Library**: Offers a large number of well-crafted components, including complex UI elements like tables, trees, timelines, and charts.
|
||||
- **Design System**: Follows a well-defined design philosophy that promotes consistency, usability, and responsiveness.
|
||||
- **Internationalization (i18n)**: Built-in support for multiple languages and locale settings out of the box.
|
||||
- **Enterprise Features**: Comes with features like form validation, data tables, permission controls, and icon packs that are ideal for large-scale apps.
|
||||
- **Custom Theming**: Allows advanced theming using Less variables or CSS-in-JS with full control over visual style.
|
||||
|
||||
```tsx
|
||||
import { Button } from 'antd';
|
||||
|
||||
<Button type="primary">Click Me</Button>
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **Heavy Bundle Size**: One of the heaviest UI libraries in terms of bundle size, which might affect performance in smaller apps.
|
||||
- **Overhead for Simple Projects**: The complexity and richness may be overkill for lightweight or minimal UIs.
|
||||
- **Less Tailwind-Friendly**: Not designed with utility-first frameworks like Tailwind CSS in mind.
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case
|
||||
|
||||
Ideal for enterprise dashboards, internal tools, admin panels, and data-intensive applications. Best suited for teams who need robust components and built-in business-level features without building from scratch.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [9. DaisyUI](https://daisyui.com)
|
||||
|
||||
|
||||
**DaisyUI** is a plugin for Tailwind CSS that adds pre-styled, customizable UI components. It allows developers to build beautiful interfaces quickly while keeping the flexibility and utility-first approach of Tailwind intact. Lightweight and beginner-friendly, DaisyUI is a popular choice for rapid development.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why DaisyUI in 2025?
|
||||
|
||||
- **Tailwind Native**: Built directly on top of Tailwind CSS, making it seamless to integrate and customize using Tailwind classes.
|
||||
- **Theme Support**: Comes with multiple pre-built themes and easy dark mode toggling, customizable via Tailwind config.
|
||||
- **Component-Rich**: Provides a wide range of components like buttons, cards, modals, navbars, dropdowns, and more.
|
||||
- **Minimal Setup**: Easy to install and integrate into any Tailwind + Next.js project with zero JavaScript bloat.
|
||||
- **Open Source & Community Driven**: Actively maintained with a growing contributor base and real-world usage.
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **Basic Functionality**: Most components are presentational and don’t come with built-in interactivity like form validation or dropdown logic.
|
||||
- **Not Framework-Specific**: Unlike MUI or Chakra UI, DaisyUI is just styled HTML classes — you'll still need to handle component behavior yourself.
|
||||
- **Limited Advanced Components**: Lacks complex or enterprise-level components (e.g., data grids, sortable tables, etc.).
|
||||
|
||||
#### Use Case
|
||||
|
||||
Perfect for beginners or developers who want to prototype quickly using Tailwind CSS with a pre-styled component set. Ideal for marketing pages, landing pages, blogs, and simple dashboards in Next.js apps.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [10. Ark UI](https://ark-ui.com)
|
||||
|
||||
|
||||
|
||||
**Ark UI** is a headless, accessible component library built by the creators of Chakra UI. It offers composable, unstyled components that give developers complete control over the UI while handling accessibility and interaction logic internally. It's perfect for custom design systems.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why Ark UI in 2025?
|
||||
|
||||
- **Headless Components**: Ark UI provides the functionality and accessibility of components without imposing styles, allowing full design freedom.
|
||||
- **Accessibility by Default**: All components are WAI-ARIA compliant, keyboard navigable, and screen-reader friendly out of the box.
|
||||
- **Framework-Agnostic**: Works not only with React/Next.js but also with Vue, Solid, and other frontend frameworks.
|
||||
- **Composable Architecture**: Encourages flexibility and reusability by breaking components into primitives that can be composed freely.
|
||||
- **Ideal for Design Systems**: Perfect for teams building custom UI libraries or fully branded interfaces.
|
||||
|
||||
### Drawbacks
|
||||
|
||||
- **No Styling Provided**: Unlike Chakra UI or Mantine, you must style everything yourself using Tailwind, CSS-in-JS, or your preferred method.
|
||||
- **Steeper Learning Curve**: Beginners may find it harder to use because it requires more setup and an understanding of headless component architecture.
|
||||
- **Fewer Out-of-the-Box Components**: Still expanding its library — may not yet have all the components found in more mature kits.
|
||||
|
||||
### Use Case
|
||||
|
||||
Ideal for teams or developers who want total styling control and need accessible, composable building blocks for custom UI systems in React or Next.js projects. Great for products with a unique brand identity or when building a design system from scratch.
|
||||
@@ -0,0 +1,204 @@
|
||||
---
|
||||
title: Top 5 React UI Libraries in 2025
|
||||
coverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/top-5-react-ui-library/react-cover.png
|
||||
description: Using UI libraries can significantly speed up your development. In this article, we will explore the top 5 for your next React project.
|
||||
tags:
|
||||
- react
|
||||
- ui library
|
||||
- top 5
|
||||
author:
|
||||
name: Arif Hossain
|
||||
avatar: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/arif.jpg
|
||||
x: ariflogs
|
||||
status: published
|
||||
publishedAt: 12 Feb, 2024
|
||||
---
|
||||
|
||||
React remains one of the most popular JavaScript frameworks for building web applications, and UI libraries play a important role in speeding up development. Using UI libraries can significantly speed up your development process and help you create consistent, high-quality user interfaces.
|
||||
|
||||
<br />
|
||||
Fortunately, there are many React great UI libraries available that can help you
|
||||
achieve this. Here are the top 5 React UI libraries in 2025 that you should
|
||||
consider using in your next project.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [1. RetroUI](https://retroui.dev)
|
||||
|
||||
|
||||
|
||||
If you are bored with generic looking UI libraries, you should check out [RetroUI](https://retroui.dev). It brings a combination of retro and modern design elements to create a unique and memorable user experience.
|
||||
The library is built with React and Tailwind CSS, making it easy to integrate into your existing projects.
|
||||
|
||||
<br />
|
||||
|
||||
RetroUI comes with 100+ utility components, including `buttons`, `cards`, `modals`, and more that you can just copy-paste into your projects.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why use RetroUI in 2025?
|
||||
|
||||
- **Unique Design:** RetroUI's unique design elements make it stand out from other UI libraries.
|
||||
- **Easy to Use:** RetroUI's components are easy to use and can be customized with Tailwind CSS.
|
||||
- **Bold Design System:** For websites that aims to look bold, RetroUI can be a perfect fit.
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **Bold Design System:** RetroUI's biggest benefit can also be it's biggest drawback, If you are looking for a more subtle design, RetroUI might not be the best fit.
|
||||
- **Smaller Community Size:** As a new UI library, RetroUI doesn't have a large community yet compared to other mainstream libraries.
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case
|
||||
|
||||
Perfect for someone looking to combine old school and modern design!
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [2. Chakra UI](https://chakra-ui.com)
|
||||
|
||||
|
||||
Chakra UI has gained popularity for its simplicity and flexibility. It offers a modern, accessible, and easy-to-use components that can fit any React applications.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why Chakra UI in 2025?
|
||||
|
||||
- Large Selection of Components: Chakra UI offers a wide range of components, including `dialogs`, `forms`, `icons`, `stats`, and more.
|
||||
- Ease of Styling: Chakra UI Uses a prop-based styling approach that allows for easily customize the components.
|
||||
- Theming Support: Chakra UI allows deep customization along with a playground where you can try and test your themes.
|
||||
- Utilities: Chakra UI also provides a bunch of helper components that can handle some common functionalities.
|
||||
|
||||
```js
|
||||
import { FormatNumber } from "@chakra-ui/react";
|
||||
|
||||
<FormatNumber value={1234.45} style="currency" currency="USD" />;
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- Heavy: The unpacked size of Chakra UI is over 2MB, and combining that with it's core dependencies, can make Chakra UI a heavy library to use.
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case
|
||||
|
||||
Developers who don't wanna spend a lot of time on building/styling UIs, as ChakraUI has almost all the common components you can think of.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [3. Shadcn/UI](https://ui.shadcn.com/)
|
||||
|
||||
|
||||
|
||||
Shadcn is not necessarily a UI library, but a collection of UI components that you can use to build your own UI library. It's a great starting point for building your own UI library, as it provides a lot of components that you can use and customize.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why Use ShadCN in 2025?
|
||||
|
||||
- Fully Customizable: Unlike traditional UI kits, it doesn't have a specific design language. You can fully customize it to match your brand's design.
|
||||
- Minimalistic Design: If you like clean and minimalistic design, you'll love ShadCN.
|
||||
- Backed by Vercel: Shadcn is now managed by Vercel and integrates well with other Vercel products like NextJS, v0 and AI SDK.
|
||||
- Developer-Friendly: No lock-in—just import and customize as needed.
|
||||
|
||||
<br />
|
||||
|
||||
#### Drawbacks of ShadCN
|
||||
|
||||
- **Learning Curve:** If you're new to component libraries, it might take some time to get used to.
|
||||
- **Looks Generic:** ShadCN components look generic, as it's meant to be. So you might have to put some effort into making them look unique.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [4. Hero UI](https://www.heroui.com/)
|
||||
|
||||
|
||||
|
||||
Hero UI is a relatively newer UI library that offers a wide range of base and animated components for Next.js and React applications.
|
||||
|
||||
<br />
|
||||
|
||||
#### Why use Hero UI in 2025?
|
||||
|
||||
- Modern Design: Hero UI offers a modern and sleek design that is perfect for building responsive and accessible applications.
|
||||
- Animation Support: Most of it's components supports animations out of the box.
|
||||
- Developer-Friendly: Hero UI is easy to use and integrate with existing React projects.
|
||||
- CLI Support: Hero UI comes with a CLI that makes it easy to initialize new projects and install components.
|
||||
|
||||
#### Drawbacks
|
||||
|
||||
- **Limited Customization:** Hero UI has a opinionated design, so you might not be able to customize it as much as you want.
|
||||
|
||||
<br />
|
||||
|
||||
#### Use Case:
|
||||
|
||||
If you want to make your website look and feel like Apple's, Hero UI is the go-to choice.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## [5. Mantine](https://mantine.dev/)
|
||||
|
||||
|
||||
|
||||
Mentine is a fully featured React UI library that offers a wide range of components, hooks, and utilities for building modern web applications.
|
||||
|
||||
**Why Mantine in 2025?**
|
||||
|
||||
- Rich Component Library: Mantine offers a wide range of components, from basic `buttons` to complex `data tables`.
|
||||
- Hooks-Based: Mantine's hooks-based architecture makes it easy to integrate with existing React projects.
|
||||
- Extensions: Mentine offers some free extensions like `Code Highlight`, `Rich text editor` that can come in handy.
|
||||
|
||||
```jsx
|
||||
import { CodeHighlight } from "@mantine/code-highlight";
|
||||
|
||||
const exampleCode = `
|
||||
function Button() {
|
||||
return <button>Click me</button>;
|
||||
}
|
||||
`;
|
||||
|
||||
function Demo() {
|
||||
return (
|
||||
<CodeHighlight
|
||||
code={`// Custom copy label${exampleCode}`}
|
||||
language="tsx"
|
||||
copyLabel="Copy button code"
|
||||
copiedLabel="Copied!"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
- Focus on DX: Mantine prioritizes developer experience with excellent documentation and TypeScript support.
|
||||
|
||||
#### Drawbacks:
|
||||
|
||||
- Large Size: Mantine's extensive feature set comes at the cost of a larger bundle size!
|
||||
- Learning Curve: Mentine as so many features like `@mentine/hooks`, `@mentine/charts`, `extensions` and much more which can be overwhelming for beginners.
|
||||
|
||||
#### Use Case:
|
||||
|
||||
Mentine is a great choice for data intensive applications, dashboards, and admin panels.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### **Conclusion**
|
||||
|
||||
In 2025, the React ecosystem is more vibrant than ever, with UI libraries catering to a wide range of needs. Whether you're looking for a minimal design system like [Shadcn](https://ui.shadcn.com), or an bold design system like [RetroUI](https://retroui.dev), there's a React UI library for almost every project.
|
||||
|
||||
When choosing a library, consider factors like customization, performance, accessibility, and community support. Each of these top 5 libraries has its strengths, so pick the one that aligns best with your project requirements and development style.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
title: Why Neo-Brutalism is Perfect for Modern Websites
|
||||
coverImage: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/blogs/why-neo-brutalism-best-for-modern-websites/cover.png
|
||||
description: Bored of how every website looks alike? Neo-brutalism breaks the pattern. It’s a design that stands out and might be the perfect fit for modern websites.
|
||||
tags:
|
||||
- ui/ux
|
||||
- design
|
||||
author:
|
||||
name: Imran Hossain
|
||||
avatar: https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/imran.jpg
|
||||
linkedin: faraazhossainimran
|
||||
|
||||
status: published
|
||||
publishedAt: 18 August, 2025
|
||||
---
|
||||
|
||||
|
||||
Bored of how every website looks alike? Neo-brutalism breaks the pattern. It’s a design that stands out and might be the perfect fit for modern websites.
|
||||
|
||||
<br />
|
||||
|
||||
## **What exactly is Neo-Brutalism?**
|
||||
|
||||
Neo-brutalism is a design system, inspired by brutalist architecture, using concrete blocks, exposed structures, and a no-frills style. In web design, that means:
|
||||
|
||||
<br />
|
||||
|
||||
- → Sharp edges and grid layouts
|
||||
- → High-contrast colors
|
||||
- → Simple typography
|
||||
- → A “hand-coded” or minimalist feel
|
||||
|
||||
|
||||
|
||||
<br />
|
||||
|
||||
## **Why It Works So Well?**
|
||||
|
||||
Nowadays, every other website looks the same, making it hard to grab visitor attention!
|
||||
In cases like this Neo Brutalism can help you stand out from the crowd. While exploring at different styles, you come across **neo-brutalism,** a bold and raw design style. It uses plain colors, big text, and basic shapes. It's loud, different, and hard to ignore.
|
||||
|
||||
|
||||
<br />
|
||||
|
||||
You think, *“This could grab people’s attention.”*
|
||||
|
||||
But then you ask yourself, *“Does this fit the brand I’m working on?”*
|
||||
|
||||
If your brand wants to make a strong impression, neo-brutalism might be a great choice. But if the brand is more elegant, quiet, or professional, this design could feel too aggressive.
|
||||
|
||||
However, you might decide to try it on a small site, maybe a creative portfolio or a campaign. But for something long-term, or for a product that needs to work everywhere, you may pick a design that’s more flexible.
|
||||
|
||||
<br />
|
||||
|
||||
## What are Neo-brutalist Characteristics?
|
||||
|
||||
<br />
|
||||
|
||||
### 1. It Gets Noticed Fast
|
||||
|
||||
|
||||
|
||||
Most websites look similar, but neo-brutalist designs are different. Their simple style catches the eye right away. For brands like startups, designers, or creative people who want to be noticed, this is a big plus.
|
||||
|
||||
<br />
|
||||
|
||||
### 2. It’s Fast and Lightweight
|
||||
|
||||
Neo-brutalist websites usually avoid heavy animations and large frameworks. This makes them load quickly, run smoothly, and work better on mobile devices. It’s good for users, and Google likes it too.
|
||||
|
||||
<br />
|
||||
|
||||
### 3. It Feels Genuine
|
||||
|
||||
|
||||
|
||||
People today like things that feel genuine. Neo-brutalism skips the extra polish and shows things as they are. It’s not trying to hide anything or be fancy, and that honesty helps build trust.
|
||||
|
||||
<br />
|
||||
|
||||
### 4. It’s Developer-Friendly
|
||||
|
||||
Neo-brutalism uses simple HTML and basic styles. That makes it easier to build and maintain, especially for developers who want to focus on function over decoration.
|
||||
|
||||
<br />
|
||||
|
||||
### 5. Unleash Creativity
|
||||
|
||||
Neo-Brutalism is a playground for designers. It breaks away from traditional design rules and encourages creative freedom. For brands, this builds a unique brand identity that feels modern.
|
||||
|
||||
<br />
|
||||
|
||||
## Some Real World Examples
|
||||
Many websites use neobrutalist design to stand out. Here are a few examples:
|
||||
|
||||
<br />
|
||||
|
||||
### [Gumroad](https://gumroad.com)
|
||||
|
||||
|
||||
|
||||
**Gumroad**, a platform for independent creators, also follows a neobrutalist style. Its website looks raw and simple, helping users focus on what matters: selling their work easily and without distractions. This matches Gumroad’s mission of empowering creators with a straightforward, no-frills platform.
|
||||
|
||||
<br />
|
||||
|
||||
### [Feastables](https://feastables.com)
|
||||
|
||||
|
||||
|
||||
**Feastables**, the snack brand created by MrBeast, also uses neobrutalist design to stand out. The website is bold, colorful, and easy to understand. Instead of using shiny effects or fancy styles, Feastables keeps things raw, fun, and direct.
|
||||
|
||||
<br />
|
||||
|
||||
The bright colors, big text, and playful layout reflect the brand’s energy and MrBeast’s personality. Everything is made to be clear, fast, and exciting, just like his videos. This matches neobrutalism’s goal of being bold, functional, and different from typical polished designs.
|
||||
|
||||
Feastables uses design not just to look good, but to connect quickly with fans and make the brand feel fun and real.
|
||||
|
||||
<br />
|
||||
|
||||
## Final Thoughts
|
||||
|
||||
Neo-brutalism isn’t just about looking different. It’s about rethinking how websites communicate. In a world where everything is overdesigned, a raw, bold approach feels surprisingly fresh.
|
||||
|
||||
So if you’re building a modern website and want to stand out, maybe it’s time to try neo-brutalism.
|
||||
@@ -0,0 +1,148 @@
|
||||
---
|
||||
title: Area Chart
|
||||
description: A customizable area chart component to visualize your data with gradient fills and smooth curves. 📈
|
||||
lastUpdated: 12 Aug, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/AreaChart.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="area-chart-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/area-chart.json'" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install recharts
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="areaChart" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="area-chart-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Multiple Categories
|
||||
|
||||
<ComponentShowcase name="area-chart-style-multiple" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Stacked Areas
|
||||
|
||||
<ComponentShowcase name="area-chart-style-stacked" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## API Reference
|
||||
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Prop</Table.Head>
|
||||
<Table.Head>Type</Table.Head>
|
||||
<Table.Head>Default</Table.Head>
|
||||
<Table.Head>Description</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">data</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`Record<string, any>[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
|
||||
<Table.Cell>Array of data objects to display</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">index</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">-</Table.Cell>
|
||||
<Table.Cell>Key for the x-axis (category) data</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">categories</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
|
||||
<Table.Cell>Array of keys for the data values to display as areas</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">fill</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"gradient" | "solid"`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"gradient"`</Table.Cell>
|
||||
<Table.Cell>Fill style for the areas</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">strokeColors</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`["var(--foreground)"]`</Table.Cell>
|
||||
<Table.Cell>Array of stroke colors for the areas</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">fillColors</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`["var(--primary)"]`</Table.Cell>
|
||||
<Table.Cell>Array of fill colors for the areas</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">tooltipBgColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--background)"`</Table.Cell>
|
||||
<Table.Cell>Background color for tooltips</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">tooltipBorderColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--border)"`</Table.Cell>
|
||||
<Table.Cell>Border color for tooltips</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">gridColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--muted)"`</Table.Cell>
|
||||
<Table.Cell>Color for the grid lines</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">valueFormatter</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`(value: number) => string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`(value) => value.toString()`</Table.Cell>
|
||||
<Table.Cell>Function to format values</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">showGrid</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`true`</Table.Cell>
|
||||
<Table.Cell>Whether to show grid lines</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">showTooltip</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`true`</Table.Cell>
|
||||
<Table.Cell>Whether to show tooltips on hover</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">className</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">-</Table.Cell>
|
||||
<Table.Cell>Additional CSS classes</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
title: Bar Chart
|
||||
description: A customizable bar chart component to visualize your data with support for multiple categories, custom colors, and horizontal alignment. 📊
|
||||
lastUpdated: 02 Jan, 2026
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/BarChart.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="bar-chart-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/bar-chart.json'" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install recharts
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="barChart" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="bar-chart-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Grouped Data
|
||||
|
||||
<ComponentShowcase name="bar-chart-style-grouped" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Stacked Data
|
||||
|
||||
<ComponentShowcase name="bar-chart-style-stacked" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Horizontal Alignment
|
||||
|
||||
<ComponentShowcase name="bar-chart-style-horizontal" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## API Reference
|
||||
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Prop</Table.Head>
|
||||
<Table.Head>Type</Table.Head>
|
||||
<Table.Head>Default</Table.Head>
|
||||
<Table.Head>Description</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">data</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`Record<string, any>[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
|
||||
<Table.Cell>Array of data objects to display</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">index</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">-</Table.Cell>
|
||||
<Table.Cell>Key for the x-axis (category) data</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">categories</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
|
||||
<Table.Cell>Array of keys for the data values to display as bars</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">alignment</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"vertical" | "horizontal"`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"vertical"`</Table.Cell>
|
||||
<Table.Cell>Orientation of the bars</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">strokeColors</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`["var(--foreground)"]`</Table.Cell>
|
||||
<Table.Cell>Array of stroke colors for the bars</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">fillColors</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`["var(--primary)"]`</Table.Cell>
|
||||
<Table.Cell>Array of fill colors for the bars</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">tooltipBgColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--background)"`</Table.Cell>
|
||||
<Table.Cell>Background color for tooltips</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">tooltipBorderColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--border)"`</Table.Cell>
|
||||
<Table.Cell>Border color for tooltips</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">gridColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--muted)"`</Table.Cell>
|
||||
<Table.Cell>Color for the grid lines</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">valueFormatter</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`(value: number) => string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`(value) => value.toString()`</Table.Cell>
|
||||
<Table.Cell>Function to format values</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">showGrid</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`true`</Table.Cell>
|
||||
<Table.Cell>Whether to show grid lines</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">showTooltip</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`true`</Table.Cell>
|
||||
<Table.Cell>Whether to show tooltips on hover</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">stacked</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`false`</Table.Cell>
|
||||
<Table.Cell>Whether to stack the bars</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">className</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">-</Table.Cell>
|
||||
<Table.Cell>Additional CSS classes</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
title: Line Chart
|
||||
description: A customizable line chart component to visualize trends and data over time with smooth curves and data points. 📉
|
||||
lastUpdated: 12 Aug, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/LineChart.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="line-chart-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/line-chart.json'" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install recharts
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="lineChart" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="line-chart-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Multiple Lines
|
||||
|
||||
<ComponentShowcase name="line-chart-style-multiple" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## API Reference
|
||||
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Prop</Table.Head>
|
||||
<Table.Head>Type</Table.Head>
|
||||
<Table.Head>Default</Table.Head>
|
||||
<Table.Head>Description</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">data</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`Record<string, any>[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
|
||||
<Table.Cell>Array of data objects to display</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">index</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">-</Table.Cell>
|
||||
<Table.Cell>Key for the x-axis (category) data</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">categories</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
|
||||
<Table.Cell>Array of keys for the data values to display as lines</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">strokeColors</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`["var(--foreground)"]`</Table.Cell>
|
||||
<Table.Cell>Array of stroke colors for the lines</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">strokeWidth</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`number`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`2`</Table.Cell>
|
||||
<Table.Cell>Width of the line strokes</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">dotSize</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`number`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`4`</Table.Cell>
|
||||
<Table.Cell>Size of the data point dots</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">tooltipBgColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--background)"`</Table.Cell>
|
||||
<Table.Cell>Background color for tooltips</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">tooltipBorderColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--border)"`</Table.Cell>
|
||||
<Table.Cell>Border color for tooltips</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">gridColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--muted)"`</Table.Cell>
|
||||
<Table.Cell>Color for the grid lines</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">valueFormatter</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`(value: number) => string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`(value) => value.toString()`</Table.Cell>
|
||||
<Table.Cell>Function to format values</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">showGrid</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`true`</Table.Cell>
|
||||
<Table.Cell>Whether to show grid lines</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">showTooltip</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`true`</Table.Cell>
|
||||
<Table.Cell>Whether to show tooltips on hover</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">className</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">-</Table.Cell>
|
||||
<Table.Cell>Additional CSS classes</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
@@ -0,0 +1,130 @@
|
||||
---
|
||||
title: Pie Chart
|
||||
description: A customizable pie chart component to visualize proportional data with support for donut charts. 🍰
|
||||
lastUpdated: 12 Aug, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/PieChart.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="pie-chart-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/pie-chart.json'" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install recharts
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="pieChart" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="pie-chart-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Donut Chart
|
||||
|
||||
<ComponentShowcase name="pie-chart-style-donut" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## API Reference
|
||||
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Prop</Table.Head>
|
||||
<Table.Head>Type</Table.Head>
|
||||
<Table.Head>Default</Table.Head>
|
||||
<Table.Head>Description</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">data</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`Record<string, any>[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
|
||||
<Table.Cell>Array of data objects to display</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">dataKey</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">-</Table.Cell>
|
||||
<Table.Cell>Key for the data values</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">nameKey</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">-</Table.Cell>
|
||||
<Table.Cell>Key for the category names</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">colors</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`["var(--chart-1)", ...]`</Table.Cell>
|
||||
<Table.Cell>Array of colors for the pie segments</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">innerRadius</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`number`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`0`</Table.Cell>
|
||||
<Table.Cell>Inner radius (use > 0 for donut chart)</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">outerRadius</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`number`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`80`</Table.Cell>
|
||||
<Table.Cell>Outer radius of the pie</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">tooltipBgColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--background)"`</Table.Cell>
|
||||
<Table.Cell>Background color for tooltips</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">tooltipBorderColor</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`"var(--border)"`</Table.Cell>
|
||||
<Table.Cell>Border color for tooltips</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">valueFormatter</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`(value: number) => string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`(value) => value.toString()`</Table.Cell>
|
||||
<Table.Cell>Function to format values</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">showTooltip</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`true`</Table.Cell>
|
||||
<Table.Cell>Whether to show tooltips on hover</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="font-medium">className</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">`string`</Table.Cell>
|
||||
<Table.Cell className="*:text-xs">-</Table.Cell>
|
||||
<Table.Cell>Additional CSS classes</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Accordion
|
||||
description: This collapsible component let's your users read only the content they care about. 😌
|
||||
lastUpdated: 19 Oct, 2024
|
||||
links:
|
||||
api_reference: https://www.radix-ui.com/primitives/docs/components/accordion#api-reference
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Accordion.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="accordion-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/accordion" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-accordion lucide-react
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="accordion" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="accordion-style-default" />
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Alert
|
||||
description: Notify your users about important events and updates. 📣
|
||||
lastUpdated: 24 Oct, 2024
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Alert.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="alert-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/alert" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install class-variance-authority
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="alert" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="alert-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Solid
|
||||
|
||||
<ComponentShowcase name="alert-style-solid" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### With Icon
|
||||
|
||||
<ComponentShowcase name="alert-style-with-icon" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Status
|
||||
|
||||
<ComponentShowcase name="alert-style-all-status" />
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Avatar
|
||||
description: Default rounded avatar that can show your users profile picture. ✨
|
||||
lastUpdated: 12 Oct, 2024
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Avatar.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="avatar-style-circle" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/avatar" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-avatar
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="avatar" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Size variants
|
||||
|
||||
<ComponentShowcase name="avatar-style-circle-sizes" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Fallbacks
|
||||
|
||||
Fallbacks are helpfull when there ia an error loading the src of the avatar.
|
||||
You can set fallbacks with `Avatar.Fallback` component.
|
||||
|
||||
<br />
|
||||
|
||||
<ComponentShowcase name="avatar-style-circle-fallbacks" />
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: Badge
|
||||
description: The component that looks like a button but isn't clickable!
|
||||
lastUpdated: 30 Oct, 2024
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Badge.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="badge-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/badge" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install class-variance-authority
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="badge" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<hr />
|
||||
<br />
|
||||
<ComponentShowcase name="badge-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Variants
|
||||
|
||||
<hr />
|
||||
<br />
|
||||
<ComponentShowcase name="badge-style-variants" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Rounded
|
||||
|
||||
<ComponentShowcase name="badge-style-rounded" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Sizes
|
||||
|
||||
<ComponentShowcase name="badge-style-sizes" />
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
description: A navigation component that shows users where they are within a hierarchy.
|
||||
lastUpdated: 12 May, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Breadcrumb.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="breadcrumb-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/breadcrumb" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install lucide-react class-variance-authority
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="breadcrumb" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<hr />
|
||||
<br />
|
||||
<ComponentShowcase name="breadcrumb-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Custom Separator
|
||||
|
||||
<hr />
|
||||
<br />
|
||||
<ComponentShowcase name="breadcrumb-custom-separator" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Collapsed
|
||||
|
||||
<hr />
|
||||
<br />
|
||||
<ComponentShowcase name="breadcrumb-style-collapsed" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Link Component
|
||||
|
||||
<hr />
|
||||
<br />
|
||||
<ComponentShowcase name="breadcrumb-link-component" />
|
||||
<br />
|
||||
<br />
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
title: Button
|
||||
description: This bold button makes sure your users click on it and perform the actions you want! 🚀
|
||||
lastUpdated: 17 Oct, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Button.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="button-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/button" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install class-variance-authority
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="button" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Primary
|
||||
|
||||
<ComponentShowcase name="button-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Secondary
|
||||
|
||||
<ComponentShowcase name="button-style-secondary" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Outline
|
||||
|
||||
<ComponentShowcase name="button-style-outline" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Link
|
||||
|
||||
<ComponentShowcase name="button-style-link" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Icon
|
||||
|
||||
<ComponentShowcase name="button-style-icon" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### With Icon
|
||||
|
||||
<ComponentShowcase name="button-style-with-icon" />
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: Calendar
|
||||
description: Let your users select a date to cancel subscription.
|
||||
lastUpdated: 14 Nov, 2025
|
||||
---
|
||||
|
||||
<ComponentShowcase name="calendar-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/calendar" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install react-day-picker lucide-react
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="calendar" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="calendar-style-default" />
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Card
|
||||
description: A customizable card component to visualize your content. 📝
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Card.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="card-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/card" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="card" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Title with description
|
||||
|
||||
<ComponentShowcase name="card-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Product card
|
||||
|
||||
<ComponentShowcase name="card-style-commerce" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Testimonial card
|
||||
|
||||
<ComponentShowcase name="card-style-testimonial" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Retro player card
|
||||
|
||||
<ComponentShowcase name="retro-player" />
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Carousel
|
||||
description: Let your users select a date to cancel subscription.
|
||||
lastUpdated: 14 Nov, 2025
|
||||
---
|
||||
|
||||
<ComponentShowcase name="carousel-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/carousel" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install react-day-picker lucide-react
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="carousel" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="carousel-style-default" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Sizes
|
||||
|
||||
<ComponentShowcase name="carousel-style-sizes" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Vertical
|
||||
|
||||
<ComponentShowcase name="carousel-style-vertical" />
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Checkbox
|
||||
description: Let users confirm or reject an option.
|
||||
lastUpdated: 13 Feb, 2024
|
||||
links:
|
||||
api_reference: https://www.radix-ui.com/primitives/docs/components/checkbox#api-reference
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Checkbox.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="checkbox-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/checkbox" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-checkbox class-variance-authority lucide-react
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="checkbox" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Variants
|
||||
|
||||
<ComponentShowcase name="checkbox-style-variants" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Sizes
|
||||
|
||||
<ComponentShowcase name="checkbox-style-sizes" />
|
||||
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: Command
|
||||
description: A command palette component for quick navigation and actions
|
||||
lastUpdated: 21 Aug, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Command.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="command-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/command" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install class-variance-authority cmdk
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="command" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Dialog
|
||||
|
||||
<ComponentShowcase name="command-style-dialog" />
|
||||
<br />
|
||||
<br />
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Context Menu
|
||||
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/ContextMenu.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="context-menu-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/context-menu" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install class-variance-authority
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="context-menu" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
title: Dialog
|
||||
description: An impactful dialog that ensures your important messages and actions get the attention they deserve! 💬✨
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
api_reference: https://www.radix-ui.com/primitives/docs/components/dialog#api-reference
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Dialog.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="dialog-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Instalation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/dialog" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-dialog @radix-ui/react-visually-hidden tailwindcss-animate
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Configure your `tailwind.config.ts` add:
|
||||
|
||||
```sh
|
||||
{
|
||||
content: [...],
|
||||
theme: [...],
|
||||
|
||||
// add plugin
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
}
|
||||
```
|
||||
|
||||
#### 3. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="dialog" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Example
|
||||
|
||||
### Confirm dialog message
|
||||
|
||||
<ComponentShowcase name="dialog-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### With footer
|
||||
|
||||
<ComponentShowcase name="dialog-style-with-footer" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Size variants
|
||||
|
||||
<ComponentShowcase name="dialog-style-width-variant" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### With form
|
||||
|
||||
<ComponentShowcase name="dialog-style-with-form" />
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Drawer
|
||||
description: A component that can slide in from any side of the screen.
|
||||
lastUpdated: 21 Aug, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Command.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="drawer-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/drawer" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install vaul
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="drawer" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="drawer-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Different Direction
|
||||
|
||||
<ComponentShowcase name="drawer-style-right-direction" />
|
||||
<br />
|
||||
<br />
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
title: Empty
|
||||
description: The component that shows when there is no data to show!
|
||||
lastUpdated: 13 Jan, 2026
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Empty.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="empty-style-default" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/empty" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="empty" />
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="empty-style-default" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Custom Icon
|
||||
|
||||
<ComponentShowcase name="empty-style-custom-icon" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Customize everything
|
||||
|
||||
<ComponentShowcase name="empty-style-custom-everything" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Using with table
|
||||
|
||||
<ComponentShowcase name="empty-style-table" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## API Reference
|
||||
|
||||
The Empty component is composed of several sub-components:
|
||||
|
||||
<br />
|
||||
|
||||
- `Empty` - The main component wrapper
|
||||
- `Empty.Content` - Wrapper for the content elements
|
||||
- `Empty.Icon` - Section for displaying an icon
|
||||
- `Empty.Title` - The main heading for the empty state
|
||||
- `Empty.Separator` - A visual separator line
|
||||
- `Empty.Description` - Supporting text for the empty state
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Input
|
||||
description: This pretty input makes your users want to type stuff! ⌨️
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Input.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="input-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/input" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="input" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="input-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### With label
|
||||
|
||||
<ComponentShowcase name="input-style-with-label" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Error
|
||||
|
||||
<ComponentShowcase name="input-style-error" />
|
||||
<br />
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Label
|
||||
description: A universal component for labeling various inputs.
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Label.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="label-style-default" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/label" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-label
|
||||
```
|
||||
|
||||
<br />
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="label" />
|
||||
</ComponentInstall.Manual>
|
||||
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Label } from "@/components/retroui/Label";
|
||||
```
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
title: Loader
|
||||
description: A customizable loading indicator with bouncing squares. 🔄
|
||||
lastUpdated: 20 Aug, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Loader.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="loader-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/loader" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install class-variance-authority
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="loader" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="loader-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Secondary
|
||||
|
||||
<ComponentShowcase name="loader-style-solid" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Outline
|
||||
|
||||
<ComponentShowcase name="loader-style-outline" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Sizes
|
||||
|
||||
<ComponentShowcase name="loader-style-sizes" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Custom Configurations
|
||||
|
||||
<ComponentShowcase name="loader-style-custom" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Loader } from "@/components/ui/loader"
|
||||
|
||||
// Default
|
||||
<Loader />
|
||||
|
||||
// With variants
|
||||
<Loader variant="secondary" size="lg" />
|
||||
|
||||
// Custom configuration
|
||||
<Loader
|
||||
count={4} // Number of squares
|
||||
duration={1.2} // Animation duration in seconds
|
||||
delayStep={120} // Delay between squares in milliseconds
|
||||
/>
|
||||
|
||||
// Fully customized
|
||||
<Loader
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
count={4}
|
||||
duration={1.2}
|
||||
delayStep={120}
|
||||
className="my-4"
|
||||
/>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
- - `variant`
|
||||
|
||||
* Type: `default` | `secondary` | `outline`
|
||||
* Default: `default`
|
||||
* Description: Defines the style variant for the component
|
||||
|
||||
- - `size`
|
||||
|
||||
* Type: `sm` | `md` | `lg`
|
||||
* Default: `md`
|
||||
* Description: Controls the size of the loader squares
|
||||
|
||||
- - `count`
|
||||
|
||||
* Type: `number`
|
||||
* Default: `3`
|
||||
* Description: Sets the number of bouncing squares
|
||||
|
||||
- - `duration`
|
||||
|
||||
* Type: `number`
|
||||
* Default: `0.5`
|
||||
* Description: Controls the animation duration in seconds
|
||||
|
||||
- - `delayStep`
|
||||
|
||||
* Type: `number`
|
||||
* Default: `100`
|
||||
* Description: Defines the delay between squares in milliseconds
|
||||
|
||||
- - `className`
|
||||
|
||||
* Type: `string`
|
||||
* Default: `undefined`
|
||||
* Description: Allows for adding additional CSS classes for custom styling
|
||||
|
||||
- - `asChild`
|
||||
* Type: `boolean`
|
||||
* Default: `false`
|
||||
* Description: When `true`, merges the component's props onto its immediate child element
|
||||
|
||||
## Accessibility
|
||||
|
||||
The Loader component includes the following attributes:
|
||||
|
||||
- `role="status"`
|
||||
- `aria-label="Loading..."`
|
||||
|
||||
This ensures screen readers can properly announce the loading state to users.
|
||||
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: Menu
|
||||
description: Show your users a list of actions they can take. 📋
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
api_reference: https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Menu.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="menu-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/menu" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-dropdown-menu
|
||||
```
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="menu" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="menu-style-default" />
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
title: Popover
|
||||
description: A handy small component for your little input needs...😉
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Popover.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="popover-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/popover" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-popover
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="popover" />
|
||||
</ComponentInstall.Manual>
|
||||
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Usage
|
||||
|
||||
```typescript
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/retroui/Popover";
|
||||
```
|
||||
|
||||
```typescript
|
||||
<Popover>
|
||||
<PopoverTrigger>Open</PopoverTrigger>
|
||||
<PopoverContent>Place content for the popover here.</PopoverContent>
|
||||
</Popover>
|
||||
```
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="popover-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Shadowed
|
||||
|
||||
<ComponentShowcase name="popover-style-default-shadow" />
|
||||
<br />
|
||||
<br />
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Progress
|
||||
description: Let's you users know how long to wait.
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
api_reference: https://www.radix-ui.com/docs/primitives/components/progress#api-reference
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Progress.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="progress-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/progress" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-progress lucide-react
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="progress" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="progress-style-default" />
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Radio
|
||||
description: Sometimes you need to pick multiple options! That's where the Radio component comes into play.
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
api_reference: https://www.radix-ui.com/primitives/docs/components/radio-group#api-reference
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Radio.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="radio-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/radio" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-radio-group class-variance-authority
|
||||
```
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="radio" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Variants
|
||||
|
||||
<ComponentShowcase name="radio-style-variants" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Sizes
|
||||
|
||||
<ComponentShowcase name="radio-style-sizes" />
|
||||
<br />
|
||||
<br />
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Select
|
||||
description: Let your users pick what they want.
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
api_reference: https://www.radix-ui.com/primitives/docs/components/select#api-reference
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Select.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="select-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/select" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-select class-variance-authority
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="select" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="select-style-default" />
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Slider
|
||||
description: A customizable slider component with two variants.
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
api_reference: https://www.radix-ui.com/docs/primitives/components/slider#api-reference
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Slider.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="slider-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/slider" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-slider
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="slider" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="slider-style-default" />
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
title: Sonner
|
||||
description: A beautiful toast component that can grab audience attention from any place.
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
api_reference: https://sonner.emilkowal.ski/toast#api-reference
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Sonner.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="sonner-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## About
|
||||
|
||||
[Sonner](https://sonner.emilkowal.ski) is built and maintained by [Emil Kowalski](https://x.com/emilkowalski_)
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/sonner" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install sonner
|
||||
```
|
||||
|
||||
<br />
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="sonner" />
|
||||
|
||||
<br/>
|
||||
### 3. Add ``Toaster`` in your ``app/layout.tsx``
|
||||
|
||||
```tsx
|
||||
import { Toaster } from "@/components/retroui/sonner"
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head />
|
||||
<body>
|
||||
<main>{children}</main>
|
||||
<Toaster />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
```
|
||||
</ComponentInstall.Manual>
|
||||
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="sonner-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Status
|
||||
|
||||
<ComponentShowcase name="sonner-style-status" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Colored Status
|
||||
|
||||
<ComponentShowcase name="sonner-style-colored-status" />
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Switch
|
||||
description: Let users to turn on or off your marketing emails or notifications.
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
api_reference: https://www.radix-ui.com/primitives/docs/components/switch#api-reference
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Switch.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="switch-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/switch" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-switch
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="switch" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="switch-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentShowcase name="switch-style-disabled" />
|
||||
<br />
|
||||
<br />
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Tabs
|
||||
description: Switch between different views using tabs.
|
||||
lastUpdated: 08 Oct, 2024
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Tab.tsx
|
||||
---
|
||||
|
||||
### Default
|
||||
|
||||
<hr />
|
||||
<br />
|
||||
<ComponentShowcase name="tab-style-default" />
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
title: Table
|
||||
description: Display your data in a structured tabular format.
|
||||
lastUpdated: 14 Nov, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Table.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="table-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/table" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install class-variance-authority
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="table" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="table-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### With Checkbox Selection
|
||||
|
||||
<ComponentShowcase name="table-with-checkbox" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### With Sticky Header
|
||||
|
||||
<ComponentShowcase name="table-with-sticky-header" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## API Reference
|
||||
|
||||
The Table component is composed of several sub-components:
|
||||
<br />
|
||||
|
||||
- `Table` - The main table wrapper
|
||||
- `Table.Header` - Table header section (`<thead>`)
|
||||
- `Table.Body` - Table body section (`<tbody>`)
|
||||
- `Table.Footer` - Table footer section (`<tfoot>`)
|
||||
- `Table.Row` - Table row (`<tr>`)
|
||||
- `Table.Head` - Table header cell (`<th>`)
|
||||
- `Table.Cell` - Table data cell (`<td>`)
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
title: Text
|
||||
description: Show your texts in different styles. 💅
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Text.tsx
|
||||
---
|
||||
|
||||
## Headings
|
||||
|
||||
The `Text` component is a versatile React component that provides various heading styles. It leverages class-variance-authority for managing variants and allows for the customization of heading elements.
|
||||
|
||||
<hr />
|
||||
<br />
|
||||
|
||||
<ComponentShowcase name="text-headings" />
|
||||
<br />
|
||||
|
||||
#### Props
|
||||
|
||||
`className`: Additional CSS classes to customize the component's styling.
|
||||
|
||||
<br />
|
||||
|
||||
`as`: Determines the heading and text style. Default is `p`. Variants include:
|
||||
|
||||
- `"h1", "h2", "h3", "h4", "h5", "h6", "p"`
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/text" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install class-variance-authority
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="text" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Paragraph
|
||||
|
||||
<ComponentShowcase name="typography-p" />
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Textarea
|
||||
description: This pretty input makes your users want to type lots of stuff! ⌨️ ⌨️
|
||||
lastUpdated: 08 Oct, 2024
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Textarea.tsx
|
||||
---
|
||||
|
||||
### Default
|
||||
|
||||
<hr />
|
||||
<br />
|
||||
<ComponentShowcase name="textarea-style-default" />
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Table of Contents
|
||||
description: Generate a table of contents for your markdown content.
|
||||
lastUpdated: 08 Oct, 2024
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Tab.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="toc-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/toc" />
|
||||
<ComponentInstall.Manual>
|
||||
|
||||
#### 1. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="toc" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="toc-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
|
||||
### Adjust depth
|
||||
|
||||
<ComponentShowcase name="toc-style-depth" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Manual data
|
||||
|
||||
<ComponentShowcase name="toc-style-manual" />
|
||||
<br />
|
||||
<br />
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
title: Toggle Group
|
||||
description: Group of toggling buttons...🤙
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/ToggleGroup.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="toggle-group-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/toggle-group" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-toggle-group @radix-ui/react-toggle
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project `toggle.tsx`:
|
||||
|
||||
<ComponentSource name="toggle" />
|
||||
|
||||
<br />
|
||||
|
||||
#### 3. Copy the code 👇 into your project `toggle-group.tsx`:
|
||||
|
||||
<ComponentSource name="toggle-group" />
|
||||
</ComponentInstall.Manual>
|
||||
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
ToggleGroup,
|
||||
ToggleGroupItem,
|
||||
} from "@/components/retroui/toggle-group";
|
||||
```
|
||||
|
||||
```tsx
|
||||
<ToggleGroup type="single">
|
||||
<ToggleGroupItem value="a">A</ToggleGroupItem>
|
||||
<ToggleGroupItem value="b">B</ToggleGroupItem>
|
||||
<ToggleGroupItem value="c">C</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
```
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="toggle-group-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Outlined
|
||||
|
||||
<ComponentShowcase name="toggle-group-style-outlined" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Solid
|
||||
|
||||
<ComponentShowcase name="toggle-group-style-solid" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Outline Muted
|
||||
|
||||
<ComponentShowcase name="toggle-group-style-outline-muted" />
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Toggle
|
||||
description: This crazy toggling button keeps people toggling...😃
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Toggle.tsx
|
||||
---
|
||||
|
||||
<ComponentShowcase name="toggle-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/toggle" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-toggle
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="toggle" />
|
||||
</ComponentInstall.Manual>
|
||||
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="toggle-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Outlined
|
||||
|
||||
<ComponentShowcase name="toggle-style-outlined" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Solid
|
||||
|
||||
<ComponentShowcase name="toggle-style-solid" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Outline Muted
|
||||
|
||||
<ComponentShowcase name="toggle-style-outline-muted" />
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Tooltip
|
||||
description: A cool way to give your users a hint of what a component does...😉
|
||||
lastUpdated: 09 Sep, 2025
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Tooltip.tsx
|
||||
api_reference: https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference
|
||||
---
|
||||
|
||||
<ComponentShowcase name="tooltip-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/tooltip" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install @radix-ui/react-tooltip
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="tooltip" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentShowcase name="tooltip-style-default" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Primary
|
||||
|
||||
<ComponentShowcase name="tooltip-style-primary" />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Solid
|
||||
|
||||
<ComponentShowcase name="tooltip-style-solid" />
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Why another UI Library?
|
||||
lastUpdated: 7 Mar, 2024
|
||||
---
|
||||
|
||||
If you don't want to put much effort and time into designing your websites, It's hard to build something unique looking these days.
|
||||
Most of the UI libraries out here are very generic and hard to distinguish from each other.
|
||||
|
||||
<br />
|
||||
So when I started getting into `Retro/Neobrutalist design system`, I wanted to
|
||||
build my personal website with this design. But I couldn't find a UI library
|
||||
that fit what I was looking for, So I start building my own!
|
||||
|
||||
<br />
|
||||
|
||||
### Welcome to RetroUI, The UI library that let's you build unique and playful websites.
|
||||
|
||||
Follow the [Installation Guide](/docs/install) to get started.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div className="max-w-xl">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="300px"
|
||||
src="https://www.youtube.com/embed/7goHwy6k3gU?si=jwBAOm4ls_QtnN5r"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div className="max-w-xl">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="300px"
|
||||
src="https://www.youtube.com/embed/t1a0IH-KAkw?si=yvUevTYbxloSFMJm"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Installation
|
||||
description: This guide will help you get started with RetroUI.
|
||||
lastUpdated: 30 May, 2025
|
||||
---
|
||||
|
||||
RetroUI is meant to be compatible with all major `React` frameworks. But for now we are primarily working on `Next.js` , documentation for other frameworks will be live soon...
|
||||
|
||||
<br />
|
||||
## Pick Framework
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
|
||||
<Card>
|
||||
<Link href="/docs/install/nextjs">
|
||||
<Card.Header className="flex items-center justify-center space-y-4 py-8">
|
||||
<Image
|
||||
src="/images/logos/nextjs.png"
|
||||
alt="nextjs logo"
|
||||
height={50}
|
||||
width={50}
|
||||
/>
|
||||
<Card.Description className="text-xl">Next.js</Card.Description>
|
||||
</Card.Header>
|
||||
</Link>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Link href="/docs/install/vite">
|
||||
<Card.Header className="flex items-center justify-center space-y-4 py-8">
|
||||
<Image src="/images/logos/vite.png" alt="vite logo" height={50} width={50} />
|
||||
<div className="flex items-center space-x-2">
|
||||
<Card.Description className="text-xl">Vite</Card.Description>
|
||||
</div>
|
||||
</Card.Header>
|
||||
</Link>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -0,0 +1,184 @@
|
||||
---
|
||||
title: Next.js
|
||||
description: RetroUI ❤️ Next.js
|
||||
lastUpdated: 6 Mar, 2024
|
||||
---
|
||||
|
||||
### 1. Create Project
|
||||
|
||||
Run the init command to create a new Next.js project or to setup an existing one:
|
||||
|
||||
<CliCommand npmCommand="npx shadcn@latest init" />
|
||||
|
||||
<br />
|
||||
|
||||
### 2. Install utilities
|
||||
|
||||
If the `libs/utils.ts` file is not present in your project, you can install it using the following command:
|
||||
|
||||
<CliCommand npmCommand="npx shadcn@latest add https://retroui.dev/r/utils.json" />
|
||||
|
||||
<br />
|
||||
|
||||
### 3. That's it 🚀
|
||||
|
||||
Now you can start using RetroUI components in your project. You can install them through CLI or manually.
|
||||
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/button.json'" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
```sh
|
||||
npm install class-variance-authority
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="button" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
<br />
|
||||
After installing the component in your project, you can then simply import it like this:
|
||||
|
||||
```tsx
|
||||
import { Button } from "@/components/retroui/Button";
|
||||
|
||||
export default function ButtonExample() {
|
||||
return <Button>Click Me!</Button>;
|
||||
}
|
||||
```
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
### Optional
|
||||
|
||||
You are free to pick your own fonts and theme, but if you'd like to use RetroUI theme then use the following guide.
|
||||
|
||||
<br />
|
||||
|
||||
#### 1. Add Fonts
|
||||
|
||||
We are using `Archivo Black` for headings and `Space Grotesk` for everything else. You can install them from Nextjs fonts or manually from Google fonts.
|
||||
|
||||
```tsx
|
||||
import { Archivo_Black, Space_Grotesk } from "next/font/google";
|
||||
|
||||
const archivoBlack = Archivo_Black({
|
||||
subsets: ["latin"],
|
||||
weight: "400",
|
||||
variable: "--font-head",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const space = Space_Grotesk({
|
||||
subsets: ["latin"],
|
||||
weight: "400",
|
||||
variable: "--font-sans",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${archivoBlack.variable} ${space.variable}`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Add Theme
|
||||
|
||||
Save your theme as CSS variables in `global.css`:
|
||||
|
||||
```scss
|
||||
@theme {
|
||||
--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);
|
||||
}
|
||||
|
||||
: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: #aeaeae;
|
||||
--muted-foreground: #5a5a5a;
|
||||
--accent: #fae583;
|
||||
--accent-foreground: #000;
|
||||
--destructive: #e63946;
|
||||
--destructive-foreground: #fff;
|
||||
--border: #000;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--radius: 0;
|
||||
--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: #3a3a3a;
|
||||
}
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
If you need any additional help, you can feel free to ask it in our Discord community.
|
||||
@@ -0,0 +1,248 @@
|
||||
---
|
||||
title: Vite
|
||||
description: RetroUI ❤️ Vite
|
||||
lastUpdated: 30 May, 2025
|
||||
---
|
||||
|
||||
### 1. Create Project
|
||||
|
||||
Start by creating a new React project using vite. Select the React + TypeScript template:
|
||||
|
||||
<CliCommand npmCommand="npm create vite@latest" />
|
||||
|
||||
<br />
|
||||
|
||||
### 2. Install Tailwind CSS
|
||||
|
||||
Install Tailwind CSS using the following command:
|
||||
|
||||
<CliCommand npmCommand="npm install tailwindcss @tailwindcss/vite" />
|
||||
|
||||
Replace everything in src/index.css with the following:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
### 3. Edit tsconfig.json file
|
||||
|
||||
The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and `tsconfig.app.json` files:
|
||||
|
||||
```json
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
### 4. Edit tsconfig.app.json file
|
||||
Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
// ...
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
<br />
|
||||
|
||||
### 5. Update vite.config.ts
|
||||
|
||||
Add the following code to the vite.config.ts so your app can resolve paths without error:
|
||||
|
||||
<CliCommand npmCommand="npm install -D @types/node" />
|
||||
|
||||
vite.config.ts
|
||||
```ts
|
||||
import path from "path"
|
||||
import tailwindcss from "@tailwindcss/vite"
|
||||
import react from "@vitejs/plugin-react"
|
||||
import { defineConfig } from "vite"
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
### 6. Install Shadcn
|
||||
Run the `shadcn init` command to setup your project:
|
||||
|
||||
<CliCommand npmCommand="npx shadcn@latest init" />
|
||||
|
||||
You will be asked a few questions to configure components.json. Select the option you want to use.
|
||||
|
||||
<br />
|
||||
|
||||
### 7. Add RetroUI Theme
|
||||
To make your app look like RetroUI, you need to add the theme to your app. You can later customize it to your liking.
|
||||
|
||||
#### 1. Install fonts
|
||||
|
||||
We are using `Archivo Black` for headings and `Space Grotesk` for everything else. You can install them from Google fonts.
|
||||
Once your have the fonts, import them in your `index.html` or `styles.css` file:
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300..700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
```
|
||||
or,
|
||||
|
||||
```css
|
||||
/* styles.css */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
||||
```
|
||||
<br />
|
||||
|
||||
#### 2. Add Theme
|
||||
|
||||
Save your theme as CSS variables in `styles.css` file:
|
||||
|
||||
```scss
|
||||
@theme {
|
||||
--font-head: 'Archivo Black', sans-serif;
|
||||
--font-sans: 'Space Grotesk', sans-serif;
|
||||
--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);
|
||||
}
|
||||
|
||||
: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: #aeaeae;
|
||||
--muted-foreground: #5a5a5a;
|
||||
--accent: #fae583;
|
||||
--accent-foreground: #000;
|
||||
--destructive: #e63946;
|
||||
--destructive-foreground: #fff;
|
||||
--border: #000;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--radius: 0;
|
||||
--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: #3a3a3a;
|
||||
}
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
### 8. That's it!
|
||||
|
||||
Now you can start using RetroUI components in your project. You can install them through CLI or manually.
|
||||
|
||||
<br />
|
||||
|
||||
<ComponentInstall>
|
||||
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/button.json'" />
|
||||
<ComponentInstall.Manual>
|
||||
#### 1. Install dependencies:
|
||||
|
||||
<CliCommand npmCommand="npm install class-variance-authority" />
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your project:
|
||||
|
||||
<ComponentSource name="button" />
|
||||
|
||||
</ComponentInstall.Manual>
|
||||
</ComponentInstall>
|
||||
|
||||
After installing the component in your project, you can then simply import it like this:
|
||||
|
||||
```tsx
|
||||
import { Button } from "@/components/retroui/Button";
|
||||
|
||||
export default function ButtonExample() {
|
||||
return <Button>Click Me!</Button>;
|
||||
}
|
||||
```
|
||||
|
||||
If you need any additional help, you can feel free to ask it in our [Discord community](https://discord.gg/Jum3NJxK6Q).
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: cn
|
||||
description: A utilily function that saves you from style conflicts.
|
||||
lastUpdated: 17 Oct, 2024
|
||||
links:
|
||||
source: https://github.com/logging-studio/RetroUI/blob/main/lib/utils.ts
|
||||
---
|
||||
|
||||
The `cn` utility function combines `clsx` and `tw-merge`.
|
||||
This enables you to construct className strings conditionally without having to worry about Tailwind CSS style conflicts.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## Installation
|
||||
|
||||
#### 1. Install the dependencies:
|
||||
|
||||
```sh
|
||||
npm install clsx tailwind-merge
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
#### 2. Copy the code 👇 into your `lib/utils.ts` file:
|
||||
|
||||
```ts
|
||||
import clsx from "clsx";
|
||||
import { ClassNameValue, twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...classes: ClassNameValue[]) {
|
||||
return twMerge(clsx(classes));
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user