### Install RetroUI Context Menu CLI Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/context-menu.mdx Installs the RetroUI Context Menu component using the shadcn CLI. This is the recommended installation method for seamless integration. ```bash npx shadcn@latest add @retroui/context-menu ``` -------------------------------- ### Install Bar Chart Component (CLI) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/charts/bar-chart.mdx Installs the Bar Chart component into your project using the RetroUI CLI. This is the recommended method for quick setup. ```sh npx shadcn@latest add 'https://retroui.dev/r/bar-chart.json' ``` -------------------------------- ### Install RetroUI Alert Component CLI Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/alert.mdx Installs the RetroUI Alert component into your project using the shadcn-ui CLI. This is the recommended installation method for seamless integration. ```bash npx shadcn@latest add @retroui/alert ``` -------------------------------- ### Install Tailwind CSS and Vite Plugin Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/vite.mdx Installs Tailwind CSS and its Vite plugin. After installation, the main CSS file should be updated to import Tailwind directives. ```bash npm install tailwindcss @tailwindcss/vite ``` ```css @import "tailwindcss"; ``` -------------------------------- ### Install RetroUI Command Component Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/command.mdx Instructions for installing the RetroUI Command component using either the CLI or manual dependency installation. Requires 'class-variance-authority' and 'cmdk'. ```sh npx shadcn@latest add @retroui/command ``` ```sh npm install class-variance-authority cmdk ``` -------------------------------- ### Install RetroUI Menu with npm Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/menu.mdx Installs the RetroUI Menu component and its dependencies using the shadcn-ui CLI. This is the recommended installation method. ```bash npx shadcn@latest add @retroui/menu ``` -------------------------------- ### Install RetroUI Table Component Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/table.mdx Instructions for installing the RetroUI Table component. This includes using the shadcn CLI or manually installing dependencies and copying the component source code into your project. ```sh npx shadcn@latest add @retroui/table ``` ```sh npm install class-variance-authority ``` -------------------------------- ### Install RetroUI Alert Dependencies and Code Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/alert.mdx Manually installs the necessary dependencies for the RetroUI Alert component and provides the source code to copy into your project. Ensure you have 'class-variance-authority' installed. ```bash npm install class-variance-authority ``` -------------------------------- ### Install RetroUI Loader Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/loader.mdx Instructions for installing the RetroUI Loader component. This can be done via npm with the shadcn CLI or manually by installing dependencies and copying the component source code. ```shell npx shadcn@latest add @retroui/loader ``` ```shell npm install class-variance-authority ``` -------------------------------- ### Install RetroUI Label Component Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/label.mdx Instructions for installing the RetroUI Label component using either the shadcn CLI or manual dependency installation and code copying. Includes the npm command for CLI installation and the required Radix UI label package. ```bash npx shadcn@latest add @retroui/label ``` ```bash npm install @radix-ui/react-label ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/logging-stuff/retroui/blob/main/CONTRIBUTING.md This command installs all necessary project dependencies using the pnpm package manager. This step is crucial before running or developing the project. ```bash pnpm i ``` -------------------------------- ### Install Sonner Component Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/sonner.mdx Instructions for installing the Sonner toast component. This includes using the shadcn CLI for automatic integration or manually installing the 'sonner' npm package. ```shell npx shadcn@latest add @retroui/sonner ``` ```shell npm install sonner ``` -------------------------------- ### Install RetroUI Popover Component Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/popover.mdx Instructions for installing the RetroUI Popover component using either the npm CLI or manual installation of dependencies and code. Ensure you have the necessary Radix UI dependencies installed. ```sh npx shadcn@latest add @retroui/popover ``` ```sh npm install @radix-ui/react-popover ``` -------------------------------- ### Install RetroUI Toggle with npm Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/toggle.mdx Installs the RetroUI Toggle component using the shadcn CLI with the npm command. ```bash npx shadcn@latest add @retroui/toggle ``` -------------------------------- ### Install RetroUI Utilities Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/nextjs.mdx Installs the necessary utility files for RetroUI into your project if the libs/utils.ts file is missing. ```bash npx shadcn@latest add https://retroui.dev/r/utils.json ``` -------------------------------- ### Initialize Vite React Project Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/vite.mdx Command to create a new React project using Vite with the React + TypeScript template. This sets up the basic project structure. ```bash npm create vite@latest ``` -------------------------------- ### Import and Use RetroUI Button Component Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/nextjs.mdx Example of how to import and use the RetroUI Button component in a Next.js application after installation. ```tsx import { Button } from "@/components/retroui/Button"; export default function ButtonExample() { return ; } ``` -------------------------------- ### Run RetroUI Project Source: https://github.com/logging-stuff/retroui/blob/main/CONTRIBUTING.md This command starts the RetroUI development server, allowing you to view and test the project locally. It typically recompiles code and hot-reloads on changes. ```bash pnpm dev ``` -------------------------------- ### Install RetroUI Accordion Dependencies (npm) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/accordion.mdx This snippet shows the npm command to install the necessary dependencies for the RetroUI Accordion component, including @radix-ui/react-accordion and lucide-react. Ensure these are installed before proceeding. ```sh npm install @radix-ui/react-accordion lucide-react ``` -------------------------------- ### Install Dependencies for cn Utility Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/utils/cn.mdx Installs the necessary dependencies, clsx and tailwind-merge, required for the cn utility function. These are typically installed using a package manager like npm. ```shell npm install clsx tailwind-merge ``` -------------------------------- ### Install RetroUI Toggle Group CLI Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/toggle-group.mdx Installs the RetroUI Toggle Group component using the shadcn CLI. This is a quick way to add the component to your project. ```bash npx shadcn@latest add @retroui/toggle-group ``` -------------------------------- ### Install Radix UI Slider Dependency Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/slider.mdx This snippet shows the command to install the necessary Radix UI Slider dependency for the RetroUI component. It is a direct npm installation command. ```sh npm install @radix-ui/react-slider ``` -------------------------------- ### Install RetroUI Select Dependencies Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/select.mdx Installs the necessary dependencies for the RetroUI Select component, including Radix UI Select and class-variance-authority. This is a prerequisite for using the component. ```shell npm install @radix-ui/react-select class-variance-authority ``` -------------------------------- ### Install Pie Chart Dependencies (Shell) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/charts/pie-chart.mdx Installs the 'recharts' library, a peer dependency for the Pie Chart component. This command should be run in your project's terminal. ```sh npm install recharts ``` -------------------------------- ### Install RetroUI Avatar using npm Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/avatar.mdx Installs the RetroUI Avatar component and its dependencies using the shadcn CLI. This is the recommended method for integrating the component into your project. ```bash npx shadcn@latest add @retroui/avatar ``` -------------------------------- ### Install Dialog Dependencies (Shell) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/dialog.mdx Installs necessary dependencies for the RetroUI Dialog component using npm. Requires @radix-ui/react-dialog, @radix-ui/react-visually-hidden, and tailwindcss-animate. ```shell npm install @radix-ui/react-dialog @radix-ui/react-visually-hidden tailwindcss-animate ``` -------------------------------- ### RetroUI Card Component Examples (React/TSX) Source: https://context7.com/logging-stuff/retroui/llms.txt Illustrates the use of the RetroUI Card component, showcasing its composable structure with header, title, description, and content sections. Examples include basic usage and custom styling with hover effects. ```tsx import { Card } from "@/components/retroui/Card"; Product Feature Discover the amazing capabilities of our new product.

