### Start Development Server

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/AGENTS.md

Command to start the development server for the 8bitcn/ui project. This allows for real-time development and testing of components.

```bash
pnpm dev
```

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

### Install 8bitcn-ui Theme Selector

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/components/theme-selector.md

Commands to install the theme selector package and required dependencies like react-shiki and lucide-react.

```bash
npx shadcn@latest add @8bitcn/theme-selector
npm install react-shiki lucide-react
```

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

### Diagnose Ultracite Setup

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/AGENTS.md

Command to diagnose the Ultracite setup. This can help in troubleshooting any configuration or installation issues with Ultracite.

```bash
npx ultracite doctor
```

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

### Install Dependencies with pnpm (Bash)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/contributing.md

Installs all project dependencies using pnpm. This command should be run after cloning the repository and navigating to the project directory.

```bash
pnpm i
```

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

### Install 8bit Kbd Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/kbd.mdx

Provides the command to install the @8bitcn/kbd package using pnpm. This is a prerequisite for using the Kbd component.

```bash
pnpm dlx shadcn@latest add @8bitcn/kbd
```

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

### Install 8-bit Empty Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/empty.mdx

This command installs the 8-bit Empty component using pnpm. It's a prerequisite for using the component in your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/empty
```

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

### Install Login Page Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/authentication/login-page.mdx

Provides the command to install the @8bitcn/login-page component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/login-page
```

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

### Install 8-bit Progress Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/progress.mdx

The installation command for adding the 8-bit progress component to your project using the shadcn CLI. This requires the shadcn/ui setup in your environment.

```bash
pnpm dlx shadcn@latest add @8bitcn/progress
```

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

### 8bitcn Carousel Options Example

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/carousel.mdx

Explains how to configure advanced options for the 8bitcn Carousel. This example shows setting 'align' to 'start' and enabling 'loop' for continuous scrolling.

```tsx
<Carousel
  opts={{
    align: "start",
    loop: true,
  }}
>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
</Carousel>
```

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

### Install Theme Selector with pnpm

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/theme-selector.mdx

This command installs the theme-selector package using pnpm. It's a direct command-line instruction for setting up the component.

```bash
pnpm dlx shadcn@latest add @8bitcn/theme-selector
```

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

### Install 8-bit Switch component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/switch.mdx

Use the shadcn CLI to add the switch component to your project. This command installs the necessary dependencies and component files.

```bash
pnpm dlx shadcn@latest add @8bitcn/switch
```

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

### Install 8-bit Chapter Intro component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/chapter-intro.mdx

Use the shadcn CLI to add the Chapter Intro component to your project. This command installs the necessary dependencies and files into your local directory.

```shell
pnpm dlx shadcn@latest add @8bitcn/chapter-intro
```

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

### Install 8-bit Select Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/select.mdx

Command to install the 8-bit Select component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/select
```

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

### Install 8-bit Game Over Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/game-over.mdx

The installation command uses the shadcn CLI to add the game-over block to your project. This requires a pre-configured shadcn/ui environment.

```bash
pnpm dlx shadcn@latest add @8bitcn/game-over
```

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

### Install 8bitcn Quest Log Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/quest-log.mdx

Command to install the 8bitcn Quest Log component using pnpm dlx. This command fetches and executes the shadcn-ui installer to add the quest-log component to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/quest-log
```

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

### Install 8-bit Input Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/input.mdx

Provides the command to install the 8-bit input component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/input
```

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

### Custom Theme Switching with Button

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/theme-selector.mdx

This TypeScript example demonstrates how to implement custom theme switching using a button. It leverages the useThemeConfig hook to get the current theme and a function to set a new theme, specifically switching to the 'Sega' theme in this example.

```tsx
import { useThemeConfig } from "@/components/active-theme"
import { Theme } from "@/lib/themes"

function MyComponent() {
  const { activeTheme, setActiveTheme } = useThemeConfig()
  
  return (
    <div>
      <p>Current theme: {activeTheme}</p>
      <button onClick={() => setActiveTheme(Theme.Sega)}>
        Switch to Sega
      </button>
    </div>
  )
}
```

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

### Install 8bit Menubar Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/menubar.mdx

Command to install the 8-bit menubar component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/menubar
```

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

