### Installing dependencies

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-portfolio/quick-start.mdx

Installs the necessary project dependencies listed in the package.json file using npm.

```bash
npm install
```

--------------------------------

### Installing Dependencies for Magic Store (Bash)

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-store/quick-start.mdx

Installs the necessary project dependencies using npm.

```bash
npm install
```

--------------------------------

### Create a new Once UI app

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/quick-start.mdx

Create a new Once UI application using the official starter repository, which installs dependencies and sets up the recommended project structure.

```bash
npx create-once-ui-app@latest my-app
```

```bash
git clone https://github.com/once-ui-system/nextjs-starter.git
```

--------------------------------

### Installing Project Dependencies (Bash)

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/quick-start.mdx

After navigating into the newly created or cloned project directory (`my-app`), this command installs all required Node.js dependencies listed in the `package.json` file using npm.

```bash
cd my-app && npm install
```

--------------------------------

### Install Dependencies - Bash

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-docs/quick-start.mdx

Installs the necessary project dependencies listed in the package.json file using npm.

```bash
npm install
```

--------------------------------

### Installing Dependencies (Bash)

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-bio/quick-start.mdx

Installs the required Node.js dependencies for the Magic Bio project using npm, preparing the project for development.

```bash
npm install
```

--------------------------------

### Add Once UI to an existing project

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/quick-start.mdx

Integrate Once UI into an existing project by installing its core package using npm.

```bash
npm install @once-ui-system/core
```

--------------------------------

### Starting the development server

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-portfolio/quick-start.mdx

Starts the local development server for the Magic Portfolio project using the 'dev' script defined in package.json.

```bash
npm run dev
```

--------------------------------

### Starting the Magic Store Development Server (Bash)

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-store/quick-start.mdx

Starts the local development server for the Magic Store application.

```bash
npm run dev
```

--------------------------------

### Starting the Development Server (Bash)

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-bio/quick-start.mdx

Starts the local development server for the Magic Bio project, allowing you to view and test the application during development.

```bash
npm run dev
```

--------------------------------

### Start Development Server - Bash

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-docs/quick-start.mdx

Starts the local development server for the Magic Docs project, typically enabling live reloading and development features.

```bash
npm run dev
```

--------------------------------

### Cloning the Magic Store Repository (Bash)

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-store/quick-start.mdx

Clones the Magic Store git repository from GitHub to your local machine.

```bash
git clone https://github.com/once-ui-system/magic-store.git
```

--------------------------------

### Cloning the repository

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-portfolio/quick-start.mdx

Clones the Magic Portfolio git repository from GitHub to your local machine.

```bash
git clone https://github.com/once-ui-system/magic-portfolio.git
```

--------------------------------

### Rendering Product Cards with Once UI Components in JavaScript

Source: https://github.com/once-ui-system/mcp/blob/main/content/get-started.mdx

This snippet demonstrates how to dynamically render a grid of product cards using Once UI components like Grid, Card, Row, Avatar, Text, Media, and Column. It maps over an array of template data to create interactive cards with titles, descriptions, images, and links, showcasing a common pattern for displaying product listings or portfolio items.

```JavaScript
{[
  {
    title: "Once UI Core",
    description: "The design system that powers all our products.",
    image: "/images/docs/once-ui.jpg",
    href: "/once-ui/quick-start"
  },
  {
    title: "Magic Portfolio",
    description: "Showcase your work with our beautiful portfolio template.",
    image: "/images/docs/magic-portfolio.jpg",
    href: "/magic-portfolio/quick-start"
  },
  {
    title: "Magic Docs",
    description: "Create beautiful documentations like this one.",
    image: "/images/docs/magic-docs.jpg",
    href: "/magic-docs/quick-start"
  },
  {
    title: "Magic Store",
    description: "Start selling merch with a ready-made store.",
    image: "/images/docs/magic-store.jpg",
    href: "/magic-store/quick-start"
  },
  {
    title: "Magic Bio",
    description: "A modern link-in-bio solution for creators.",
    image: "/images/docs/magic-bio.jpg",
    href: "/magic-bio/quick-start"
  }
].map((template, index) => (
  <Card
    key={index}
    href={template.href}
    fillWidth
    radius="l"
    border="neutral-alpha-medium"
    direction="column"
  >
    <Row paddingX="20" paddingY="12" gap="12" vertical="center">
    <Avatar style={{background: "black"}} src="/trademark/icon-dark.svg" size="s" />
    <Text variant="label-default-s">Once UI</Text>
    </Row>
    <Media
      border="neutral-alpha-medium"
      src={template.image} 
      aspectRatio="16/9" 
      radius="l" 
      sizes="400px" 
    />
    <Column fillWidth padding="20" gap="4" horizontal="start">
      <Text 
        variant="heading-default-xs" 
        onBackground="neutral-strong"
      >
        {template.title}
      </Text>
      <Text 
        variant="body-default-s" 
        onBackground="neutral-weak"
        wrap="balance"
      >
        {template.description}
      </Text>
    </Column>
  </Card>
))}
```

--------------------------------

### Starting Local Development Server (Bash)

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/quick-start.mdx

This command initiates the local development server for the Once UI application. It typically enables hot-reloading and provides a local URL to view the application during development.

```bash
npm run dev
```

--------------------------------

### Render a Line Chart with Once UI Data Viz Module

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