Detailed content goes here with images, text, or any React components.

 // Custom styling Custom Card ``` -------------------------------- ### Install RetroUI Button Dependencies (npm) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/button.mdx Installs the necessary RetroUI Button component and its dependencies using the shadcn CLI. This command adds the button component and any required packages to your project. ```bash npx shadcn@latest add @retroui/button ``` -------------------------------- ### RetroUI Dialog Component Examples (React/TSX) Source: https://context7.com/logging-stuff/retroui/llms.txt Shows how to implement the RetroUI Dialog component, which is built on Radix UI. Examples cover triggering the dialog, structuring content with header, body, and footer, and utilizing different size variants. ```tsx import { Dialog } from "@/components/retroui/Dialog"; import { Button } from "@/components/retroui/Button"; Edit Profile
// Size variants Small Dialog Large Dialog Extra Large Dialog // Custom overlay No backdrop ``` -------------------------------- ### RetroUI Loader Usage Examples Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/loader.mdx Demonstrates various ways to use the RetroUI Loader component, including default usage, applying different variants and sizes, and custom configurations for animation properties like count, duration, and delay. ```tsx import { Loader } from "@/components/ui/loader" // Default // With variants // Custom configuration // Fully customized ``` -------------------------------- ### Install RetroUI Button Component via CLI Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/nextjs.mdx Command to add the RetroUI button component to your project using the CLI. ```bash npx shadcn@latest add 'https://retroui.dev/r/button.json' ``` -------------------------------- ### RetroUI Input Component Examples (React/TSX) Source: https://context7.com/logging-stuff/retroui/llms.txt Provides examples for the RetroUI Input component, demonstrating basic input fields, inputs with labels, and inputs with error states using `aria-invalid`. It also shows different input types like password, number, and date. ```tsx import { Input } from "@/components/retroui/Input"; import { Label } from "@/components/retroui/Label"; // Basic input // Input with label
// Error state // Different input types ``` -------------------------------- ### Manual Installation of RetroUI Menu Dependencies Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/menu.mdx Manually installs the necessary dependency for the RetroUI Menu component. This involves adding the Radix UI DropdownMenu package to your project. ```sh npm install @radix-ui/react-dropdown-menu ``` -------------------------------- ### Install RetroUI Toggle Dependencies Manually Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/toggle.mdx Manually installs the necessary dependency for the RetroUI Toggle component. This involves adding the Radix UI Toggle package to your project. ```sh npm install @radix-ui/react-toggle ``` -------------------------------- ### Import RetroUI Google Fonts Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/vite.mdx Adds necessary Google Fonts ('Archivo Black' and 'Space Grotesk') to the project. This can be done either in the `index.html` file using `` tags or in a CSS file using `@import`. ```html ``` ```css /* styles.css */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); ``` -------------------------------- ### Install Progress Dependencies (npm) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/progress.mdx Installs the necessary npm packages for the RetroUI Progress component, including Radix UI's progress primitive and Lucide React icons. These are essential for the component's functionality. ```sh npm install @radix-ui/react-progress lucide-react ``` -------------------------------- ### Add RetroUI Select via CLI Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/select.mdx Adds the RetroUI Select component to your project using the shadcn CLI. This command automates the installation of the component and its dependencies. ```shell npx shadcn@latest add @retroui/select ``` -------------------------------- ### Install @radix-ui/react-avatar dependency Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/avatar.mdx Installs the necessary Radix UI Avatar package, which is a peer dependency for the RetroUI Avatar component. This command should be run before copying the component's source code. ```bash npm install @radix-ui/react-avatar ``` -------------------------------- ### Install Breadcrumb Dependencies (npm) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/breadcrumb.mdx Installs the necessary dependencies for the RetroUI Breadcrumb component using npm. Requires 'lucide-react' for icons and 'class-variance-authority' for utility classes. ```sh npm install lucide-react class-variance-authority ``` -------------------------------- ### Install Toggle and Toggle Group Dependencies Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/toggle-group.mdx Manually installs the necessary Radix UI dependencies for the Toggle and Toggle Group components. These are required for the Toggle Group to function correctly. ```sh npm install @radix-ui/react-toggle-group @radix-ui/react-toggle ``` -------------------------------- ### Install Breadcrumb with shadcn-ui CLI Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/breadcrumb.mdx Installs the RetroUI Breadcrumb component into your project using the shadcn-ui CLI. This command handles dependency management and adds the component to your project. ```sh npx shadcn@latest add @retroui/breadcrumb ``` -------------------------------- ### Install Radio Component Dependencies (npm) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/radio.mdx Installs the necessary dependencies for the RetroUI Radio component using npm. This includes Radix UI's radio group and class-variance-authority for styling. ```sh npm install @radix-ui/react-radio-group class-variance-authority ``` -------------------------------- ### Install Checkbox Dependencies (npm) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/checkbox.mdx Installs the necessary dependencies for the RetroUI Checkbox component, including Radix UI's checkbox primitive, `class-variance-authority` for utility styling, and `lucide-react` for icons. ```sh npm install @radix-ui/react-checkbox class-variance-authority lucide-react ``` -------------------------------- ### RetroUI Button Component Examples (React/TSX) Source: https://context7.com/logging-stuff/retroui/llms.txt Demonstrates the usage of the RetroUI Button component, including different variants (default, secondary, outline, link) and sizes (sm, md, lg, icon). It also shows how to use the Button component as a child element and with custom styling. ```tsx import { Button } from "@/components/retroui/Button"; // Default button // Button variants // Button sizes // Icon button // As child component (renders as link) ``` -------------------------------- ### Add RetroUI Radio Component (shadcn-ui CLI) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/radio.mdx Adds the RetroUI Radio component to your project using the shadcn-ui CLI. This command handles the installation of the component and its associated dependencies. ```sh npx shadcn@latest add @retroui/radio ``` -------------------------------- ### Configure TypeScript Base URL and Paths Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/vite.mdx Modifies `tsconfig.json` and `tsconfig.app.json` to set the `baseUrl` and `paths` compiler options. This enables module path aliasing, typically for the './src' directory, aliased as '@'. ```json { "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } } ``` ```json { "compilerOptions": { // ... "baseUrl": ".", "paths": { "@/*": [ "./src/*" ] } // ... } } ``` -------------------------------- ### Add Line Chart via CLI (npx) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/charts/line-chart.mdx Adds the Line Chart component to your project using the RetroUI CLI. This command simplifies the setup process by fetching and integrating the necessary files. ```sh npx shadcn@latest add 'https://retroui.dev/r/line-chart.json' ``` -------------------------------- ### Format Number with Chakra UI Source: https://github.com/logging-stuff/retroui/blob/main/content/blogs/top-5-react-ui-library.mdx This snippet demonstrates how to use the FormatNumber component from Chakra UI to display a number as currency. It requires the Chakra UI library to be installed. ```javascript import { FormatNumber } from "@chakra-ui/react"; ; ``` -------------------------------- ### Define RetroUI Theme Variables (SCSS) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/vite.mdx This snippet defines the theme variables for RetroUI using SCSS, including fonts, radii, shadows, and various color schemes for both light and dark modes. These variables are essential for customizing the look and feel of the UI components. ```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; } ``` -------------------------------- ### Configure Vite Path Aliasing Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/vite.mdx Updates `vite.config.ts` to include the `tailwindcss` plugin and configure path aliases using Node.js `path` module. This allows the application to resolve module paths like '@' to './src'. ```typescript 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"), }, }, }) ``` -------------------------------- ### Basic Button with Shadcn/ui Source: https://github.com/logging-stuff/retroui/blob/main/content/blogs/top-10-nextjs-ui-library.mdx Demonstrates how to use a basic button component from Shadcn/ui. This library utilizes Tailwind CSS and Radix UI primitives for customization. It requires a manual setup by copying components into your project, offering full control over styling and behavior. ```tsx import { Button } from "@/components/ui/button"; ``` -------------------------------- ### Render a button with Mantine Source: https://github.com/logging-stuff/retroui/blob/main/content/blogs/top-10-nextjs-ui-library.mdx Demonstrates how to render a basic outline button using Mantine's Button component. This requires the '@mantine/core' package to be installed. The component accepts various props for styling and behavior. ```tsx import { Button } from '@mantine/core'; ``` -------------------------------- ### Initialize Next.js Project Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/nextjs.mdx Command to create a new Next.js project or set up an existing one with RetroUI. ```bash npx shadcn@latest init ``` -------------------------------- ### Add Component Documentation in Markdown Source: https://github.com/logging-stuff/retroui/blob/main/CONTRIBUTING.md This Markdown snippet demonstrates how to document a new component within RetroUI. It includes frontmatter for metadata and uses a `` tag to embed the component's preview. ```markdown --- title: Badge description: The component that looks like a button but isn't clickable! lastUpdated: 08 Oct, 2024 --- ... ### New Component // name of the component in the registry ``` -------------------------------- ### Clone RetroUI Repository Source: https://github.com/logging-stuff/retroui/blob/main/CONTRIBUTING.md This command clones the RetroUI repository from GitHub to your local machine. Ensure you replace '' with your actual GitHub username. ```bash git clone https://github.com//retroui.git ``` -------------------------------- ### Pie Chart Component API Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/charts/pie-chart.mdx Reference for the props available for the Pie Chart component. ```APIDOC ## Pie Chart Component API This section details the props available for configuring the Pie Chart component. ### Props #### `data` - **Type**: `Record[]` - **Default**: `[]` - **Description**: Array of data objects to display in the chart. #### `dataKey` - **Type**: `string` - **Default**: - - **Description**: The key within each data object that holds the numerical value for the chart segments. #### `nameKey` - **Type**: `string` - **Default**: - - **Description**: The key within each data object that holds the name or category for each segment. #### `colors` - **Type**: `string[]` - **Default**: `["var(--chart-1)", ...]` - **Description**: An array of CSS color strings to style the pie segments. #### `innerRadius` - **Type**: `number` - **Default**: `0` - **Description**: Sets the inner radius of the pie chart. A value greater than 0 will render the chart as a donut chart. #### `outerRadius` - **Type**: `number` - **Default**: `80` - **Description**: Sets the outer radius of the pie chart. #### `tooltipBgColor` - **Type**: `string` - **Default**: `"var(--background)"` - **Description**: Specifies the background color for the chart tooltips. #### `tooltipBorderColor` - **Type**: `string` - **Default**: `"var(--border)"` - **Description**: Specifies the border color for the chart tooltips. #### `valueFormatter` - **Type**: `(value: number) => string` - **Default**: `(value) => value.toString()` - **Description**: A function to format the numerical values displayed in the tooltips or labels. #### `showTooltip` - **Type**: `boolean` - **Default**: `true` - **Description**: Controls the visibility of tooltips when hovering over chart segments. #### `className` - **Type**: `string` - **Default**: - - **Description**: Allows additional CSS classes to be applied to the chart container for custom styling. ``` -------------------------------- ### Register Component Preview in Configuration Source: https://github.com/logging-stuff/retroui/blob/main/CONTRIBUTING.md This JavaScript code snippet shows how to add a new component's preview to the RetroUI's component registry. It uses a lazy import to load the preview component efficiently. ```javascript export const componentConfig = { registry: { ... "new-component": { name: "new-component", filePath: "preview/components/new-component.tsx", preview: lazy(() => import("@/preview/components/new-component")), }, }, }; ``` -------------------------------- ### Integrate Sonner Toaster in Layout Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/sonner.mdx Example of how to add the Sonner Toaster component to your application's root layout file (e.g., app/layout.tsx) to enable toast notifications throughout your app. ```tsx import { Toaster } from "@/components/retroui/sonner" export default function RootLayout({ children }) { return (
{children}
) } ``` -------------------------------- ### Table Component in React Source: https://context7.com/logging-stuff/retroui/llms.txt Details the Table component from '@/components/retroui/Table', designed for displaying tabular data. It includes support for captions, headers, body, footers, rows, and cells, with features like hover effects and responsive overflow. An example with integrated checkboxes is also provided. ```tsx import { Table } from "@/components/retroui/Table"; A list of recent invoices Invoice Status Amount INV001 Paid $250.00 INV002 Pending $150.00 Total $400.00
// With checkboxes Name Email {users.map((user) => ( {user.name} {user.email} ))}
``` -------------------------------- ### Line Chart API Reference Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/charts/line-chart.mdx Reference for the properties available for the Line Chart component, detailing their types, default values, and descriptions. ```APIDOC ## Line Chart Component API Reference This section details the properties that can be configured for the Line Chart component. ### Props #### `data` - **Type**: `Record[]` - **Default**: `[]` - **Description**: Array of data objects to display in the chart. #### `index` - **Type**: `string` - **Default**: - - **Description**: The key used for the x-axis (category) data. #### `categories` - **Type**: `string[]` - **Default**: `[]` - **Description**: An array of keys representing the data values to be displayed as lines on the chart. #### `strokeColors` - **Type**: `string[]` - **Default**: `["var(--foreground)"]` - **Description**: An array of stroke colors to be used for each line. #### `strokeWidth` - **Type**: `number` - **Default**: `2` - **Description**: The width of the line strokes. #### `dotSize` - **Type**: `number` - **Default**: `4` - **Description**: The size of the data point dots on the lines. #### `tooltipBgColor` - **Type**: `string` - **Default**: `"var(--background)"` - **Description**: The background color for the chart tooltips. #### `tooltipBorderColor` - **Type**: `string` - **Default**: `"var(--border)"` - **Description**: The border color for the chart tooltips. #### `gridColor` - **Type**: `string` - **Default**: `"var(--muted)"` - **Description**: The color of the grid lines within the chart. #### `valueFormatter` - **Type**: `(value: number) => string` - **Default**: `(value) => value.toString()` - **Description**: A function to format the display of numerical values. #### `showGrid` - **Type**: `boolean` - **Default**: `true` - **Description**: Controls whether grid lines are displayed on the chart. #### `showTooltip` - **Type**: `boolean` - **Default**: `true` - **Description**: Controls whether tooltips are shown when hovering over data points. #### `className` - **Type**: `string` - **Default**: - - **Description**: Allows for additional CSS classes to be applied to the component for custom styling. ``` -------------------------------- ### RetroUI Theme Configuration (SCSS) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/nextjs.mdx Defines CSS variables for fonts, radius, shadows, and colors, including dark mode variations, for the RetroUI theme 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; } ``` -------------------------------- ### Export Component from Index Files Source: https://github.com/logging-stuff/retroui/blob/main/CONTRIBUTING.md These TypeScript code snippets demonstrate how to export a component from its dedicated index file and then from the main components index file. This makes the component easily importable elsewhere. ```typescript export * from "./NewComponent"; ``` -------------------------------- ### Import and Use RetroUI Popover Component (TypeScript) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/components/popover.mdx Demonstrates how to import the Popover, PopoverContent, and PopoverTrigger components from the RetroUI library and how to structure them for basic usage. This is essential for integrating the popover functionality into your application. ```typescript import { Popover, PopoverContent, PopoverTrigger, } from "@/components/retroui/Popover"; ``` ```typescript Open Place content for the popover here. ``` -------------------------------- ### Create Component Preview in TypeScript Source: https://github.com/logging-stuff/retroui/blob/main/CONTRIBUTING.md This TypeScript code defines a preview component for a new RetroUI component. It's typically used for showcasing the component's appearance in documentation or a storybook-like environment. ```typescript export default function NewComponentStyle() { return ( Error ); } ``` -------------------------------- ### Configure Google Fonts for RetroUI Theme Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/install/nextjs.mdx Sets up Archivo Black for headings and Space Grotesk for body text using Next.js font optimization. This code should be part of your RootLayout component. ```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 ( {children} ); } ``` -------------------------------- ### Mantine CodeHighlight Component Usage Source: https://github.com/logging-stuff/retroui/blob/main/content/blogs/top-5-react-ui-library.mdx Demonstrates how to use the CodeHighlight component from the Mantine library to display code snippets with syntax highlighting and a copy-to-clipboard feature. This component is useful for documentation sites or code sharing features within applications. It requires the '@mantine/code-highlight' package. ```jsx import { CodeHighlight} from "@mantine/code-highlight"; const exampleCode = ` function Button() { return ; } `; function Demo() { return ( ); } ``` -------------------------------- ### Retroui Component Properties Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/charts/area-chart.mdx This section details the properties accepted by the Retroui component, which is used for displaying logged data. It covers data input, axis configuration, visual styles, and formatting options. ```APIDOC ## Retroui Component Configuration ### Description This section details the properties for the Retroui component, used for visualizing logged data. It includes configuration for data display, axes, colors, tooltips, and grid lines. ### Method N/A (Component Properties) ### Endpoint N/A (Component Properties) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```json { "data": [ {"date": "2023-01-01", "views": 100, "clicks": 50}, {"date": "2023-01-02", "views": 120, "clicks": 60} ], "index": "date", "categories": ["views", "clicks"], "fill": "gradient", "strokeColors": ["#00FF00", "#FF0000"], "fillColors": ["rgba(0, 255, 0, 0.5)", "rgba(255, 0, 0, 0.5)"], "tooltipBgColor": "#FFFFFF", "tooltipBorderColor": "#CCCCCC", "gridColor": "#EEEEEE", "valueFormatter": "(value) => `$${value}`", "showGrid": true, "showTooltip": true, "className": "my-custom-class" } ``` ### Response #### Success Response (200) N/A (Component Properties) #### Response Example N/A (Component Properties) ### Properties Table | Prop | Type | Default | Description | |---|---|---|---| | `data` | `Record[]` | `[]` | Array of data objects to display. | | `index` | `string` | - | Key for the x-axis (category) data. | | `categories` | `string[]` | `[]` | Array of keys for the data values to display as areas. | | `fill` | `"gradient" | "solid"` | `"gradient"` | Fill style for the areas. | | `strokeColors` | `string[]` | `["var(--foreground)"]` | Array of stroke colors for the areas. | | `fillColors` | `string[]` | `["var(--primary)"]` | Array of fill colors for the areas. | | `tooltipBgColor` | `string` | `"var(--background)"` | Background color for tooltips. | | `tooltipBorderColor` | `string` | `"var(--border)"` | Border color for tooltips. | | `gridColor` | `string` | `"var(--muted)"` | Color for the grid lines. | | `valueFormatter` | `(value: number) => string` | `(value) => value.toString()` | Function to format values. | | `showGrid` | `boolean` | `true` | Whether to show grid lines. | | `showTooltip` | `boolean` | `true` | Whether to show tooltips on hover. | | `className` | `string` | - | Additional CSS classes. | ``` -------------------------------- ### Pie Chart Component Implementation (TypeScript) Source: https://github.com/logging-stuff/retroui/blob/main/content/docs/charts/pie-chart.mdx This TypeScript code snippet represents the Pie Chart component itself, likely intended for use within a React application. It leverages external libraries for rendering charts. The specific implementation details are not fully shown, but it indicates the component's name and its expected usage context. ```typescript import React from "react"; type PieChartProps = { data: Record[] dataKey: string nameKey: string colors?: string[]; innerRadius?: number; outerRadius?: number; tooltipBgColor?: string; tooltipBorderColor?: string; valueFormatter?: (value: number) => string; showTooltip?: boolean; className?: string; }; export function PieChart({ data, dataKey, nameKey, colors, innerRadius = 0, outerRadius = 80, tooltipBgColor = "var(--background)", tooltipBorderColor = "var(--border)", valueFormatter = (value: number) => value.toString(), showTooltip = true, className, }: PieChartProps) { return (
{/* Chart rendering logic using recharts would go here */}