### Install 8bitcn/ui Components using shadcn CLI

Source: https://context7.com/theorcdev/8bitcn-ui/llms.txt

Demonstrates how to install individual or multiple components from the 8bitcn/ui library using the shadcn CLI. This process leverages the shadcn registry for component management.

```bash
# Install a single component
pnpm dlx shadcn@latest add @8bitcn/button

# Install multiple components
pnpm dlx shadcn@latest add @8bitcn/card @8bitcn/input @8bitcn/badge
```

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

### Install 8bitcn Main Menu Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/main-menu.mdx

Provides the command to install the 8-bit main menu component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/main-menu
```

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

### Install 8bitcn UI component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/README.md

Uses the shadcn CLI to add a specific component to your project. This command downloads the component code into your local directory.

```bash
pnpm dlx shadcn@latest add @8bitcn/button
```

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

### Install 8-bit Dashboard Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/dashboard/dashboard-01.mdx

Command to install the dashboard-01 component using the shadcn CLI. This adds the necessary files to your project dependencies.

```bash
pnpm dlx shadcn@latest add @8bitcn/dashboard-01
```

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

### Install Navigation Menu Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/navigation-menu.mdx

Command to install the navigation menu component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/navigation-menu
```

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

### Install 8-bit Accordion component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/accordion.mdx

The installation command uses the shadcn CLI to add the accordion component to your project. It requires a configured shadcn-ui environment.

```bash
pnpm dlx shadcn@latest add @8bitcn/accordion
```

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

### Install 8-bit Drawer Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/drawer.mdx

Command to install the 8-bit Drawer component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/drawer
```

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

### Install Leaderboard Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/leaderboard.mdx

Use the shadcn CLI to add the leaderboard component to your project. This command fetches the necessary files and dependencies.

```bash
pnpm dlx shadcn@latest add @8bitcn/leaderboard
```

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

### Install Difficulty Select Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/difficulty-select.mdx

The installation command for the 8-bit difficulty select component using the shadcn CLI. This adds the necessary files to your project dependencies.

```shell
pnpm dlx shadcn@latest add @8bitcn/difficulty-select
```

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

### Install 8-bit Context Menu Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/context-menu.mdx

Provides the command to install the 8-bit context menu component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/context-menu
```

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

### Install 8-bit Game Progress Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/game-progress.mdx

Installs the game-progress component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/game-progress
```

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

### Install Dialogue Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/dialogue.mdx

Use the CLI command to add the Dialogue component to your project. This command fetches the necessary files from the @8bitcn registry.

```bash
pnpm dlx shadcn@latest add @8bitcn/dialogue
```

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

### Install Victory Screen Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/victory-screen.mdx

Command to install the Victory Screen component using the shadcn CLI tool.

```bash
pnpm dlx shadcn@latest add @8bitcn/victory-screen
```

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

### Install 8bitcn XP Bar Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/xp-bar.mdx

Provides the command to install the XP Bar component using pnpm. This is a prerequisite for using the component in your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/xp-bar
```

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

### Install 8bitcn UI Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/AGENTS.md

Command to install a new 8bitcn UI component using pnpm. This command leverages the shadcn/ui CLI to add components from the 8bitcn registry.

```bash
pnpm dlx shadcn@latest add @8bitcn/[component-name]
```

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

### Install 8-bit Alert Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/alert.mdx

Command to install the 8-bit alert component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/alert
```

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

### Install Login Form Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/authentication/login-form-with-image.mdx

Use the shadcn CLI to add the login form component to your project. This command fetches the necessary files from the @8bitcn registry.

```bash
pnpm dlx shadcn@latest add @8bitcn/login-form-with-image
```

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

### Implement Theme Selector Components

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/components/theme-selector.md

Examples of using the main ThemeSelector, the standalone SelectThemeDropdown, and the ActiveThemeProvider with initial configuration.

```tsx
<ThemeSelector />;

