### Install Dependencies

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

Installs all the necessary project dependencies using npm. Ensure you have Node.js and npm installed before running this command.

```bash
npm install
```

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

### Install Dependencies

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

Installs all the necessary project dependencies using npm.

```bash
npm install
```

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

### Install Dependencies

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

Installs all the necessary project dependencies using npm. Ensure you have Node.js and npm installed before running this command.

```bash
npm install
```

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

### Install Dependencies

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

Installs all the necessary project dependencies using npm. This command should be run after cloning the repository.

```bash
npm install
```

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

### Install Dependencies

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

Install the necessary project dependencies using npm.

```bash
npm install
```

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

### Install Dependencies

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

Install all the necessary Node.js dependencies required for the Magic Store project using npm. Ensure you have Node.js and npm installed before running this command.

```bash
npm install
```

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

### Clone Magic Agent Repository

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

Clones the Magic Agent GitHub repository to your local machine. This is the first step to get started with the project.

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

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

### Start Development Server

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

Starts the local development server to preview the documentation.

```bash
npm run dev
```

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

### Start Development Server

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

Start the local development server to preview your Magic Store e-commerce site. This command compiles the project and makes it accessible on your local host.

```bash
npm run dev
```

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

### Clone Repository

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

Clones the Magic Convert git repository to your local machine. This is the first step to get started with the template.

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

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

### Clone Magic Bio Repository

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

Clones the Magic Bio project repository from GitHub to your local machine. This is the first step to get started with the project.

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

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

### Once UI Templates Display

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

This snippet demonstrates how to render a grid of Once UI templates. Each template card displays a title, description, and image, with links to their respective quick-start guides. It utilizes React components like Grid, Card, Row, Column, Avatar, Text, and Media.

```jsx
<Grid fillWidth columns="2" m={{columns: 1}} gap="12" marginTop="16">
    {[ 
      {
        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>
    ))}
  </Grid>
```

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

### Start Development Server

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

Start the local development server to preview your Magic Portfolio.

```bash
npm run dev
```

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

### Add Once UI to an Existing Project

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

Install the core Once UI package into your existing project using npm.

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

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

### CodeBlock Example for LineChart Configuration

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

Provides a consolidated code example within a CodeBlock component, showcasing the `data-viz-style` prop with its possible values (categorical, divergent, sequential) and a sample data structure for the LineChart.

```javascript
<CodeBlock
  marginTop="16"
  marginBottom="24"
  highlight="2"
  compact
  codes={[{"code": "<LineChart\n    data-viz-style=\"divergent\" // categorical | divergent | sequential\n    title=\"Tesla employee vs Elon Musk vs Hungary\"\n    description=\"Monthly compensation / state budget\"\n    axis=\"x\"\n    curve=\"step\"\n    date={{\n      format: \"yyyy\",\n    }}\n    series={[{"key": \"Tesla Employee\"}, {"key": \"Elon Musk\"}, {"key": \"Hungary\"}]}\n    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}]}
/>"}]}
```

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

### Add Product Size Guide

Source: https://github.com/once-ui-system/docs/blob/main/src/content/magic-store/size-guide.mdx

This code snippet defines a JavaScript object for managing product size guides. It includes an example for a specific product slug with its corresponding image and a list of sizes, each with a label and measurements. This data is used to display size information on product pages.

```tsx
const sizeGuide = {
    "product-slug": {
      image: "/images/sizeGuide/product-1.webp", // optional but recommended
      sizes: [
        {
          label: "S",
          "length (A)": 26.6,
          "width (B)": 18.3,
          "sleeve (C)": 16.3
        },
        {
          label: "M",
          "length (A)": 28,
          "width (B)": 20.3,
          "sleeve (C)": 17.8
        },
        {
          label: "L",
          "length (A)": 29.4,
          "width (B)": 22,
          "sleeve (C)": 19
        },
        {
          label: "XL",
          "length (A)": 30.8,
          "width (B)": 24,
          "sleeve (C)": 20.5
        },
        {
          label: "2XL",
          "length (A)": 31.6,
          "width (B)": 26,
          "sleeve (C)": 21.8
        },
        {
          label: "3XL",
          "length (A)": 32.5,
          "width (B)": 27.8,
          "sleeve (C)": 23.3
        },
        {
          label: "4XL",
          "length (A)": 33.5,
          "width (B)": 29.8,
          "sleeve (C)": 24.6
        }
      ]
    },
};

```

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

