### Install Gantt Chart Component with Kibo UI CLI

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/docs/setup.mdx

Use this command to install the Gantt Chart component and its dependencies. The CLI integrates the component's code into your project, typically under the `@/components/kibo-ui/gantt/` directory.

```bash
npx kibo-ui@latest add gantt
```

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

### Table Simple Version

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/table.mdx

A basic implementation of the table component. No specific setup or imports are shown in this example.

```jsx
import { Preview } from "@/components/preview";

export default function TablePage() {
  return (
    <div className="container relative">
      <div className="flex items-center justify-between space-y-2">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Tables</h2>
          <p className="text-muted-foreground">
            Display data in a table format. 
          </p>
        </div>
        <div className="flex items-center space-x-2">
          <Preview path="table-simple" />
        </div>
      </div>
    </div>
  );
}
```

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

### Initialize shadcn/ui

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/docs/setup.mdx

This command initializes shadcn/ui in your project, which is a prerequisite for installing Kibo UI components. Ensure Tailwind CSS is configured.

```bash
npx shadcn@latest init
```

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

### Inline Choiceboxes Example

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/choicebox.mdx

Demonstrates the inline layout for choiceboxes. Ensure the 'choicebox-inline' component is correctly imported and used.

```javascript
import {
	ChoiceBox,
	ChoiceBoxGroup,
} from "@/components/ui/choicebox";

export function ChoiceboxInline() {
	return (
		<ChoiceBoxGroup className="grid grid-cols-2 gap-3">
			<ChoiceBox
				value="inline-1"
				label="Inline Choicebox 1"
				description="This is the first inline choicebox."
			>
				<div className="p-4">
					<p className="text-sm font-medium leading-none">Content 1</p>
					<p className="text-sm text-muted-foreground">
						Additional details for content 1.
					</p>
				</div>
			</ChoiceBox>
			<ChoiceBox
				value="inline-2"
				label="Inline Choicebox 2"
				description="This is the second inline choicebox."
			>
				<div className="p-4">
					<p className="text-sm font-medium leading-none">Content 2</p>
					<p className="text-sm text-muted-foreground">
						Additional details for content 2.
					</p>
				</div>
			</ChoiceBox>
		</ChoiceBoxGroup>
	);
}
```

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

### QR Code Styling Example

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/qr-code.mdx

Demonstrates how to style the QR code by wrapping it in a div and applying custom class names. This allows for flexible styling of the QR code container.

```jsx
import { QRCode } from "@/components/ui/qr-code";

export default function Page() {
  return (
    <div className="flex items-center justify-center p-10">
      <QRCode
        value="https://shadcn.com/"
        className="h-40 w-40"
      />
    </div>
  );
}
```

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

### Add New Component Command

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/docs/new-components.mdx

Use this command to add a new component to your Kibo UI project. Ensure you have the Kibo UI package installed.

```bash
npx kibo-ui add ...
```

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

### QR Code Server Component Example

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/qr-code.mdx

Illustrates using the QRCode component as a React Server Component. When used as a server component, foreground and background colors must be provided as hex values.

```jsx
import { QRCode } from "@/components/ui/qr-code";

export default function Page() {
  return (
    <div className="flex items-center justify-center p-10">
      <QRCode
        value="https://shadcn.com/"
        foreground="#000000"
        background="#ffffff"
        className="h-40 w-40"
      />
    </div>
  );
}
```

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

### Controlled Relative Time Component

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/relative-time.mdx

Use this example for a controlled time state where the date is explicitly provided. This allows for manual updates or specific time displays.

```javascript
import { RelativeTime } from "@kibo/ui/relative-time";
import { useState } from "react";

function App() {
  const [date, setDate] = useState(new Date());

  return (
    <RelativeTime date={date} />
  );
}
```

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

### QR Code Robustness Example

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/qr-code.mdx

Shows how to adjust the error correction robustness of the QR code. Higher robustness levels improve error resistance at the cost of reduced data capacity. The default robustness is 'medium'.

```jsx
import { QRCode } from "@/components/ui/qr-code";

export default function Page() {
  return (
    <div className="flex items-center justify-center p-10">
      <QRCode
        value="https://shadcn.com/"
        robustness="high"
        className="h-40 w-40"
      />
    </div>
  );
}
```

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

### Marquee Component Without Fading

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/marquee.mdx