// Standalone Dropdown
import { useThemeConfig } from "@/components/active-theme";
import { SelectThemeDropdown } from "@/components/select-theme-dropdown";

function MyComponent() {
  const { activeTheme, setActiveTheme } = useThemeConfig();
  return <SelectThemeDropdown activeTheme={activeTheme} setActiveTheme={setActiveTheme} />;
}

// Provider with initial theme
<ActiveThemeProvider initialTheme="sega">{children}</ActiveThemeProvider>;
```

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

### Install 8-bit Separator component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/separator.mdx

The installation command for the 8-bit separator component using the shadcn CLI. This command adds the necessary files to your project dependencies.

```shell
pnpm dlx shadcn@latest add @8bitcn/separator
```

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

### Install 8-bit Tabs Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/tabs.mdx

Provides the command to install the 8-bit tabs component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/tabs
```

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

### Install 8bitcn Carousel

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/carousel.mdx

Command to install the 8bitcn Carousel component using pnpm. This command downloads and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/carousel
```

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

### Install 8bitcn Toggle Group Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/toggle-group.mdx

Provides the command to install the 8bitcn toggle group component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/toggle-group
```

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

### Install 8-bit Sheet component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/sheet.mdx

The installation command for the 8-bit Sheet component using the shadcn CLI. This adds the necessary files to your project's component directory.

```bash
pnpm dlx shadcn@latest add @8bitcn/sheet
```

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

### Internal Import Alias Example

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/AGENTS.md

Example of using the `@/*` path alias for internal imports in TypeScript/React components. This is configured in tsconfig.json for cleaner imports.

```tsx
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
```

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

### Install 8bitcn Loading Screen

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/loading-screen.mdx

Command to install the 8bitcn Loading Screen component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/loading-screen
```

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

### Install 8-bit Input OTP Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/input-otp.mdx

Provides the command to install the 8-bit Input OTP component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/input-otp
```

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

### Install 8-bit Textarea component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/textarea.mdx

Use the shadcn CLI to add the Textarea component to your project. This command installs the necessary dependencies and component files into your local directory.

```bash
pnpm dlx shadcn@latest add @8bitcn/textarea
```

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

### Install 8-bit Audio Settings Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/audio-settings.mdx

Command to install the @8bitcn/audio-settings package using pnpm. This command fetches and adds the necessary files for the audio settings component.

```bash
pnpm dlx shadcn@latest add @8bitcn/audio-settings
```

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

### Install 8-bit Collapsible Component (pnpm)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/collapsible.mdx

Installs the 8-bit collapsible component using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/collapsible
```

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

### Install 8bitcn Table Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/table.mdx

Command to install the 8-bit table component using pnpm. This command fetches and adds the necessary package to your project, enabling the use of the table component.

```bash
pnpm dlx shadcn@latest add @8bitcn/table
```

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

### Install Mana Bar component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/mana-bar.mdx

Use the shadcn CLI to add the Mana Bar component to your project. This command automatically installs the necessary dependencies.

```bash
pnpm dlx shadcn@latest add @8bitcn/mana-bar
```

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

### Basic 8-bit Drawer Usage (TypeScript)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/drawer.mdx

Example of how to implement a basic 8-bit Drawer component. It includes a trigger to open the drawer and content with a title, description, and footer actions.

```typescript
<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

```

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

### Basic 8-bit Command Component Usage (TypeScript)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/command.mdx

A basic example demonstrating the structure and usage of the 8-bit command component. It includes an input field, suggestions, and settings with shortcuts.

```typescript
<Command>
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>
        Profile
        <CommandShortcut>⌘P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        Billing
        <CommandShortcut>⌘B</CommandShortcut>
      </CommandItem>
      <CommandItem>
        Settings
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

```

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

### Install 8-bit Popover Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/popover.mdx

Provides the command to install the 8-bit Popover component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/popover
```

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

### Install 8-bit Multiple Bar Chart

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/charts/chart-bar-multiple.mdx

Command to install the chart-bar component using the shadcn CLI. This requires the project to be configured with the 8bitcn-ui registry.