### Start Development Server

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

Starts the local development server, allowing you to preview the Magic Bio template. This command is used to run the project locally.

```bash
npm run dev
```

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

### Start Development Server

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

Starts the local development server, allowing you to preview the template in your browser. This command is typically used during development.

```bash
npm run dev
```

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

### Line Chart Example

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

Demonstrates the usage of the LineChart component with various configuration options including margins, title, axis, curve type, date formatting, legend display, series definition, and data points. This example visualizes GDP Growth against 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 }
  ]}
/>
```

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

### Start Development Server

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

Starts the local development server for Magic Agent. This allows you to preview and test the chatbot locally.

```bash
npm run dev
```

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

### BarChart CodeBlock Example

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

Provides a detailed code example of the BarChart component, showcasing its configuration for displaying daily time spent on activities. It includes series definitions with colors and data points for each activity.

```tsx
<BarChart
    title="Daily Time Spent on Activities"
    axis="x"
    barWidth="xl"
    legend={{
      position: "bottom-center",
    }}
    series={[
      { key: "Reading", color: "aqua" },
      { key: "Sports", color: "yellow" },
      { key: "Doomscrolling", color: "orange" }
    ]}
    data={[
      { label: "Minutes per day", "Reading": 16, "Sports": 36, "Doomscrolling": 128 },
    ]}
/>
```

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

### CodeBlock Component Example

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

Illustrates the use of the CodeBlock component, which is used to display code snippets. This example shows how to embed a BarChart component within a CodeBlock, specifying highlight lines and compact display.

```tsx
<CodeBlock
    marginTop="16"
    marginBottom="24"
    highlight="2-6"
    compact
    codes={[
      {
        code:
`<BarChart
    marginTop="16"
    marginBottom="24"
    border="brand-medium"
    background="brand-medium"
    radius="xs"
    title="The TikTok Takeover"
    description="Avg. daily time spent per user on TikTok (minutes)"
    barWidth="xl"
    legend={{
      display: false
    }}
    series={{
      key: "Minutes",
      color: "contrast"
    }}
    data={[
      { date: "2020-01-01", Minutes: 20, label: "2020" },
      { date: "2021-01-01", Minutes: 40, label: "2021" },
      { date: "2022-01-01", Minutes: 65, label: "2022" },
      { date: "2023-01-01", Minutes: 85, label: "2023" },
      { date: "2024-01-01", Minutes: 95, label: "2024" },
      { date: "2025-01-01", Minutes: 180, label: "2025 (proj.)" }
    ]}
/>`,
        language: "tsx",
        label: "Details"
      }
    ]}
/>
```

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

### Create a New Once UI App

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

Use the create-once-ui-app command to quickly set up a new project with the recommended structure. Alternatively, clone the starter repository manually.

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

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

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

### BarChart with Contextual Title and Description

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

Shows how to enhance a BarChart with a 'title' and 'description' for better context. This example visualizes wealth distribution, differentiating between the 'Top 1%' and 'Bottom 99%' shares.

```tsx
<BarChart
  data-viz-style="divergent"
  title="Wealth distribution"
  description="Global share of wealth held by Top 1% vs Bottom 99%"
  axis="none"
  legend={{
    position: "bottom-center"
  }}
  series={[
    { key: "Top 1%" },
    { key: "Bottom 99%" }
  ]}
  data={[
    { label: "2025 (est.)", "Top 1%": 52.5, "Bottom 99%": 47.5 }
  ]}