This example demonstrates how to use the `LineChart` component from the Once UI data visualization module. It showcases configuring chart properties like title, axis, curve, date formatting, legend display, series keys, and providing structured data for GDP growth and CO₂ emissions over time.

```tsx
<LineChart
  marginTop="16"
  marginBottom="24"
  title="GDP Growth vs. CO₂ Emissions"
  axis="x"
  curve="linear"
  date={{
    start: new Date("2000-01-01"),
    end: new Date("2024-01-01"),
    format: "yyyy"
  }}
  legend={{
    display: true,
    position: "top-left"
  }}
  series={[
    { key: "GDP per Capita (USD)" },
    { key: "CO₂ per Capita (kg)" }
  ]}
  data={[
    { date: "2000-01-01", "CO₂ per Capita (kg)": 40000, "GDP per Capita (USD)": 5270 },
    { date: "2001-01-01", "CO₂ per Capita (kg)": 41000, "GDP per Capita (USD)": 5400 },
    { date: "2002-01-01", "CO₂ per Capita (kg)": 42000, "GDP per Capita (USD)": 5580 },
    { date: "2003-01-01", "CO₂ per Capita (kg)": 43000, "GDP per Capita (USD)": 5840 },
    { date: "2004-01-01", "CO₂ per Capita (kg)": 44000, "GDP per Capita (USD)": 6100 },
    { date: "2005-01-01", "CO₂ per Capita (kg)": 46000, "GDP per Capita (USD)": 6450 },
    { date: "2006-01-01", "CO₂ per Capita (kg)": 47000, "GDP per Capita (USD)": 6900 },
    { date: "2007-01-01", "CO₂ per Capita (kg)": 48000, "GDP per Capita (USD)": 7350 },
    { date: "2008-01-01", "CO₂ per Capita (kg)": 46000, "GDP per Capita (USD)": 7600 },
    { date: "2009-01-01", "CO₂ per Capita (kg)": 44000, "GDP per Capita (USD)": 7400 },
    { date: "2010-01-01", "CO₂ per Capita (kg)": 47000, "GDP per Capita (USD)": 7900 },
    { date: "2011-01-01", "CO₂ per Capita (kg)": 49000, "GDP per Capita (USD)": 8200 },
    { date: "2012-01-01", "CO₂ per Capita (kg)": 48000, "GDP per Capita (USD)": 8500 },
    { date: "2013-01-01", "CO₂ per Capita (kg)": 47000, "GDP per Capita (USD)": 8800 },
    { date: "2014-01-01", "CO₂ per Capita (kg)": 46000, "GDP per Capita (USD)": 9100 },
    { date: "2015-01-01", "CO₂ per Capita (kg)": 45000, "GDP per Capita (USD)": 9400 },
    { date: "2016-01-01", "CO₂ per Capita (kg)": 45000, "GDP per Capita (USD)": 9700 },
    { date: "2017-01-01", "CO₂ per Capita (kg)": 46000, "GDP per Capita (USD)": 10100 },
    { date: "2018-01-01", "CO₂ per Capita (kg)": 47000, "GDP per Capita (USD)": 10600 },
    { date: "2019-01-01", "CO₂ per Capita (kg)": 46000, "GDP per Capita (USD)": 11000 },
    { date: "2020-01-01", "CO₂ per Capita (kg)": 42000, "GDP per Capita (USD)": 10800 },
    { date: "2021-01-01", "CO₂ per Capita (kg)": 44000, "GDP per Capita (USD)": 11300 },
    { date: "2022-01-01", "CO₂ per Capita (kg)": 45000, "GDP per Capita (USD)": 11700 },
    { date: "2023-01-01", "CO₂ per Capita (kg)": 45000, "GDP per Capita (USD)": 12000 },
    { date: "2024-01-01", "CO₂ per Capita (kg)": 44000, "GDP per Capita (USD)": 12300 }
  ]}
/>
```

--------------------------------

### Render LineChart with sequential color mode

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

This example illustrates applying a 'sequential' color mode to the LineChart using the `data-viz-style="sequential"` prop. This mode is suitable for data that progresses from low to high values, using a gradient of colors.

```JSX
<LineChart
  marginTop="16"
  marginBottom="24"
  data-viz-style="sequential"
  title="Tesla employee vs Elon Musk vs Hungary"
  description="Monthly compensation / state budget"
  axis="x"
  curve="step"
  date={{
    format: "yyyy"
  }}
  series={[
    { key: "Tesla Employee" },
    { key: "Elon Musk" },
    { key: "Hungary" }
  ]}
  data={[
    { date: "2000-01-01", "Elon Musk": 5000, "Tesla Employee": 3000, "Hungary": 2500000000 },
    { date: "2005-01-01", "Elon Musk": 5000, "Tesla Employee": 4200, "Hungary": 4000000000 },
    { date: "2010-01-01", "Elon Musk": 0, "Tesla Employee": 5500, "Hungary": 5000000000 },
    { date: "2015-01-01", "Elon Musk": 10000, "Tesla Employee": 6300, "Hungary": 6000000000 },
    { date: "2018-01-01", "Elon Musk": 100000000, "Tesla Employee": 7000, "Hungary": 6800000000 },
    { date: "2020-01-01", "Elon Musk": 2800000000, "Tesla Employee": 7600, "Hungary": 7500000000 },
    { date: "2023-01-01", "Elon Musk": 4500000000, "Tesla Employee": 8300, "Hungary": 7900000000 },
    { date: "2025-01-01", "Elon Musk": 5600000000, "Tesla Employee": 8800, "Hungary": 8200000000 }
  ]}
/>
```