Example of the Marquee component used without the fading effect. Ensure the 'react-fast-marquee' library is installed.

```jsx
import Marquee from "react-fast-marquee";

function MarqueeNoFade() {
  return (
    <Marquee>
      {[...Array(5)].map((_, i) => (
        <div
          key={i}
          className="flex h-24 w-24 items-center justify-center rounded-md bg-primary text-primary-foreground"
        >
          {i + 1}
        </div>
      ))}
    </Marquee>
  );
}

export default MarqueeNoFade;
```

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

### Marquee Component With Custom Spacing

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/marquee.mdx

Example of the Marquee component configured with custom spacing between items. This is useful for controlling the visual rhythm of the scrolling content.

```jsx
import Marquee from "react-fast-marquee";

function MarqueeSpacing() {
  return (
    <Marquee
      gradient={false}
      speed={50}
      play={true}
      loop={0}
      delay={2}
      pauseOnHover
      direction="left"
      className="[&>div]:ml-4"
    >
      {[...Array(5)].map((_, i) => (
        <div
          key={i}
          className="flex h-24 w-24 items-center justify-center rounded-md bg-primary text-primary-foreground"
        >
          {i + 1}
        </div>
      ))}
    </Marquee>
  );
}

export default MarqueeSpacing;
```

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

### Fetch and Cache GitHub Contributions

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/contribution-graph.mdx

Example of fetching and caching GitHub contribution data using the GitHub Contributions API. It includes caching with a revalidation period of one day.

```typescript
const username = 'haydenbleasel';

const getCachedContributions = unstable_cache(
  async () => {
    const url = new URL(`/v4/${username}`, 'https://github-contributions-api.jogruber.de');
    const response = await fetch(url);
    const data = (await response.json()) as Response;
    const total = data.total[new Date().getFullYear()];

    return { contributions: data.contributions, total };
  },
  ['github-contributions'],
  { revalidate: 60 * 60 * 24 },
);
```

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

### Update Kibo CLI

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/docs/troubleshooting.mdx

Run this command to ensure you are using the latest version of the Kibo CLI. This can resolve issues where commands like 'npx kibo-ui add' do not function as expected.

```bash
npx kibo-ui@latest
```

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

### Configure Multiple MCP Servers

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/docs/mcp.mdx

Integrate Kibo UI alongside other MCP servers, such as GitHub or a local filesystem server, by adding them to your MCP config file.

```json
{
  "mcpServers": {
    "kibo-ui": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://www.kibo-ui.com/api/mcp/mcp"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"]
    },
    "filesystem": {
      "command": "npx", 
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    }
  }
}
```

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

### Configure Kibo UI as an MCP Server

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/docs/mcp.mdx

Add this configuration to your AI tool's MCP config file to enable Kibo UI integration. Restart your AI tool after applying changes.

```json
{
  "mcpServers": {
    "kibo-ui": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://www.kibo-ui.com/api/mcp/mcp"
      ]
    }
  }
}
```

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

### Import Spinner Component

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/spinner.mdx

Replace the default shadcn spinner import with the Kibo UI spinner import to utilize the extended variants.

```tsx
import { Spinner } from "@/components/ui/spinner"; // [!code --]
import { Spinner } from "@/components/kibo-ui/spinner"; // [!code ++]
```

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

### Ticker with Currencies and Locales

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/ticker.mdx

Demonstrates the Ticker component's support for various ISO 4217 currencies and IETF BCP 47 locales. Configure the component with specific currency and locale props as needed.

```javascript
import {
	Ticker,
	TickerIcon,
	TickerSymbol,
	TickerPrice,
	TickerInfo,
	TickerTailText,
} from "@/registry/ui/ticker";

<Ticker>
	<TickerIcon />
	<TickerSymbol />
	<TickerPrice className="text-red-500" />
	<TickerInfo>
		<TickerTailText>
			{/* Example: Displaying price change for a specific currency and locale */}
			<span className="text-muted-foreground">
				{new Intl.NumberFormat("en-US", {
					style: "currency",
					currency: "USD",
				}).format(1000)}
			</span>
			<span className="text-muted-foreground">
				{new Intl.NumberFormat("en-US", {
					style: "percent",
				}).format(0.0234)}
			</span>
		</TickerTailText>
	</TickerInfo>
</Ticker>
```

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

### Raw Marquee Component Usage

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/marquee.mdx

Demonstrates using the Marquee component with raw, pre-defined options. This allows for granular control over its behavior and appearance.