/>
```

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

### Clone Git Repository

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

Clones the Magic Docs project from the official GitHub repository.

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

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

### BarChart Component Example

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

Demonstrates the usage of the BarChart component with various customization props such as margins, borders, background, radius, title, description, bar width, legend, series, and data. The data includes daily time spent per user on TikTok.

```tsx
<BarChart
    marginTop="16"
    marginBottom="24"
    border="brand-medium"
    background="brand-medium"
    radius="xs"
    title="The TikTok Takeover"
    description="Avg. daily time spent per user on TikTok (minutes)"
    barWidth="xl"
    legend={{
      display: false
    }}
    series={{
      key: "Minutes",
      color: "contrast"
    }}
    data={[
      { date: "2020-01-01", Minutes: 20, label: "2020" },
      { date: "2021-01-01", Minutes: 40, label: "2021" },
      { date: "2022-01-01", Minutes: 65, label: "2022" },
      { date: "2023-01-01", Minutes: 85, label: "2023" },
      { date: "2024-01-01", Minutes: 95, label: "2024" },
      { date: "2025-01-01", Minutes: 180, label: "2025 (proj.)" }
    ]}
/>
```

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

### Clone Magic Portfolio Repository

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

Clone the Magic Portfolio git repository to your local machine to begin development.

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

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

### Simple ThemeProvider Setup

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

Demonstrates the basic setup of the ThemeProvider by wrapping the application and configuring theme-related props. This includes setting the overall theme, brand colors, accent colors, neutral colors, solid styles, border styles, surface styles, transition effects, and scaling.

```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>
```

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

### LineChart CodeBlock Example

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

Presents a code snippet for the LineChart component, demonstrating its application in comparing college tuition costs against median household income over several decades. The 'date' prop is set to format the x-axis by year.

```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 },
    ]}
/>
```

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

### Clone Magic Store Repository

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

Clone the official Magic Store GitHub repository to your local machine to begin development. This is the first step in setting up the e-commerce solution.

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

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

### Blog Post Frontmatter Example

Source: https://github.com/once-ui-system/docs/blob/main/src/content/magic-portfolio/blog.mdx

Example of frontmatter metadata for a blog post, including title, publication date, image, summary, and tags. This metadata is used for the post's page and SEO tags.

```mdx
---
title: "Arriving to a new milestone in my career"
publishedAt: "2024-04-08"
image: "/images/gallery/img-02.jpg"
summary: "Every career is a journey, filled with challenges, growth, and those significant moments that mark a shift in our path."
tag: "Journal"
---
```

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

### InlineCode Examples

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

Demonstrates the basic usage of the InlineCode component for displaying command-line instructions and code variables.

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

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

### Advanced LayoutProvider Setup with Custom Breakpoints

Source: https://github.com/once-ui-system/docs/blob/main/src/content/once-ui/contexts/layoutProvider.mdx

This example shows an advanced setup where custom breakpoints are provided to the LayoutProvider. These breakpoints are used by Flex and Grid components for runtime logic like 'hide' and 'style', while utility classes adhere to standard breakpoints.

```tsx
import { IconProvider, ToastProvider, ThemeProvider, DataThemeProvider, LayoutProvider } from "@once-ui-system/core";

export function Providers({ children }: {
    children: React.ReactNode
}) {
    return (
      <LayoutProvider
        breakpoints={{
          s: 640,
          m: 1024,
          l: 1200,
        }}
      >
        <ThemeProvider>
          <DataThemeProvider>
            <ToastProvider>
              <IconProvider>
                {children}
              </IconProvider>
            </ToastProvider>
          </DataThemeProvider>
        </ThemeProvider>
      </LayoutProvider>
    );
}
```

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

### Simple IconProvider Setup

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

Demonstrates the basic usage of IconProvider by wrapping the application and passing a single icon instance. This is useful for straightforward icon management.

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

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

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

### Basic Input Example

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

Demonstrates the basic usage of the Input component with a label and a prefix icon.

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

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

### Advanced IconProvider Setup with Providers Component

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

Illustrates an advanced setup where IconProvider is included within a consolidated `Providers` component, alongside other context providers like ThemeProvider and ToastProvider. This promotes a cleaner application structure. It also shows how to import and use a comprehensive icon library.

```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;
```

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

### CodeBlock with Basic Example

Source: https://github.com/once-ui-system/docs/blob/main/src/content/once-ui/modules/codeBlock.mdx

Demonstrates the basic usage of the CodeBlock component, including a copy button and a simple JavaScript code snippet.

```tsx
const greeting = 'Hello, world!';
```

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

### Flex Layout Example

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

Demonstrates the usage of the Flex component for creating flexible layouts with properties like margin, gap, radius, padding, border, and background. This example shows how to create a row of elements with specific styling.

```tsx
<Flex
  marginTop="16"
  marginBottom="24"
  fillWidth
  gap="12"
  radius="l"
  padding="l"
  border="neutral-medium"
  background="surface"