```bash
pnpm dlx shadcn@latest add @8bitcn/chart-bar
```

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

### Install 8-bit Login Form

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/authentication/login-form.mdx

Command to install the 8-bit Login Form component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/login-form
```

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

### Clone Repository (Bash)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/contributing.md

Clones the 8bitcn.com repository to your local machine. This is the first step to start contributing.

```bash
git clone https://github.com/your-username/8bitcn.git
```

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

### Install 8bitcn Save Slots Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/save-slots.mdx

Command to install the '@8bitcn/save-slots' package using pnpm. This command fetches and adds the necessary package to your project's dependencies.

```bash
pnpm dlx shadcn@latest add @8bitcn/save-slots
```

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

### Install 8-bit Command Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/command.mdx

Command to install the 8-bit command component using pnpm. This command fetches the latest version of shadcn and adds the @8bitcn/command package.

```bash
pnpm dlx shadcn@latest add @8bitcn/command
```

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

### Use 8-bit Input Component (TypeScript)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/input.mdx

Shows a basic example of how to render the 8-bit Input component in a React application using TypeScript. It includes a placeholder for user input.

```typescript
<Input placeholder="Enter text" />
```

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

### Install 8-bit Avatar Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/avatar.mdx

Provides the command to install the 8-bit Avatar component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/avatar
```

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

### Install 8-bit Bar Chart Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/charts/chart-bar.mdx

Use the shadcn CLI to add the chart component to your project. This command installs the necessary dependencies and files into your local directory.

```shell
pnpm dlx shadcn@latest add @8bitcn/chart
```

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

### Install 8-bit Login Form Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/authentication/login-form-with-icons.mdx

Command to install the login form block using the shadcn CLI. This command adds the necessary files to your project dependencies.

```bash
pnpm dlx shadcn@latest add @8bitcn/login-form-2
```

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

### Install 8-bit Toggle Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/toggle.mdx

Command to install the 8-bit toggle component using pnpm. This command fetches the latest version of shadcn and adds the toggle component to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/toggle
```

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

### Install 8-bit Sidebar Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/sidebar.mdx

Command to install the 8-bit sidebar component using the shadcn CLI tool. This command adds the necessary files to your project dependencies.

```bash
pnpm dlx shadcn@latest add @8bitcn/sidebar
```

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

### Basic Navigation Menu Structure (TypeScript)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/navigation-menu.mdx

A basic example demonstrating the structure of the navigation menu component. It includes a menu list with a menu item, trigger, content, and link.

```typescript
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

```

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

### Install 8-bit Alert Dialog

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/alert-dialog.mdx

Command to install the 8-bit alert dialog component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/alert-dialog
```

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

### Install 8-bit Hover Card

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/hover-card.mdx

Use the shadcn CLI to add the Hover Card component to your project. This command installs the necessary dependencies and files into your components directory.

```bash
pnpm dlx shadcn@latest add @8bitcn/hover-card
```

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

### Install 8-bit Date Picker

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/date-picker.mdx

Command to install the 8-bit Date Picker component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/date-picker
```

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

### Build for Production

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/AGENTS.md

Command to build the 8bitcn/ui project for production deployment. This optimizes the code for performance and size.

```bash
pnpm build
```

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

### Import and Use 8-bit Chart

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/chart.mdx

Import the ChartExample component from the local UI blocks directory and render it within your React application. Ensure the component has been installed via the CLI before usage.

```tsx
import { ChartExample } from "@/components/ui/8bit/blocks/chart"

<ChartExample />
```

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

### Install 8bitcn Friend List Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/friend-list.mdx

Command to install the 8bitcn Friend List component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/friend-list
```

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

### Display 8-bit Game Progress Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/game-progress.mdx

Renders the 8-bit Game Progress component. This is a basic usage example, assuming the component has been correctly installed and imported.

```tsx
import GameProgress from "@/components/ui/8bit/blocks/game-progress";

<GameProgress />
```

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

### Install 8-bit Label component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/label.mdx

Command to add the Label component to your project using the shadcn CLI. This is a prerequisite for using the component in your application.