```jsx
import Marquee from "react-fast-marquee";

function MarqueeRaw() {
  return (
    <Marquee
      gradient={false}
      speed={50}
      play={true}
      loop={0}
      delay={2}
      pauseOnHover
      direction="left"
    >
      {[...Array(5)].map((_, i) => (
        <div
          key={i}
          className="flex h-24 w-24 items-center justify-center rounded-md bg-primary text-primary-foreground"
        >
          {i + 1}
        </div>
      ))}
    </Marquee>
  );
}

export default MarqueeRaw;
```

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

### Use Kibo Announcement Component

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/docs/usage.mdx

Import and use the Announcement component from the Kibo UI directory within your JSX. Compose it with subcomponents like AnnouncementTag and AnnouncementTitle. You can style and configure it as needed, or even modify the component's source code directly.

```tsx
'use client';

import {
  Announcement,
  AnnouncementTag,
  AnnouncementTitle,
} from '@/components/kibo-ui/announcement';
import { ArrowUpRightIcon } from 'lucide-react';

const Hero = () => (
  <>
    <Announcement>
      <AnnouncementTag>Latest update</AnnouncementTag>
      <AnnouncementTitle>
        New feature added
        <ArrowUpRightIcon size={16} className="shrink-0 text-muted-foreground" />
      </AnnouncementTitle>
    </Announcement>
    {/* The rest of your page... */}
  </>
);

export default Hero;
```

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

### Ticker with Percentage Change

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/ticker.mdx

Displays a financial ticker with the percentage change in price. Ensure the necessary components are imported and available for composition.

```javascript
import {
	Ticker,
	TickerIcon,
	TickerSymbol,
	TickerPrice,
	TickerInfo,
	TickerTailText,
} from "@/registry/ui/ticker";

<Ticker>
	<TickerIcon />
	<TickerSymbol />
	<TickerPrice />
	<TickerInfo>
		<TickerTailText />
	</TickerInfo>
</Ticker>
```

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

### Inline Ticker Usage

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/ticker.mdx

Shows how to use the Ticker component inline within other elements. This is useful for embedding financial data directly into text flows.

```javascript
import {
	Ticker,
	TickerIcon,
	TickerSymbol,
	TickerPrice,
	TickerInfo,
	TickerTailText,
} from "@/registry/ui/ticker";

<p>
	Market Update: <Ticker>
		<TickerIcon />
		<TickerSymbol />
		<TickerPrice />
		<TickerInfo>
			<TickerTailText />
		</TickerInfo>
	</Ticker>
</p>
```

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

### Relative Time with Custom Time Format

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/relative-time.mdx

This snippet shows how to format only the time portion of the display. Configure the `formatOptions` with `timeStyle` to achieve custom time formatting.

```javascript
import { RelativeTime } from "@kibo/ui/relative-time";

function App() {
  return (
    <RelativeTime date={new Date()} formatOptions={{ timeStyle: "medium" }} />
  );
}
```

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

### Import RSC CodeBlockContent

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/code-block.mdx

Import the RSC version of the Code Block component by importing `CodeBlockContent` from `code-block/server`. This is useful for React Server Components.

```tsx
import {
  CodeBlock,
  CodeBlockHeader,
  // ... the rest of the components
  CodeBlockBody,
  // CodeBlockContent,
} from '@/components/kibo-ui/code-block';
import { CodeBlockContent } from '@/components/kibo-ui/code-block/server';
```

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

### Apply Typography Class

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/typography.mdx

Add the `typography` class to a container element to apply pre-configured typography styles. This is useful for ensuring consistent text formatting across your application.

```tsx
<div className="typography">
  <h1>Typography</h1>
</div>
```

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

### Configure TypeScript Paths Alias

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/docs/troubleshooting.mdx

Ensure your tsconfig.json includes a paths alias for '@/' to resolve component import errors. This configuration is crucial for module resolution in projects using this alias.

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

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

### Relative Time with Custom Date Format

Source: https://github.com/shadcnblocks/kibo/blob/main/apps/docs/content/components/relative-time.mdx

Use this snippet to display time with a custom date format. Ensure the component is configured with the desired date format string.

```javascript
import { RelativeTime } from "@kibo/ui/relative-time";

function App() {
  return (
    <RelativeTime date={new Date()} formatOptions={{ dateStyle: "full" }} />
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.