Pie Chart Component

Data Key: {dataKey}

Name Key: {nameKey}

Inner Radius: {innerRadius}

Outer Radius: {outerRadius}

); } ``` -------------------------------- ### Select Component in React Source: https://context7.com/logging-stuff/retroui/llms.txt Illustrates the implementation of the Select component from '@/components/retroui/Select'. This component offers dropdown functionality with options that can be grouped and separated. It includes animated transitions for opening and closing. ```tsx import { Select } from "@/components/retroui/Select"; // Grouped options ``` -------------------------------- ### Render a button with Ant Design Source: https://github.com/logging-stuff/retroui/blob/main/content/blogs/top-10-nextjs-ui-library.mdx Illustrates rendering a primary button using Ant Design's Button component. This requires the 'antd' package. Ant Design is known for its comprehensive set of components suitable for enterprise applications. ```tsx import { Button } from 'antd'; ``` -------------------------------- ### Alert Component in React Source: https://context7.com/logging-stuff/retroui/llms.txt Showcases the Alert component from '@/components/retroui/Alert', providing notification messages. It supports different variants (default, solid) and status types (error, success, warning, info), and can optionally include icons. ```tsx import { Alert } from "@/components/retroui/Alert"; import { InfoIcon, AlertTriangle, CheckCircle } from "lucide-react"; // Basic alert Heads up! You can add components to your app using the CLI. // Status variants Success Your changes have been saved. Error There was a problem with your request. Warning Please review your input. // With icon
Information New features are available.
// Solid variant Dark Alert High contrast alert message. ```