```bash
pnpm dlx shadcn@latest add @8bitcn/label
```

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

### Install 8-bit Pause Menu component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/pause-menu.mdx

Command to install the pause menu component using the shadcn CLI tool. This adds the necessary files to your project's components directory.

```bash
pnpm dlx shadcn@latest add @8bitcn/pause-menu
```

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

### Install Retro Mode Switcher Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/retro-mode-switcher.mdx

Provides the command to add the Retro Mode Switcher component to your project using pnpm. This command fetches and installs the necessary package and its dependencies.

```bash
pnpm dlx shadcn@latest add @8bitcn/retro-mode-switcher
```

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

### Install 8-bit Dropdown Menu Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/dropdown-menu.mdx

Provides the command to install the 8-bit dropdown menu component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/dropdown-menu
```

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

### Implement 8-bit Sidebar in Layout

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/sidebar.mdx

Example showing how to integrate the AppSidebar component into a Next.js layout file. It utilizes the SidebarProvider to manage state and wraps the main content area.

```tsx
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/ui/8bit/blocks/sidebar"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        {children}
      </main>
    </SidebarProvider>
  )
}
```

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

### Install Player Profile Card Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/components/ui/8bit/blocks/README-player-profile-card.md

Command to add the PlayerProfileCard component to your project using the shadcn CLI tool.

```bash
pnpm dlx shadcn@latest add @8bitcn/player-profile-card
```

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

### 8-bit Component Wrapper Pattern

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/AGENTS.md

Example of the wrapper pattern used for 8-bit components. It shows how a shadcn/ui component is wrapped with additional elements for retro styling.

```tsx
import { Button as ShadcnButton } from "@/components/ui/button"
import "./styles/retro.css"

export const Button = ({ className, ...props }: ButtonProps) => {
  return (
    <div className="relative">
      <ShadcnButton className={cn("rounded-none", className)} {...props} />
      {/* Pixelated border elements */}
    </div>
  )
}
```

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

### 8-bit Select Component Usage (TypeScript/React)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/select.mdx

Example of how to use the 8-bit Select component in a React application with TypeScript. It demonstrates the basic structure for creating a select input with options.

```tsx
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/8bit/select"

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>
```

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

### Install 8-bit Breadcrumb Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/breadcrumb.mdx

Installs the 8-bit breadcrumb component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/breadcrumb
```

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

### Import and Basic Usage of Spinner

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/spinner.mdx

Demonstrates how to import the Spinner component from the UI library and render it with default settings.

```tsx
import { Spinner } from "@/components/ui/8bit/spinner"

<Spinner />
```

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

### Select Component Examples (React)

Source: https://context7.com/theorcdev/8bitcn-ui/llms.txt

Demonstrates the Select component, a pixelated dropdown menu. It includes subcomponents like SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, and SelectValue for building selection interfaces.

```tsx
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/8bit/select";

export default function SelectDemo() {
  return (
    <Select>
      <SelectTrigger className="w-[200px]">
        <SelectValue placeholder="Select class" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Character Classes</SelectLabel>
          <SelectItem value="warrior">Warrior</SelectItem>
          <SelectItem value="mage">Mage</SelectItem>
          <SelectItem value="rogue">Rogue</SelectItem>
          <SelectItem value="healer">Healer</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}
```

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

### Usage of 8-bit Alert Dialog Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/alert-dialog.mdx

Example demonstrating how to use the 8-bit alert dialog component in a React application. It includes importing necessary components and structuring the dialog.

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/8bit/alert-dialog"
import { Button } from "@/components/ui/8bit/button"

<AlertDialog>
  <AlertDialogTrigger><Button variant="outline">Open</Button></AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

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

### Basic Context Menu Usage (TypeScript)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/context-menu.mdx

A simplified example of using the 8-bit context menu component in TypeScript. This snippet focuses on the core structure of the context menu, trigger, and items.