>
  {Array(6)
    .fill(null)
    .map((_, index) => (
      <Background
        background="neutral-alpha-weak"
        lines={{display: true, color: "neutral-alpha-weak"}}
        key={index}
        shadow="m"
        fillWidth
        radius="m"
        height={8}
        border="neutral-alpha-medium"
      />
    ))}
</Flex>
```

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

### Simple ToastProvider Setup

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

Wrap your application with ToastProvider to enable global toast notifications. This is the most basic setup.

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

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

### InteractiveDetails Examples

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

Demonstrates basic usage, usage with descriptions, and usage with help tooltips for the InteractiveDetails component.

```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" }}
/>
```

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

### Advanced DataThemeProvider Setup with Configuration File

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

Illustrates an advanced setup using a dedicated configuration file (`once-ui.config.js`) for centralized style management. It shows how to import and apply these styles within a `Providers` component, ensuring a single source of truth for application-wide theming.

```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
    },
};
```

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

### Advanced ThemeProvider Setup with Configuration File

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

Illustrates an advanced setup where theme configurations are centralized in a `once-ui.config.js` file. It shows how to import these styles and use them within a `Providers` component, which also includes other necessary providers like DataThemeProvider, ToastProvider, and IconProvider.

```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"
};
```

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

### Configure Environment Variables

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

Set up the necessary environment variables in your `.env.local` file to connect your Magic Store to your Fourthwall account. These variables are crucial for syncing products and collections.

```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.

```

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

### Grid Layout Example

Source: https://github.com/once-ui-system/docs/blob/main/src/content/magic-docs/components.mdx

Illustrates the usage of the Grid component for creating responsive grid layouts. This example showcases a 3-column layout that adjusts to 2 columns on smaller screens, with defined gaps and styling for grid items.

```tsx
<Grid
    fillWidth
    columns="3"
    s={{columns: 2}}
    gap="16"
  >
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
</Grid>
```

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

### Accordion Example

Source: https://github.com/once-ui-system/docs/blob/main/src/content/once-ui/components/accordion.mdx

Demonstrates the usage of the Accordion component with an open and a closed state. It includes example content within the accordion panels.

```tsx
<Column fillWidth>
			<Accordion title="Example" open>
				<Text onBackground="neutral-weak">
					Example content
				</Text>
			</Accordion>
			<Accordion title="Example">
				<Text onBackground="neutral-weak">
					Example content
				</Text>
			</Accordion>