--------------------------------

### Implement DataThemeProvider with a centralized configuration

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/contexts/dataThemeProvider.mdx

This example shows how to manage data visualization styles from a single `once-ui.config.js` file, promoting reusability and maintainability. It also illustrates wrapping the app with a `Providers` component for a cleaner setup, ensuring all necessary contexts are provided.

```tsx
import { dataStyle } from "@/resources/once-ui.config";
import { DataThemeProvider, ThemeProvider, IconProvider, ToastProvider, ChartVariant, ChartMode } from "@once-ui-system/core";

export function Providers({ children }: {
    children: React.ReactNode
}) {
    return (
      <ThemeProvider>
        <DataThemeProvider
          variant={dataStyle.variant as ChartVariant}
          mode={dataStyle.mode as ChartMode}
          height={dataStyle.height}
          axis={{
            stroke: dataStyle.axis.stroke
          }}
          tick={{
            fill: dataStyle.tick.fill,
            fontSize: dataStyle.tick.fontSize,
            line: dataStyle.tick.line
          }}>
          <ToastProvider>
            <IconProvider>
              {children}
            </IconProvider>
          </ToastProvider>
        </DataThemeProvider>
      </ThemeProvider>
    );
}
```

```tsx
export const dataStyle = {
    variant: "gradient", // flat | gradient | outline
    mode: "categorical", // categorical | divergent | sequential
    height: 24, // default chart height
    axis: {
      stroke: "var(--neutral-alpha-weak)",
    },
    tick: {
      fill: "var(--neutral-on-background-weak)",
      fontSize: 11,
      line: false
    }
};
```

--------------------------------

### Invoking Context7 for AI Agent Prompts (Shell)

Source: https://github.com/once-ui-system/mcp/blob/main/README.md

This example demonstrates how to invoke the Context7 MCP server within an AI agent prompt. By appending `use context7` to a prompt, the agent is instructed to leverage the full Once UI system documentation, even if it’s not installed locally, enhancing the quality and relevance of generated code.

```Shell
I want you to implement [...]. use context7
```

--------------------------------

### Configure Date Prop for LineBarChart

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

This example demonstrates how to use the `date` prop to control the date format, start and end dates, and visibility of date selectors and presets in a `LineBarChart` component. It allows for precise control over the displayed date range and user interaction.

```tsx
<LineBarChart
    marginTop="16"
    title="CEO vs Employee Paycheck"
    axis="both"
    date={{
      format: "yyyy",
      start: new Date("2000-01-01"),
      end: new Date("2020-01-01"),
      selector: true,
      presets: {
        display: true,
        granularity: "week"
      },
      dual: true
    }}
    series={[
      { key: "Screen Time (hrs)", color: "moss" },
      { key: "Physical Activity (hrs)", color: "yellow" }
    ]}
    data={[
      { date: new Date("2000-01-01"), "Screen Time (hrs)": 2.5, "Physical Activity (hrs)": 1.8 },
      { date: new Date("2005-01-01"), "Screen Time (hrs)": 3.0, "Physical Activity (hrs)": 1.6 },
      { date: new Date("2010-01-01"), "Screen Time (hrs)": 4.0, "Physical Activity (hrs)": 1.3 },
      { date: new Date("2015-01-01"), "Screen Time (hrs)": 5.5, "Physical Activity (hrs)": 1.0 },
      { date: new Date("2020-01-01"), "Screen Time (hrs)": 7.0, "Physical Activity (hrs)": 0.8 }
    ]}
/>
```

--------------------------------

### Clone Magic Docs Repository - Bash

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-docs/quick-start.mdx

Clones the Magic Docs GitHub repository to your local machine using the git command-line tool.

```bash
git clone https://github.com/once-ui-system/magic-docs.git
```

--------------------------------

### Configuring Environment Variables for Magic Store (.env.local)

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-store/quick-start.mdx

Sets up the required environment variables in the .env.local file for connecting to Fourthwall and configuring the application.

```tsx
NEXT_PUBLIC_FW_STOREFRONT_TOKEN="<your storefront token>" # Example: ptkn_...
NEXT_PUBLIC_FW_CHECKOUT="<your store url>" # Example: vercel-shop.fourthwall.com. Used for checkout
NEXT_PUBLIC_VERCEL_URL="<the url of your vercel site>" # Example: fw-commerce.vercel.app. This is used for sitemap.xml + robots.txt.

```

--------------------------------

### LineChart Axis Prop API Reference

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

API documentation for the `axis` prop of the `LineChart` component, detailing its accepted values and default setting.

```APIDOC
Prop: axis
Type: "x" | "y" | "both" | "none"
Default: "both"
Description: Controls the visibility of the x and y axes.
```

--------------------------------

### Define Chart Variants for LineChart

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

This example illustrates how to apply different visual `variant` styles (gradient, flat, outline) to a `LineChart` component. The `variant` prop changes the chart's appearance, offering distinct aesthetic options.

```tsx
border="transparent"
  variant="outline" // gradient | flat | outline
  axis="x"
  legend={{
    display: false,
  }}
  date={{
    format: "yyyy"
  }}
  series={[
    { key: "Area (km²)", color: "contrast" },
    { key: "Temp Anomaly (°C)", color: "red" }
  ]}
  data={[
    { date: "1950-01-01", "Area (km²)": 4.2, "Temp Anomaly (°C)": 0.6 },
    { date: "1975-01-01", "Area (km²)": 3.4, "Temp Anomaly (°C)": 0.9 },
    { date: "2000-01-01", "Area (km²)": 2.3, "Temp Anomaly (°C)": 1.1 },
    { date: "2025-01-01", "Area (km²)": 1.2, "Temp Anomaly (°C)": 1.4 }
  ]}
```