```tsx
import { ContextMenu } from "@/components/ui/8bit/context-menu";

<ContextMenu>
  <ContextMenuTrigger>Right click</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

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

### Import and Use Login Page Component (TypeScript)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/authentication/login-page.mdx

Demonstrates how to import and use the LoginPage component within a React application. This snippet shows the basic setup for integrating the login page into your project.

```tsx
import LoginPage from "@/components/ui/8bit/blocks/login-page"

// Use as a full page component
export default function Page() {
  return <LoginPage />
}
```

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

### Install 8-bit Badge Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/badge.mdx

Command to add the 8-bit badge component to your project using the shadcn CLI. This requires the project to be configured with the 8bitcn-ui registry.

```bash
pnpm dlx shadcn@latest add @8bitcn/badge
```

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

### Usage of 8-bit Alert Component (React/TypeScript)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/alert.mdx

Example of how to import and use the 8-bit alert component in a React application with TypeScript. It demonstrates rendering an alert with a title and description.

```tsx
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/8bit/alert";

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>
```

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

### Render 8bitcn Table Component (TypeScript)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/table.mdx

Example of rendering an 8-bit table component with sample invoice data. This snippet demonstrates how to structure the table, including captions, headers, and body rows with cells.

```tsx
<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

```

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

### Import and Use 8-bit Audio Settings Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/audio-settings.mdx

Example of importing and rendering the 8-bit Audio Settings component in a React application. It demonstrates how to apply custom styling using Tailwind CSS classes.

```tsx
import AudioSettings from "@/components/ui/8bit/blocks/audio-settings";

<AudioSettings className="w-full max-w-[600px]" />
```

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

### Basic Kbd Component Usage

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/kbd.mdx

Demonstrates the basic usage of the Kbd component by importing it and rendering a simple key combination.

```tsx
import { Kbd } from "@/components/ui/8bit/kbd"

<Kbd>IDDQD</Kbd>
```

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

### Install 8-bit Slider Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/slider.mdx

Command to install the 8-bit slider component using pnpm and shadcn-ui. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/slider
```

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

### Import and Use Chapter Intro component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/chapter-intro.mdx

Import the ChapterIntro component into your React file and render it with the desired props. The component accepts properties for title, subtitle, background source, height, alignment, and background darkening.

```tsx
import ChapterIntro from "@/components/ui/8bit/blocks/chapter-intro";

<ChapterIntro
  title="LEVEL 1: FIERY SKELETONS"
  subtitle="Defeat the skeletons to unlock the gate."
  backgroundSrc="/images/fiery-skeletons.png"
  height="md"
  align="center"
  darken={0.5}
/>
```

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

### Install 8-bit Checkbox Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/checkbox.mdx

Command to add the 8-bit Checkbox component to your project using pnpm and shadcn. This command fetches and installs the necessary package.

```bash
pnpm dlx shadcn@latest add @8bitcn/checkbox
```

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

### Install 8-bit Calendar Block

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/calendar/calendar-block.mdx

Command to install the 8-bit Calendar Block component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/calendar
```

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

### Import and use 8bitcn Button component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/README.md

Demonstrates how to import the Button component from the local UI directory and render it in a React functional component. Requires appropriate path aliases to be configured in the project.

```typescript
import { Button } from "@/components/ui/8bit";

export default function App() {
  return <Button>Click me</Button>;
}
```

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

### Configure Theme Provider in Root Layout

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/components/theme-selector.md

Wraps the application root with the ActiveThemeProvider to enable global theme state management.

```tsx
import { ActiveThemeProvider } from "@/components/active-theme";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ActiveThemeProvider>{children}</ActiveThemeProvider>
      </body>
    </html>
  );
}
```

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

### Progress Component Examples (React)

Source: https://context7.com/theorcdev/8bitcn-ui/llms.txt

Demonstrates the usage of the Progress component for displaying completion status. Supports smooth and retro segmented styles, custom heights, progress colors, and full progress visualization.

```tsx
import { Progress } from "@/components/ui/8bit/progress";