</Column>
```

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

### Badge Examples

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

Demonstrates the basic usage of the Badge component with different configurations for title, icon, and interactivity.

```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="#"/>
```

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

### Simple LayoutProvider Setup

Source: https://github.com/once-ui-system/docs/blob/main/src/content/once-ui/contexts/layoutProvider.mdx

This snippet demonstrates the basic usage of the LayoutProvider component. It should wrap the main application content to enable window size tracking for responsive components.

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

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

### Responsive Padding Table Example

Source: https://github.com/once-ui-system/docs/blob/main/src/content/once-ui/basics/spacing.mdx

Illustrates the mapping between CSS utility classes, their corresponding CSS variables, and the resulting spacing values for responsive padding.

```javascript
const responsivePaddingData = {
  headers: [
    { content: "Class" },
    { content: "Variable" },
    { content: "Value" },
  ],
  rows: [
    ["padding", "", ""],
    [".p-xs", "var(--responsive-space-xs)", "80 / 64 / 40"],
    [".p-s", "var(--responsive-space-s)", "40 / 24 / 16"],
    [".p-m", "var(--responsive-space-m)", "24 / 16 / 12"],
    [".p-l", "var(--responsive-space-l)", "16 / 12 / 8"],
    [".p-xl", "var(--responsive-space-xl)", "12 / 8 / 4"],
    
    ["padding-left + padding-right", "", ""],
    [".px-xs", "var(--responsive-space-xs)", "80 / 64 / 40"],
    [".px-s", "var(--responsive-space-s)", "40 / 24 / 16"],
    [".px-m", "var(--responsive-space-m)", "24 / 16 / 12"],
    [".px-l", "var(--responsive-space-l)", "16 / 12 / 8"],
    [".px-xl", "var(--responsive-space-xl)", "12 / 8 / 4"],

    ["padding-top + padding-bottom", "", ""],
    [".py-xs", "var(--responsive-space-xs)", "80 / 64 / 40"],
    [".py-s", "var(--responsive-space-s)", "40 / 24 / 16"],
    [".py-m", "var(--responsive-space-m)", "24 / 16 / 12"],
    [".py-l", "var(--responsive-space-l)", "16 / 12 / 8"],
    [".py-xl", "var(--responsive-space-xl)", "12 / 8 / 4"],

    ["padding-top", "", ""],
    [".pt-xs", "var(--responsive-space-xs)", "80 / 64 / 40"],
    [".pt-s", "var(--responsive-space-s)", "40 / 24 / 16"],
    [".pt-m", "var(--responsive-space-m)", "24 / 16 / 12"],
    [".pt-l", "var(--responsive-space-l)", "16 / 12 / 8"],
    [".pt-xl", "var(--responsive-space-xl)", "12 / 8 / 4"],

    ["padding-right", "", ""],
    [".pr-xs", "var(--responsive-space-xs)", "80 / 64 / 40"],
    [".pr-s", "var(--responsive-space-s)", "40 / 24 / 16"],
    [".pr-m", "var(--responsive-space-m)", "24 / 16 / 12"],
    [".pr-l", "var(--responsive-space-l)", "16 / 12 / 8"],
    [".pr-xl", "var(--responsive-space-xl)", "12 / 8 / 4"],

    ["padding-bottom", "", ""],
    [".pb-xs", "var(--responsive-space-xs)", "80 / 64 / 40"],
    [".pb-s", "var(--responsive-space-s)", "40 / 24 / 16"],
    [".pb-m", "var(--responsive-space-m)", "24 / 16 / 12"],
    [".pb-l", "var(--responsive-space-l)", "16 / 12 / 8"],
    [".pb-xl", "var(--responsive-space-xl)", "12 / 8 / 4"],

    ["padding-left", "", ""],
    [".pl-xs", "var(--responsive-space-xs)", "80 / 64 / 40"],
    [".pl-s", "var(--responsive-space-s)", "40 / 24 / 16"],
    [".pl-m", "var(--responsive-space-m)", "24 / 16 / 12"],
    [".pl-l", "var(--responsive-space-l)", "16 / 12 / 8"],
    [".pl-xl", "var(--responsive-space-xl)", "12 / 8 / 4"]
  ]
};
```

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

### CodeBlock with Preview

Source: https://github.com/once-ui-system/docs/blob/main/src/content/once-ui/modules/codeBlock.mdx

Shows how to use the CodeBlock component with a live preview of a UI element. This example includes a button within the preview pane.

```tsx
<CodeBlock
    copyButton
    preview={
      <Button size="s" weight="default" prefixIcon="sparkle">
        Click me
      </Button>
    }
    codes={[
      {
        code: "const greeting = 'Hello, world!';",
        language: "javascript",
        label: "Example"
      }
    ]}
/>
```