--------------------------------

### Example HTML Output of Generated SEO Meta Tags

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/modules/meta.mdx

Provides an example of the HTML meta tags generated by the `Meta.generate` function. This output includes standard SEO meta tags, OpenGraph properties for social media sharing, and Twitter/X card metadata.

```html
<title>Once UI: Build the future</title>
<meta name="description" content="An open-source design system for indie creators to ship like teams of 10+ alone.">

<meta property="og:title" content="Once UI: Build the future">
<meta property="og:description" content="An open-source design system for indie creators to ship like teams of 10+ alone.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://once-ui.com">
<meta property="og:image" content="https://once-ui.com/images/cover.jpg">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Once UI: Build the future">
<meta name="twitter:description" content="An open-source design system for indie creators to ship like teams of 10+ alone.">
<meta name="twitter:image" content="https://once-ui.com/images/cover.jpg">
```

--------------------------------

### Cloning the Magic Bio Repository (Bash)

Source: https://github.com/once-ui-system/mcp/blob/main/content/magic-bio/quick-start.mdx

Clones the Magic Bio Git repository from GitHub to your local machine, providing the source code for the project.

```bash
git clone https://github.com/once-ui-system/magic-bio.git
```

--------------------------------

### Simple IconProvider Setup

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/contexts/iconProvider.mdx

Demonstrates how to wrap your application with `IconProvider` and pass a single icon instance as a prop, enabling its use throughout the component tree.

```tsx
import { HiHome } from "react-icons/hi2";

<IconProvider icons={{home: HiHome}}>
    {children}
</IconProvider>
```

--------------------------------

### Example Usage of RevealFx Component

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/effects/revealFx.mdx

Demonstrates how to use the RevealFx component with different delays and translateY values to animate content into view. Includes examples for text and a button.

```tsx
<RevealFx>
    The revolution begins
</RevealFx>
<RevealFx delay={0.2} translateY={0.5}>
    Get ready for the next phase.
</RevealFx>
<RevealFx delay={0.4} translateY={1}>
    <Button>
      Join now
    </Button>
</RevealFx>
```

--------------------------------

### Invoking Context7 in AI Prompt (Shell)

Source: https://github.com/once-ui-system/mcp/blob/main/content/vibe-coding.mdx

This example demonstrates how to invoke the Context7 context within an AI prompt. By appending `use context7` to the prompt, the agent is explicitly instructed to leverage the full Once UI system documentation, even if it's not installed locally, enhancing its ability to generate relevant code.

```Shell
I want you to implement [...]. use context7
```

--------------------------------

### Example Usage of MegaMenu Component with Full Navigation Structure

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/modules/megaMenu.mdx

Demonstrates how to integrate and configure the `MegaMenu` component with multiple menu groups, sections, and links, including icons and descriptions. This example showcases a typical navigation structure for a complex application, suitable for app headers and multi-level SaaS interfaces.

```JSX
<Row fillWidth height={20} overflow="hidden">
    <MegaMenu
      menuGroups={[
        {
      id: "products",
      label: "Products",
      suffixIcon: "chevronDown",
      sections: [
        {
          title: "Featured",
          links: [
            {
              label: "Analytics",
              href: "#",
              icon: "analytics",
              description: "Get insights into your data",
            },
            {
              label: "Security",
              href: "#",
              icon: "security",
              description: "Protect your assets",
            }
          ]
        },
        {
          title: "Tools",
          links: [
            {
              label: "Dashboard",
              href: "#",
              icon: "apps",
              description: "Monitor your metrics",
            },
            {
              label: "Settings",
              href: "#",
              icon: "settings",
              description: "Configure your preferences",
            }
          ]
        }
      ]
    },
    {
      id: "solutions",
      label: "Solutions",
      suffixIcon: "chevronDown",
      sections: [
        {
          title: "By industry",
          links: [
            {
              label: "Enterprise",
              href: "#",
              icon: "components",
              description: "Solutions for large organizations",
            },
            {
              label: "Startups",
              href: "#",
              icon: "rocket",
              description: "Perfect for growing companies",
            }
          ]
        },
        {
          title: "By team",
          links: [
            {
              label: "Developers",
              href: "#",
              icon: "code",
              description: "Tools and APIs",
            },
            {
              label: "Design teams",
              href: "#",
              icon: "sparkle",
              description: "Creative solutions",
            }
          ]
        }
      ]
    },
    {
      id: "resources",
      label: "Resources",
      suffixIcon: "chevronDown",
      sections: [
        {
          title: "Documentation",
          links: [
            {
              label: "Guides",
              href: "#",
              icon: "pages",
              description: "Learn how to use our platform",
            },
            {
              label: "API reference",
              href: "#",
              icon: "code",
              description: "Technical documentation",
            }
          ]
        },
        {
          title: "Support",
          links: [
            {
              label: "Help center",
              href: "#",
              icon: "help",
              description: "Get your questions answered",
            },
            {
              label: "Community",
              href: "#",
              icon: "person",
              description: "Connect with other users",
            }
          ]
        }
      ]
    },
    {
      id: "company",
      label: "Company",
      suffixIcon: "chevronDown",
      sections: [
        {
          title: "About",
          links: [
            {
              label: "Our story",
              href: "#",
              icon: "pages",
              description: "Learn about our journey",
            },
            {
              label: "Careers",
              href: "#",
              icon: "rocket",
              description: "Join our team",
            }
          ]
        },
        {
          title: "Connect",
          links: [
            {
              label: "Blog",
              href: "#",
              icon: "document",
              description: "Latest updates and news",
            },
            {
              label: "Contact",
              href: "#",
              icon: "email",
              description: "Get in touch with us",
            }
          ]
        }
      ]
    }
      ]}
    />
  </Row>
```