export default function ProgressDemo() {
  return (
    <div className="space-y-6 w-[400px]">
      {/* Default smooth progress */}
      <Progress value={60} />

      {/* Retro segmented style (20 blocks) */}
      <Progress value={75} variant="retro" />

      {/* Custom height */}
      <Progress value={50} className="h-4" variant="retro" />

      {/* Custom progress color */}
      <Progress value={80} progressBg="bg-green-500" />

      {/* Full progress */}
      <Progress value={100} variant="retro" progressBg="bg-yellow-500" />
    </div>
  );
}
```

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

### Navigate to Project Directory (Bash)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/contributing.md

Changes the current directory to the root of the cloned 8bitcn.com project. This is necessary before running any project commands.

```bash
cd 8bitcn
```

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

### Install 8-bit Radio Group Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/radio-group.mdx

Command to install the 8-bit radio group component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/radio-group
```

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

### Next.js Image Component Usage

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/AGENTS.md

Illustrates the recommended usage of Next.js's `<Image>` component instead of standard `<img>` tags for all images within the project.

```jsx
<Image src="/path/to/image.png" alt="Description" width={500} height={300} />
```

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

### Install 8-bit Health Bar Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/health-bar.mdx

Provides the command to install the 8-bit health bar component using pnpm. This command fetches and adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @8bitcn/health-bar
```

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

### Implementing the Tooltip Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/tooltip.mdx

Demonstrates the basic structure of the Tooltip component, wrapping a trigger element with a provider to enable hover functionality.

```tsx
<TooltipProvider>
  <Tooltip delayDuration={500}>
    <TooltipTrigger>
      <Button variant="outline">Hover</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
```

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

### Install 8-bit Step Area Chart

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/charts/chart-area-step.mdx

Command to install the step area chart component using the shadcn CLI. This adds the component to your project's local directory.

```bash
pnpm dlx shadcn@latest add @8bitcn/chart-area-step
```

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

### Importing the Tooltip Component

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/tooltip.mdx

Shows the necessary import statements to access the Tooltip, TooltipContent, TooltipProvider, and TooltipTrigger components from the library.

```tsx
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/8bit/tooltip"
```

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

### 8bitcn Carousel Sizes Example

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/carousel.mdx

Illustrates how to control the size of carousel items. This example sets each item to occupy 33% of the carousel's width, allowing for three items to be fully visible at a time.

```tsx
// 33% of the carousel width.
<Carousel>
  <CarouselContent>
    <CarouselItem className="basis-1/3">...</CarouselItem>
    <CarouselItem className="basis-1/3">...</CarouselItem>
    <CarouselItem className="basis-1/3">...</CarouselItem>
  </CarouselContent>
</Carousel>
```

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

### Checkbox Component Examples (React)

Source: https://context7.com/theorcdev/8bitcn-ui/llms.txt

Shows the Checkbox component, a toggleable input with pixelated borders for boolean selections. Examples include basic usage, default checked state, and disabled options, paired with a Label component.

```tsx
import { Checkbox } from "@/components/ui/8bit/checkbox";
import { Label } from "@/components/ui/8bit/label";

export default function CheckboxDemo() {
  return (
    <div className="space-y-4">
      {/* Basic checkbox */}
      <div className="flex items-center space-x-2">
        <Checkbox id="terms" />
        <Label htmlFor="terms">Accept terms and conditions</Label>
      </div>

      {/* Default checked */}
      <div className="flex items-center space-x-2">
        <Checkbox id="notifications" defaultChecked />
        <Label htmlFor="notifications">Enable notifications</Label>
      </div>

      {/* Disabled state */}
      <div className="flex items-center space-x-2">
        <Checkbox id="disabled" disabled />
        <Label htmlFor="disabled">Disabled option</Label>
      </div>
    </div>
  );
}
```

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

### 8bitcn Carousel Responsive Sizes Example

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/carousel.mdx

Shows how to create responsive carousel item sizes. This example makes items 50% width on small screens and 33% width on larger screens (lg and up), adapting the layout to different viewport sizes.

```tsx
// 50% on small screens and 33% on larger screens.
<Carousel>
  <CarouselContent>
    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
  </CarouselContent>