--------------------------------

### Render MobileMegaMenu with Nested Navigation Groups

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/modules/mobileMegaMenu.mdx

This example demonstrates how to render the `MobileMegaMenu` component, populating it with a structured array of `menuGroups`. Each group contains sections with nested links, showcasing a typical multi-level navigation setup for mobile interfaces.

```JSX
<MobileMegaMenu
    menuGroups={[
      {
        id: "products",
        label: "Products",
        suffixIcon: "chevronDown",
        sections: [
          {
            title: "Featured",
            links: [
              {
                label: "Analytics",
                href: "/analytics",
                icon: "HiOutlineDocumentChartBar",

```

--------------------------------

### Configure LineChart with Time Series Data

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

This example shows how to use the `date` prop to specify the date format for time series data in a `LineChart`. Dates can be provided as strings with a specified format or as `Date` objects for default formatting. This ensures proper rendering of chronological data.

```tsx
<LineChart
    title="Cost of College vs. Income"
    axis="x"
    date={{
      format: "yyyy"
    }}
    series={[
      { key: "Median Household Income", color: "cyan" },
      { key: "College Tuition", color: "magenta" }
    ]}
    data={[
      { date: new Date("1980-01-01"), "Median Household Income": 22000, "College Tuition": 3000 },
      { date: new Date("1990-01-01"), "Median Household Income": 30000, "College Tuition": 6000 },
      { date: new Date("2000-01-01"), "Median Household Income": 42000, "College Tuition": 10000 },
      { date: new Date("2010-01-01"), "Median Household Income": 49000, "College Tuition": 18000 },
      { date: new Date("2020-01-01"), "Median Household Income": 53000, "College Tuition": 25000 },
    ]}
/>
```

--------------------------------

### Advanced IconProvider Setup with Centralized Icon Library

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/contexts/iconProvider.mdx

Illustrates a more structured approach by creating a separate `icons.ts` file for a comprehensive icon library and integrating `IconProvider` within a `Providers` component for application-wide context management. This setup allows for easy management and overriding of default icons.

```tsx
import { iconLibrary } from "../resources/icons.ts";
import { IconProvider, ToastProvider, ThemeProvider, DataThemeProvider } from "@once-ui-system/core";

export function Providers({ children }: {
    children: React.ReactNode
}) {
    return (
      <ThemeProvider>
        <DataThemeProvider>
          <ToastProvider>
            <IconProvider icons={iconLibrary}>
              {children}
            </IconProvider>
          </ToastProvider>
        </DataThemeProvider>
      </ThemeProvider>
    );
}
```

```tsx
// This is the default iconset used by Once UI
import { IconType } from "react-icons";

import {
    HiChevronUp,
    HiChevronDown,
    HiChevronRight,
    HiChevronLeft,
    HiOutlineArrowPath,
    HiOutlineSun,
    HiOutlineMoon,
    HiOutlineEye,
    HiOutlineEyeSlash,
    HiOutlineClipboard,
    HiOutlineMagnifyingGlass,
    HiOutlineLink,
    HiArrowUpRight,
    HiOutlineShieldCheck,
    HiOutlineSparkles,
    HiOutlineComputerDesktop,
    HiOutlineQuestionMarkCircle,
    HiOutlineInformationCircle,
    HiOutlineExclamationTriangle,
    HiOutlineExclamationCircle,
    HiOutlineCheckCircle,
    HiOutlineXMark,
    HiOutlineUser,
    HiOutlineEyeDropper,
    HiOutlineMinus,
    HiOutlinePlus,
    HiOutlineCalendar,
    HiOutlineDocumentDuplicate,
    HiOutlineCheck,
    HiOutlineArrowsPointingIn,
    HiOutlineArrowsPointingOut,
} from "react-icons/hi2";

export const iconLibrary: Record<string, IconType> = {
    chevronUp: HiChevronUp,
    chevronDown: HiChevronDown,
    chevronRight: HiChevronRight,
    chevronLeft: HiChevronLeft,
    refresh: HiOutlineArrowPath,
    light: HiOutlineSun,
    dark: HiOutlineMoon,
    help: HiOutlineQuestionMarkCircle,
    info: HiOutlineInformationCircle,
    warning: HiOutlineExclamationTriangle,
    danger: HiOutlineExclamationCircle,
    checkbox: HiOutlineCheck,
    check: HiOutlineCheckCircle,
    copy: HiOutlineDocumentDuplicate,
    eyeDropper: HiOutlineEyeDropper,
    clipboard: HiOutlineClipboard,
    person: HiOutlineUser,
    close: HiOutlineXMark,
    openLink: HiOutlineLink,
    arrowUpRight: HiArrowUpRight,
    minus: HiOutlineMinus,
    plus: HiOutlinePlus,
    calendar: HiOutlineCalendar,
    eye: HiOutlineEye,
    eyeOff: HiOutlineEyeSlash,
    search: HiOutlineMagnifyingGlass,
    security: HiOutlineShieldCheck,
    sparkle: HiOutlineSparkles,
    computer: HiOutlineComputerDesktop,
    minimize: HiOutlineArrowsPointingIn,
    maximize: HiOutlineArrowsPointingOut,
};

export type IconLibrary = typeof iconLibrary;
export type IconName = keyof IconLibrary;
```

--------------------------------

### Advanced ThemeProvider Setup with Centralized Configuration

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/contexts/themeProvider.mdx

This advanced setup demonstrates creating a single source of truth for all style configurations in a separate file (e.g., `once-ui.config.js`) and wrapping the application with a `Providers` component. This approach promotes better organization and reusability of theme settings.

```tsx
import { style } from "@/resources/once-ui.config";
import { ThemeProvider, DataThemeProvider, IconProvider, BorderStyle, ToastProvider, NeutralColor, ScalingSize, Schemes, SolidStyle, SolidType, SurfaceStyle, TransitionStyle, Theme } from "@once-ui-system/core";

export function Providers({ children }: {
    children: React.ReactNode
}) {
    return (
      <ThemeProvider
        theme={style.theme as Theme}
        brand={style.brand as Schemes}
        accent={style.accent as Schemes}
        neutral={style.neutral as NeutralColor}
        solid={style.solid as SolidType}
        solidStyle={style.solidStyle as SolidStyle}
        border={style.border as BorderStyle}
        surface={style.surface as SurfaceStyle}
        transition={style.transition as TransitionStyle}
        scaling={style.scaling as ScalingSize}>
        <DataThemeProvider>
          <ToastProvider>
            <IconProvider>
              {children}
            </IconProvider>
          </ToastProvider>
        </DataThemeProvider>
      </ThemeProvider>
    );
}
```

```tsx
export const style = {
    theme: "system", // system | dark | light
    neutral: "gray", // sand | gray | slate
    brand: "blue", // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
    accent: "indigo", // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
    solid: "contrast", // color | contrast
    solidStyle: "flat", // flat | plastic
    border: "playful", // rounded | playful | conservative
    surface: "translucent", // filled | translucent
    transition: "all", // all | micro | macro
    scaling: "100"
};
```

--------------------------------

### Data Visualization Prop Options

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

Documents the available options for a `data-viz` property, specifying its possible values as 'categorical', 'divergent', or 'sequential', with 'categorical' being the default.

```APIDOC
data-viz:
  Type: Array<string>
  Values: "categorical", "divergent", "sequential"
  Default: "categorical"
```

--------------------------------

### PieChart Legend Prop API Reference

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

API documentation for the `legend` prop of the `PieChart` component, detailing its structure including `display` and `position` properties and their accepted values.

```APIDOC
Prop: legend
Type: object
Properties:
  display: boolean
    Description: Controls the visibility of the legend.
  position: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
    Description: Specifies the position of the legend.
```

--------------------------------

### Simple ThemeProvider Setup

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/contexts/themeProvider.mdx

Wrap your application with the `ThemeProvider` component and pass the desired style configurations as props. This demonstrates a basic integration for setting global theme properties.

```tsx
<ThemeProvider
    theme="system" // system | dark | light
    brand="blue" // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
    accent="indigo" // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
    neutral="gray" // sand | gray | slate
    solid="contrast" // color | contrast
    solidStyle="flat" // flat | plastic
    border="playful" // rounded | playful | conservative
    surface="translucent" // filled | translucent
    transition="all" // all | micro | macro
    scaling="100" // 90 | 95 | 100 | 105 | 110
>
    {children}
</ThemeProvider>
```

--------------------------------

### Basic ToastProvider Setup in React

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/contexts/toastProvider.mdx

Demonstrates the simplest way to integrate `ToastProvider` by wrapping the application's children, enabling global toast functionality.

```tsx
<ToastProvider>
    {children}
</ToastProvider>
```

--------------------------------

### API Reference for Variant Prop

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

Specifies the available values for the `variant` prop, which controls the visual style of chart components. Supported variants include 'gradient', 'flat', and 'outline', with 'gradient' being the default.

```APIDOC
variant: "gradient" | "flat" | "outline" (default: "gradient")
```

--------------------------------

### Basic Badge Examples

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/components/badge.mdx

Demonstrates various basic configurations of the Badge component, including different titles, background colors, and text variants.

```tsx
<Badge id="badge-1" title="New feature" effect={false} arrow={false} paddingX="12" paddingY="8" onBackground="brand-medium" background="brand-alpha-weak" textVariant="label-default-s" />
<Badge id="badge-2" title="Coming soon" icon="calendar" arrow={false} paddingLeft="12" paddingRight="16" paddingY="8" onBackground="brand-medium" background="brand-medium" />
<Badge id="badge-3" title="Learn more" href="#"/>
```

--------------------------------

### API Reference for Date Prop

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

Defines the structure and available properties for the `date` prop used in chart components. This object allows detailed configuration of date formatting, range, and UI elements like selectors and presets.

```APIDOC
date: {
  format: string,
  start: Date,
  end: Date,
  selector: boolean,
  presets: {
    display: boolean,
    granularity: string
  },
  dual: boolean
}
```

--------------------------------

### Applying Borders with Different Styles

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/basics/structure.mdx