</Carousel>
```

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

### Usage Example: 8-bit Date Picker in React

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/date-picker.mdx

Example of how to implement the 8-bit Date Picker component in a React application using TypeScript. It demonstrates state management for the selected date and integrates with other UI components like Popover and Button.

```tsx
"use client";

import * as React from "react";
import { format } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/8bit/button";
import { Calendar } from "@/components/ui/8bit/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/8bit/popover";

export function DatePicker() {
  const [date, setDate] = React.useState<Date>();

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant={"outline"}
          className={cn(
            "w-[310px] justify-start text-left font-normal",
            !date && "text-muted-foreground"
          )}
        >
          <CalendarIcon className="mr-2 size-4" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-full p-0">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          initialFocus
          className="border-y-0"
        />
      </PopoverContent>
    </Popover>
  );
}

```

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

### Slider Component Example (React/TypeScript)

Source: https://context7.com/theorcdev/8bitcn-ui/llms.txt

Illustrates the Slider component for selecting numeric values within a range, featuring pixelated borders. Examples include a basic slider, one with a custom range, and a disabled state. Requires React and TypeScript.

```tsx
import { Slider } from "@/components/ui/8bit/slider";
import { Label } from "@/components/ui/8bit/label";

export default function SliderDemo() {
  return (
    <div className="space-y-6 w-[300px]">
      {/* Basic slider */}
      <div className="space-y-2">
        <Label>Volume</Label>
        <Slider defaultValue={[50]} max={100} step={1} />
      </div>

      {/* With custom range */}
      <div className="space-y-2">
        <Label>Brightness</Label>
        <Slider defaultValue={[75]} max={100} step={5} />
      </div>

      {/* Disabled */}
      <div className="space-y-2">
        <Label>Locked Setting</Label>
        <Slider defaultValue={[30]} max={100} disabled />
      </div>
    </div>
  );
}
```

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

### Use 8bitcn Main Menu Component in React

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/main-menu.mdx

Demonstrates how to import and use the 8-bit main menu component within a React application. It shows the import statement and how to render the component with custom styling.

```tsx
import MainMenu from "@/components/ui/8bit/blocks/main-menu"

<MainMenu className="w-full max-w-[400px]" />
```

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

### Basic 8-bit Checkbox Usage (React)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/checkbox.mdx

A minimal example showing the direct usage of the 8-bit Checkbox component.

```tsx
<Checkbox />
```

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

### Render 8-bit Context Menu (TypeScript)

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/context-menu.mdx

Demonstrates how to render an 8-bit context menu component using TypeScript. It includes the necessary imports and JSX structure for the context menu, trigger, and menu items.

```tsx
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/8bit/context-menu";
import { Button } from "@/components/ui/8bit/button";

<ContextMenu>
  <ContextMenuTrigger>
    <Button>Right click me</Button>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

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

### Pixelated Border Construction

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/AGENTS.md

Example of constructing pixelated borders using absolute-positioned divs. This is a common technique for achieving the 8-bit aesthetic.

```jsx
<div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
<div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
```

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

### Import 8-bit Pagination Components

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/pagination.mdx

Import the necessary sub-components from the library to construct a pagination navigation bar. These components include the main container, items, links, and navigation controls.

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/8bit/pagination"
```

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

### 8bitcn Carousel Orientation Example

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/components/carousel.mdx

Demonstrates how to change the orientation of the 8bitcn Carousel. The 'orientation' prop can be set to 'vertical' or 'horizontal' to switch between different display modes.

```tsx
<Carousel orientation="vertical | horizontal">
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
</Carousel>
```

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

### Loading Screen with Custom Tips

Source: https://github.com/theorcdev/8bitcn-ui/blob/main/content/docs/blocks/gaming/loading-screen.mdx

Illustrates how to provide a custom array of strings to be displayed as rotating tips within the LoadingScreen. This allows for personalized loading messages.

```tsx
import LoadingScreen from "@/components/ui/8bit/blocks/loading-screen";

<LoadingScreen
  autoProgress
  tips={[
    "Gathering resources...",
    "Building world...",
    "Spawning creatures...",
  ]}
/>
```