This example demonstrates how to apply borders to a `Background` component using `border`, `borderWidth`, and `borderStyle` props. It shows examples of a default 1px solid border, a 2px solid border, and a 2px dashed border, each with different colors.

```tsx
<Background
    border="success-medium"
  />
  <Background
    border="warning-medium"
    borderWidth="2"
  />
  <Background
    border="danger-medium"
    borderWidth="2"
    borderStyle="dashed"
/>
```

--------------------------------

### InteractiveDetails Tooltip Examples

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/form-controls/interactiveDetails.mdx

Illustrates how to add and position help tooltips for `InteractiveDetails` components, providing additional context for form controls.

```tsx
<InteractiveDetails 
    label="With tooltip on top"
    iconButtonProps={{
      tooltip: "This tooltip appears on top", 
      tooltipPosition: "top" 
    }}
/>

<InteractiveDetails 
    label="With tooltip on right"
    iconButtonProps={{
      tooltip: "This tooltip appears on the right", 
      tooltipPosition: "right" 
    }}
/>
```

--------------------------------

### Basic InteractiveDetails Usage

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/form-controls/interactiveDetails.mdx

Examples demonstrating basic usage of the `InteractiveDetails` component, including a simple label, a label with a description, and a label with a help tooltip.

```tsx
<InteractiveDetails 
    label="Basic label" 
/>

<InteractiveDetails 
    label="With description" 
    description="This is a description for the interactive element"
/>

<InteractiveDetails 
    label="With help tooltip" 
    iconButtonProps={{ tooltip: "This is a help tooltip", tooltipPosition: "right" }}
/>
```

--------------------------------

### Displaying Basic InlineCode Snippets

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/components/inlineCode.mdx

Demonstrates basic usage of the InlineCode component to display simple code snippets inline, such as installation commands or variable declarations.

```tsx
<InlineCode>npm install once-ui</InlineCode>
<InlineCode>const value = 42;</InlineCode>
```

--------------------------------

### Flex Container Style Overrides

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

Indicates that components can support all standard `Flex` props for overriding default container styles.

```APIDOC
...flex:
  Description: All standard Flex props are supported for style overrides.
```

--------------------------------

### Render Basic User Component

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/components/user.mdx

This example demonstrates the fundamental usage of the `User` component, showcasing how to combine an avatar, name, subline, and a tag to create a compact identity preview.

```tsx
<User
    name="Lorant One"
    subline="Design Engineer"
    tagProps={{ label: "Admin", variant: "accent" }}
    avatarProps={{ src: "/images/avatar.jpg" }}
/>
```

--------------------------------

### Basic Chip Usage Examples

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/form-controls/chip.mdx

Demonstrates various basic Chip configurations including default selected, with a prefix icon, removable, and unselected states.

```tsx
<Chip label="Default" selected />
<Chip label="With icon" prefixIcon="calendar" />
<Chip label="Removable" onRemove={() => {}} />
<Chip label="Unselected" />
```

--------------------------------

### Understanding Once UI Project Structure (Bash)

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/quick-start.mdx

This snippet illustrates the recommended file and directory structure for a Once UI project. It highlights key folders like `app/` for pages, `once-ui/` for design system components and styles, and utility directories, providing an overview of the project's organization.

```bash
src/
├── app/                  
│   ├── (main)/          
│   │   │   └── page.tsx
│   │   ├── page-2/
│   │   │   └── page.tsx
│   │   ├── layout.tsx
│   │   └── page.tsx     
│   ├── config/          
│   ├── utils/           
│   └── styles/          
│
├── once-ui/             
│   ├── styles/     
│   │   ├── background.scss
│   │   └── ...      
│   │      
│   ├── resources/            
│   │   ├── config.js
│   │   
│   │
│   ├── components/      
│   │   ├── Accordion.tsx
│   │   ├── Accordion.module.scss
│   │   └── ...   
│   │
│   ├── types.ts      
│   ├── icons.ts         
└   └── interfaces.ts  
```

--------------------------------

### Example Usage of AccordionGroup Component

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/components/accordionGroup.mdx

Demonstrates how to use the AccordionGroup component with multiple Accordion items, each having a title and content. This example shows a basic setup with three items.

```tsx
<AccordionGroup
    items={[
      {
        title: "First Item",
        content:
          <Text onBackground="neutral-weak">
            Content for the first item
          </Text>
      },
      {
        title: "Second Item",
        content:
          <Text onBackground="neutral-weak">
            Content for the second item
          </Text>
      },
      {
        title: "Third Item",
        content:
          <Text onBackground="neutral-weak">
            Content for the third item
          </Text>
      }
    ]}
/>
```

--------------------------------

### Basic Input Component Usage in TSX

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/form-controls/input.mdx

Demonstrates the fundamental usage of the `Input` component, including how to set a label and add a prefix icon. This example collects a basic email input.

```tsx
<Input
    id="input-1"
    label="Email"
    hasPrefix={
      <Icon marginLeft="4" onBackground="neutral-weak" name="email" size="xs" />
    }
/>
```

--------------------------------

### Skeleton Component API Reference

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/components/skeleton.mdx

Comprehensive API documentation for the Skeleton component, listing all available properties. Each property includes its name, accepted values (if applicable), and default value, providing a clear guide for component customization.

```APIDOC
shape: (line | circle | block) = line
width: (xs | s | m | l | xl) = m
height: (xs | s | m | l | xl) = m
delay: (1 | 2 | 3 | 4 | 5 | 6)
className: string
style: object
...flex: object
```

--------------------------------

### Example Usage of MobileMegaMenu Component with Data Structure

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/modules/mobileMegaMenu.mdx

Demonstrates how to use the MobileMegaMenu component by providing a complex data structure for its 'menuGroups' prop, defining sections, links, and icons for a multi-level mobile navigation. This snippet focuses on the data structure itself.

```javascript
[
  {
    "id": "products",
    "label": "Products",
    "suffixIcon": "chevronDown",
    "sections": [
      {
        "title": "Analytics",
        "links": [
          {
            "label": "Insights",
            "href": "/insights",
            "icon": "HiOutlineChartBar",
            "description": "Get insights into your data"
          },
          {
            "label": "Security",
            "href": "/security",
            "icon": "HiOutlineShieldCheck",
            "description": "Protect your assets"
          }
        ]
      },
      {
        "title": "Tools",
        "links": [
          {
            "label": "Dashboard",
            "href": "/dashboard",
            "icon": "HiOutlineSquares2X2",
            "description": "Monitor your metrics"
          },
          {
            "label": "Settings",
            "href": "/settings",
            "icon": "HiCog8Tooth",
            "description": "Configure your preferences"
          }
        ]
      }
    ]
  },
  {
    "id": "solutions",
    "label": "Solutions",
    "suffixIcon": "chevronDown",
    "sections": [
      {
        "title": "By industry",
        "links": [
          {
            "label": "Enterprise",
            "href": "/enterprise",
            "icon": "cube",
            "description": "Solutions for large organizations"
          },
          {
            "label": "Startups",
            "href": "/startups",
            "icon": "rocket",
            "description": "Perfect for growing companies"
          }
        ]
      },
      {
        "title": "By team",
        "links": [
          {
            "label": "Developers",
            "href": "/developers",
            "icon": "code",
            "description": "Tools and APIs"
          },
          {
            "label": "Design teams",
            "href": "/design",
            "icon": "sparkle",
            "description": "Creative solutions"
          }
        ]
      }
    ]
  },
  {
    "id": "resources",
    "label": "Resources",
    "suffixIcon": "chevronDown",
    "sections": [
      {
        "title": "Documentation",
        "links": [
          {
            "label": "Guides",
            "href": "/guides",
            "icon": "book",
            "description": "Learn how to use our platform"
          },
          {
            "label": "API reference",
            "href": "/api",
            "icon": "code",
            "description": "Technical documentation"
          }
        ]
      },
      {
        "title": "Support",
        "links": [
          {
            "label": "Help center",
            "href": "/help",
            "icon": "infoCircle",
            "description": "Get your questions answered"
          },
          {
            "label": "Community",
            "href": "/community",
            "icon": "people",
            "description": "Connect with other users"
          }
        ]
      }
    ]
  },
  {
    "id": "company",
    "label": "Company",
    "suffixIcon": "chevronDown",
    "sections": [
      {
        "title": "About",
        "links": [
          {
            "label": "Our story",
            "href": "/about",
            "icon": "book",
            "description": "Learn about our journey"
          },
          {
            "label": "Careers",
            "href": "/careers",
            "icon": "rocket",
            "description": "Join our team"
          }
        ]
      },
      {
        "title": "Connect",
        "links": [
          {
            "label": "Blog",
            "href": "/blog",
            "icon": "document",
            "description": "Latest updates and news"
          },
          {
            "label": "Contact",
            "href": "/contact",
            "icon": "email",
            "description": "Get in touch with us"
          }
        ]
      }
    ]
  }
]
```

--------------------------------

### LineChart component with data-viz-style prop options

Source: https://github.com/once-ui-system/mcp/blob/main/content/once-ui/data/setup.mdx

This code snippet demonstrates the `LineChart` component, highlighting the `data-viz-style` prop. This prop accepts 'categorical', 'divergent', or 'sequential' values to control the chart's color mode.

```JSX
<LineChart
    data-viz-style="divergent" // categorical | divergent | sequential
    title="Tesla employee vs Elon Musk vs Hungary"
    description="Monthly compensation / state budget"
    axis="x"
    curve="step"
    date={{
      format: "yyyy"
    }}
    series={[
      { key: "Tesla Employee" },
      { key: "Elon Musk" },
      { key: "Hungary" }
    ]}
    data={[
      { date: "2000-01-01", "Elon Musk": 5000, "Tesla Employee": 3000, "Hungary": 2500000000 },
      { date: "2005-01-01", "Elon Musk": 5000, "Tesla Employee": 4200, "Hungary": 4000000000 },
      { date: "2010-01-01", "Elon Musk": 0, "Tesla Employee": 5500, "Hungary": 5000000000 },
      { date: "2015-01-01", "Elon Musk": 10000, "Tesla Employee": 6300, "Hungary": 6000000000 },
      { date: "2018-01-01", "Elon Musk": 100000000, "Tesla Employee": 7000, "Hungary": 6800000000 },
      { date: "2020-01-01", "Elon Musk": 2800000000, "Tesla Employee": 7600, "Hungary": 7500000000 },
      { date: "2023-01-01", "Elon Musk": 4500000000, "Tesla Employee": 8300, "Hungary": 7900000000 },
      { date: "2025-01-01", "Elon Musk": 5600000000, "Tesla Employee": 8800, "Hungary": 8200000000 }
    ]}
/>
```