### Install Popover using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/popover.mdx

Installs the Popover component using the shadcn CLI. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add @kanpeki/popover
```

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

### Install Input OTP via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/input-otp.mdx

Installs the @kanpeki/input-otp package using npm. This is the recommended method for quick setup.

```bash
npx shadcn@latest add @kanpeki/input-otp
```

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

### Installation Section with Tabs (CLI and Manual)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/CLAUDE.md

MDX structure for the installation section, utilizing Tabs.Root, Tabs.List, Tabs.Trigger, and Tabs.Content. It includes CLI installation instructions and manual installation steps using the Steps component.

```mdx
## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/component-name
```
````
</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="component-name" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>
```

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

### Examples Section with Component Preview

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/CLAUDE.md

MDX structure for the Examples section, demonstrating how to showcase different variants or use cases of a component using the ComponentPreview component. Each example should have a descriptive heading.

```mdx
## Examples

### Variant Name

<ComponentPreview name="component-variant" />
````
```

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

### Install Badge Component using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/badge.mdx

Installs the Kanpeki Badge component into your project using the npx command. This is the recommended method for quick setup.

```bash
npx shadcn@latest add @kanpeki/badge
```

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

### Install Toast Component Dependencies and Setup

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/toast.mdx

Manually installs necessary dependencies (next-themes, sonner) and integrates the Toaster component into the application's providers. This method requires copying and pasting code into your project.

```bash
npm install next-themes sonner
```

```tsx
"use client";

import { ThemeProvider } from "next-themes";
import { useRouter } from "next/navigation";
import { RouterProvider } from "react-aria-components";
import { Toaster } from "~/components/ui/toast"; // [!code highlight]

declare module "react-aria-components" {
  interface RouterConfig {
    routerOptions: NonNullable<
      Parameters<ReturnType<typeof useRouter>["push"]>[1]
    >;
  }
}

interface ProvidersProps {
  children: React.ReactNode;
}

export function Providers({ children }: ProvidersProps) {
  const router = useRouter();

  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      <RouterProvider navigate={router.push}>
        {children}
        {/* [!code highlight] */}
        <Toaster />
      </RouterProvider>
    </ThemeProvider>
  );
}

```

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

### Install Kanpeki Calendar via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/calendar.mdx

Installs the Kanpeki Calendar component using the shadcn-ui CLI. This is the recommended method for quick setup.

```bash
npx shadcn@latest add @kanpeki/calendar
```

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

### Install Select Component via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/select.mdx

Installs the Select component using the shadcn CLI. This is the recommended method for adding the component to your project.

```bash
npx shadcn@latest add @kanpeki/select
```

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

### Install Toast Component via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/toast.mdx

Installs the Toast component using the shadcn CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @kanpeki/toast
```

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

### Install Kanpeki Alert using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/alert.mdx

Installs the Kanpeki Alert component into your project using the shadcn-ui CLI. This is the recommended method for quick setup.

```bash
npx shadcn@latest add @kanpeki/alert
```

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

### Start Next.js Development Server (Bash)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

Starts the Next.js development server specifically for the documentation site (`apps/www`). It utilizes Turbopack for faster development builds.

```bash
cd apps/www
bun run dev
```

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

### Install Dependencies with npm

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/installation/manual.mdx

Installs essential development dependencies for styling and component management using npm. This command adds cva, tailwind-merge, tailwindcss-motion, and tailwindcss-react-aria-components as dev dependencies.

```bash
npm install cva@beta tailwind-merge tailwindcss-motion tailwindcss-react-aria-components -D
```

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

### Install Button Component using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/button.mdx

Installs the Button component using the npx command with the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @kanpeki/button
```

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

### Install Separator Component using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/separator.mdx

Installs the Separator component into your project using the shadcn CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @kanpeki/separator
```

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

### Install Checkbox via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/checkbox.mdx

Installs the Checkbox component using the shadcn CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @kanpeki/checkbox
```

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

### Install Skeleton Component using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/skeleton.mdx

Installs the Skeleton component into your project using the shadcn CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @kanpeki/skeleton
```

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

### Install TextField via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/textfield.mdx

This command installs the TextField component and its dependencies using the shadcn CLI. Ensure you have Node.js and npm/yarn/pnpm installed.

```bash
npx shadcn@latest add @kanpeki/text-field
```

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

### Install Menu Component via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/menu.mdx

Installs the Menu component using the shadcn CLI. This is the recommended method for integrating the component into your project.

```bash
npx shadcn@latest add @kanpeki/menu
```

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

### Install Kanpeki Input via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/input.mdx

Installs the Kanpeki Input component using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @kanpeki/input
```

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

### Install Accordion Component using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/accordion.mdx

Installs the Accordion component into your project using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn-ui@latest add @kanpeki/accordion
```

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

### Install Kanpeki Table via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/table.mdx

This command installs the Kanpeki table component using the shadcn-ui CLI. Ensure you have Node.js and npm/yarn/pnpm installed. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add @kanpeki/table
```

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

### Install Tabs CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/tabs.mdx

Installs the Tabs component using the shadcn-ui CLI. This is the recommended method for integrating the component into your project.

```bash
npx shadcn@latest add @kanpeki/tabs
```

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

### Install Autocomplete Component using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/autocomplete.mdx

Installs the Autocomplete component using the shadcn-ui CLI. This is the recommended method for adding the component to your project.

```bash
npx shadcn@latest add @kanpeki/autocomplete
```

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

### Install Kanpeki Form Component via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/form.mdx

This command installs the Kanpeki Form component and its dependencies using the shadcn-ui CLI. Ensure you have Node.js and npm/yarn installed.

```bash
npx shadcn@latest add @kanpeki/form
```

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

### Initialize shadcn/ui CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/installation/next.mdx

Runs the shadcn CLI to initialize and configure shadcn/ui within the Next.js project. This command sets up the necessary files and configurations for using shadcn/ui components.

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

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

### Import and Use shadcn Button Component in Next.js

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/installation/next.mdx

Demonstrates how to import and use the shadcn Button component within a Next.js application. It shows the import statement and a basic usage example in a React component.

```tsx
import { Button } from "~/components/ui/button"; // [!code highlight]

export default function Home() {
  return (
    <div>
      {/* [!code highlight] */}
      <Button>Click me</Button>
    </div>
  );
}
```

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

### Install Tooltip Component via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/tooltip.mdx

This command installs the Tooltip component using the shadcn CLI. It's a quick way to add the component to your project.

```bash
npx shadcn@latest add @kanpeki/tooltip
```

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

### Install Kanpeki Switch via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/switch.mdx

Installs the Kanpeki Switch component using the shadcn CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @kanpeki/switch
```

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

### Install Kanpeki Toggle via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/toggle.mdx

Installs the Kanpeki Toggle component using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @kanpeki/toggle
```

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

### Install Kanpeki Card using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/card.mdx

Installs the Kanpeki Card component into your project using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @kanpeki/card
```

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

### Install Kanpeki Calendar Dependencies Manually

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/calendar.mdx

Manually installs the necessary dependencies for the Kanpeki Calendar component. Requires installing '@internationalized/date' and then copying the component source code.

```bash
npm install @internationalized/date
```

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

### Install Date Field Component using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/date-field.mdx

This command installs the Date Field component into your project using the shadcn-ui CLI. Ensure you have the CLI installed and configured for your project.

```bash
npx shadcn@latest add @kanpeki/date-field
```

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

### Install Dialog Component via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/dialog.mdx

Installs the Dialog component using the shadcn-ui CLI. This is the recommended method for adding the component to your project.

```bash
npx shadcn@latest add @kanpeki/dialog
```

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

### Create Next.js Project with create-next-app

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/installation/next.mdx

Initializes a new Next.js project with specified configurations like Tailwind CSS, TypeScript, and Turbopack. It prompts the user for project name and linter preferences.

```bash
npx create-next-app@latest --tailwind --ts --empty --app --src-dir --turbopack
```

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

### Biome Configuration Example (JSON)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

An example of a Biome configuration file (`biome.json`). It specifies linting and formatting rules, extending a preset and defining specific overrides.

```json
{
  "extends": [
    "biome_config_ultracite"
  ],
  "linter": {
    "rules": {
      "correctness": {
        "noDefaultExport": "off"
      }
    }
  },
  "formatter": {
    "format": true,
    "indentStyle": "tab",
    "lineWidth": 80,
    "quoteStyle": "double"
  }
}
```

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

### Install Carousel Component via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/carousel.mdx

Installs the Carousel component using the shadcn-ui CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add @kanpeki/carousel
```

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

### Install Kanpeki Spinner via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/spinner.mdx

Installs the Kanpeki Spinner component using the shadcn CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add @kanpeki/spinner
```

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

### Run Development Server (Bash)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

Starts the development server for all applications and packages within the monorepo. This command leverages Turbo to run tasks in parallel.

```bash
bun run dev
```

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

### Basic Example Component Implementation (TSX)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/CLAUDE.md

Provides a simple example of an input component implementation, demonstrating the expected structure for a demo file. It includes the necessary import and the functional component export.

```tsx
import { Input } from "~/registry/ui/input";

export function InputDemo() {
  return <Input type="email" placeholder="Email" />;
}
```

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

### Install Kanpeki Textarea via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/textarea.mdx

Installs the Kanpeki Textarea component using the shadcn CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add @kanpeki/textarea
```

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

### Install List Box via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/list-box.mdx

Installs the List Box component using the shadcn-ui CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add @kanpeki/list-box
```

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

### Install Toggle Group via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/toggle-group.mdx

Installs the Toggle Group component using the shadcn CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add @kanpeki/toggle-group
```

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

### Install Kanpeki Slider via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/slider.mdx

Installs the Kanpeki Slider component using the shadcn CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add @kanpeki/slider
```

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

### Install Radio Group via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/radio-group.mdx

Installs the Radio Group component using the shadcn CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add @kanpeki/radio-group
```

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

### Install Avatar Component via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/avatar.mdx

Installs the Avatar component using the shadcn-ui CLI. This is the recommended method for adding the component to your project.

```bash
npx shadcn@latest add @kanpeki/avatar
```

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

### Install Kanpeki Collapsible via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/collapsible.mdx

Installs the Kanpeki Collapsible component using the shadcn-ui CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add @kanpeki/collapsible
```

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

### Install Input Group Component using CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/input-group.mdx

Installs the Input Group component into your project using the shadcn-ui CLI. This is the recommended method for adding components.

```bash
npx shadcn@latest add @kanpeki/input-group
```

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

### Install Input OTP Manually

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/input-otp.mdx

Manually installs the 'input-otp' npm package and provides instructions to copy and paste component code into your project. Ensure to update import paths as needed.

```bash
npm install input-otp
```

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

### Registry Build Command (Bash)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/CLAUDE.md

Provides the command to rebuild the registry after fixing validation errors or making changes to example components. This ensures the registry is up-to-date.

```bash
bun run registry:build
```

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

### Install next-themes Package

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/dark-mode/next.mdx

Installs the 'next-themes' package, which is essential for managing theme switching in Next.js applications. This command uses npm to download and add the package to your project's dependencies.

```bash
npm install next-themes
```

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

### Example Form Component Structure (TSX)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

Illustrates the composition of form-related components using patterns like Field and InputGroup. This example shows how to integrate a mail icon with an email input field, including label and error handling.

```tsx
<FieldRoot>
  <FieldLabel>Email</FieldLabel>
  <InputGroupRoot>
    <InputGroupAddon>
      <MailIcon />
    </InputGroupAddon>
    <InputGroupInput type="email" />
  </InputGroupRoot>
  <FieldError />
</FieldRoot>
```

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

### Process MDX Files for Documentation (Bash)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

Processes MDX files, likely for generating documentation content. This command typically runs automatically after package installation.

```bash
cd apps/www
bun run postinstall
```

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

### Install Scroll Area via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/scroll-area.mdx

Installs the Kanpeki Scroll Area component using the shadcn CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @kanpeki/scroll-area
```

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

### Remove Unused shadcn Packages

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/installation/next.mdx

Removes default shadcn packages that are replaced by modern alternatives like CVA beta and tailwindcss-motion. This step optimizes the project by removing redundant dependencies.

```bash
npm remove class-variance-authority clsx tw-animate-css
```

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

### Conventional Commit Message Example

Source: https://github.com/fellipeutaka/kanpeki/blob/main/.copilot-commit-message-instructions.md

An example of a standard commit message following the conventional commit format. It includes a type, scope, short description, and a detailed explanation of the changes made.

```git
feat(auth): add user authentication

Added user authentication using JWT. This includes login, registration, and token verification endpoints.

- Implemented JWT-based authentication.
- Added login and registration endpoints.
- Added middleware for token verification.

Fixes #123
```

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

### Conventional Commit Message Example (Text)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

An example of a commit message following the conventional commit format. It includes a type, scope, short description, and an optional longer description.

```text
feat(www): add command menu

Added command menu for search docs.
```

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

### Component Preview MDX Component

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/CLAUDE.md

MDX snippet demonstrating the usage of the ComponentPreview component to display a component's demo example. This component only accepts a 'name' prop.

```mdx
<ComponentPreview name="component-demo" />
```

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

### Example Component File Naming and Export Convention (TSX)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/CLAUDE.md

Defines the naming conventions for example component files within the `src/registry/examples/` directory. It specifies the `-demo.tsx` suffix, kebab-case for filenames, and the requirement for named function exports with a `Demo` suffix that matches the PascalCase version of the filename.

```tsx
export function ButtonDemo()
export function InputDisabledDemo()
export function InputOTPDemo()
```

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

### Install Kanpeki Label Component via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/label.mdx

Installs the Kanpeki Label component using npm. This command adds the necessary package to your project's dependencies.

```bash
npx shadcn@latest add @kanpeki/label
```

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

### Skeleton Component Anatomy Example

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/skeleton.mdx

Demonstrates the basic structure and usage of the Skeleton component. It shows how to import and render a simple skeleton element with specified dimensions and shape.

```tsx
import { Skeleton } from "~/components/ui/skeleton";

<Skeleton className="w-[100px] h-[20px] rounded-full" />
```

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

### Install Kanpeki Breadcrumb via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/breadcrumb.mdx

Installs the Kanpeki Breadcrumb component using the shadcn-ui CLI. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add @kanpeki/breadcrumb
```

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

### Accordion Anatomy: Multiple Imports Example

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/accordion.mdx

Illustrates how to import individual Accordion components for more granular control. This approach is useful when you need to use specific parts of the Accordion separately.

```tsx
import {
  AccordionContent,
  AccordionItem,
  AccordionRoot,
  AccordionTrigger,
} from "~/components/ui/accordion";

<AccordionRoot defaultExpandedKeys={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</AccordionRoot>;
```

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

### API Reference Section using PropsTable (MDX)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/CLAUDE.md

Shows how to document component API using the `<PropsTable>` component within MDX files. It includes an example of defining properties with their types, defaults, and descriptions.

```mdx
## API Reference

<PropsTable
  data={[
    {
      name: "variant",
      required: false,
      typeSimple: "enum",
      type: '"default" | "outline"',
      default: '"default"',
      description: "The visual style.",
    },
  ]} 
/>
```

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

### Build Next.js Site (Bash)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

Builds the Next.js static site for the documentation. This command generates the production-ready assets for the website.

```bash
cd apps/www
bun run build
```

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

### Install Scroll Area Dependencies Manually

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/scroll-area.mdx

Manually installs the necessary Radix UI Scroll Area dependency. This method is useful if you prefer not to use the CLI or need more control over the installation process.

```bash
npm install @radix-ui/react-scroll-area
```

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

### Alert/Callout Pattern using Alert.Root

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/CLAUDE.md

Illustrates the recommended pattern for displaying alerts or callouts using `<Alert.Root>` and `<AlertIcon />`. It shows examples for informational messages and warnings, including how to incorporate markdown links within the description.

```mdx
<Alert.Root>
  <AlertIcon variant="info" />
  <Alert.Description>
    Your message here with [markdown links](/path).
  </Alert.Description>
</Alert.Root>
```

```mdx
<Alert.Root variant="warning">
  <AlertIcon variant="warning" />
  <Alert.Description>Warning message here.</Alert.Description>
</Alert.Root>
```

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

### Install Carousel Dependencies Manually

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/carousel.mdx

Manually installs the necessary embla-carousel-react dependency for the Carousel component. This is required before integrating the component's code.

```bash
npm install embla-carousel-react
```

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

### Build Component Registry (Bash)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

Builds the component registry, which is used for the documentation site. This command is equivalent to running the `shadcn build` command.

```bash
cd apps/www
bun run registry:build
```

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

### Build All Apps and Packages (Bash)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

Compiles all applications and packages within the monorepo. This is typically used before deployment or for creating production-ready builds.

```bash
bun run build
```

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

### Highlighting Component Props in MDX

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

Provides an example of highlighting component props in MDX documentation. It uses a combination of line and block highlighting to emphasize specific props and their values within a component's structure.

```tsx
<Carousel.Root
  orientation="vertical" // [!code highlight]
  opts={{
    // [!code highlight]
    align: "start", // [!code highlight]
    loop: true, // [!code highlight]
  }} // [!code highlight]
>
  <Carousel.Content>
    <Carousel.Item>...</Carousel.Item>
  </Carousel.Content>
</Carousel.Root>
```

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

### Highlighting Class Patterns in MDX

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

Shows how to highlight CSS class patterns in MDX documentation using word highlighting. This example focuses on highlighting utility classes like 'basis-1/3' within a component's `className` prop.

```tsx
// [!code word:basis-1/3]
<Carousel.Root>
  <Carousel.Content>
    <Carousel.Item className="basis-1/3">...</Carousel.Item>
    <Carousel.Item className="basis-1/3">...</Carousel.Item>
    <Carousel.Item className="basis-1/3">...</Carousel.Item>
  </Carousel.Content>
</Carousel.Root>
```

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

### Registry Entry Configuration (TypeScript)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/CLAUDE.md

Demonstrates the structure of a `_registry.ts` file, defining registry items for component examples. It includes details like the item name, type, dependencies, and associated files.

```typescript
import type { RegistryItem } from "shadcn/schema";

export const componentExamples: RegistryItem[] = [
  {
    name: "component-demo",
    type: "registry:example",
    registryDependencies: ["@kanpeki/component"],
    files: [
      {
        path: "src/registry/examples/component/component-demo.tsx",
        type: "registry:example",
      },
    ],
  },
  {
    name: "component-variant",
    type: "registry:example",
    registryDependencies: ["@kanpeki/component", "@kanpeki/other-dependency"],
    files: [
      {
        path: "src/registry/examples/component/component-variant.tsx",
        type: "registry:example",
      },
    ],
  },
];
```

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

### Browser Compatibility Warnings using Alert.Root (MDX)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/CLAUDE.md

Illustrates how to use the alert pattern to warn users about browser compatibility issues for specific CSS properties. It includes a link to a caniuse.com table for more information.

```mdx
<Alert.Root variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Description>
    The `property-name` CSS property is not supported in all browsers. See the
    [browser compatibility](https://caniuse.com/link) table for more
    information.
  </Alert.Description>
</Alert.Root>
```

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

### Diff Highlighting in MDX

Source: https://github.com/fellipeutaka/kanpeki/blob/main/CLAUDE.md

Demonstrates how to use diff highlighting in MDX files with `// [!code ++]` for additions and `// [!code --]` for removals. This is useful for showing code changes or alternatives.

```tsx
console.log("hewwo"); // [!code --]
console.log("hello"); // [!code ++]
console.log("goodbye");
```

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

### Install Kanpeki Field Component via CLI

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/field.mdx

This snippet shows the command to install the Kanpeki Field component using npm. It's a straightforward command-line operation.

```bash
npx shadcn@latest add @kanpeki/field
```

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

### Breaking Change Commit Message Example

Source: https://github.com/fellipeutaka/kanpeki/blob/main/.copilot-commit-message-instructions.md

An example of a commit message that introduces a breaking change. It follows the conventional commit format and explicitly declares the breaking change with details.

```git
refactor(api): update API endpoints

Refactored the API endpoints to follow RESTful conventions. This change affects all existing API calls.

- Updated endpoint URLs to follow RESTful conventions.
- Modified request and response formats.

BREAKING CHANGE: All existing API calls need to be updated to the new endpoint URLs.
```

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

### Tooltip Component Examples (React/TypeScript)

Source: https://context7.com/fellipeutaka/kanpeki/llms.txt

A tooltip component for displaying additional information on hover, with examples of basic usage and custom delays. It utilizes Button and Tooltip components.

```tsx
import { Button } from "~/registry/ui/button";
import { Tooltip } from "~/registry/ui/tooltip";

<Tooltip.Root>
  <Button variant="outline">Hover</Button>
  <Tooltip.Content>
    <p>Add to library</p>
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip.Root>

// With custom delay
<Tooltip.Root delay={500} closeDelay={100}>
  <Button>Delayed tooltip</Button>
  <Tooltip.Content offset={12}>
    <p>This tooltip appears after 500ms</p>
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip.Root>
```

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

### Menu Component Anatomy Example (TypeScript/React)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/menu.mdx

Demonstrates the basic structure and usage of the Menu component in a React application using TypeScript. It shows how to set up the root, content, and item elements for a functional menu.

```tsx
import { Menu } from "~/components/ui/menu";

<Menu.Root>
  <Button variant="outline">Open</Button>

  <Popover.Content>
    <Menu.Content>
      <Menu.Item>Inbox</Menu.Item>
      <Menu.Item>Sent</Menu.Item>
      <Menu.Item>New Message</Menu.Item>
    </Menu.Content>
  </Popover.Content>
</Menu.Root>
```

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

### Kanpeki Breadcrumb Custom Separator Example (TypeScript)

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/components/breadcrumb.mdx

Shows how to implement a custom separator in the Kanpeki Breadcrumb component by providing a React element as a child to `<Breadcrumb.Separator />`. This example uses `lucide-react`'s `SlashIcon`.

```tsx
import { Breadcrumb } from "~/components/ui/breadcrumb";
import { SlashIcon } from "lucide-react"; // [!code highlight]

<Breadcrumb.Root>
  {/* ... */}
  {/* [!code highlight:3] */}
  <Breadcrumb.Separator>
    <Icons.Slash className="size-4" />
  </Breadcrumb.Separator>
  {/* ... */}
</Breadcrumb.Root>;
```

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

### Install TanStack Form and Zod Dependencies

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/forms/tanstack-form.mdx

Provides the command to install the necessary packages for TanStack Form and Zod validation using npm. These are essential for setting up form management and schema validation in your project.

```bash
npm install @tanstack/react-form zod
```

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

### Table Component Example in React (TypeScript)

Source: https://context7.com/fellipeutaka/kanpeki/llms.txt

Presents a semantic Table component for displaying data in a structured format. It supports table headers, body, footers, and captions, demonstrated with an example of invoice data.

```tsx
import { Table } from "~/registry/ui/table";

const invoices = [
  { invoice: "INV001", paymentMethod: "Credit Card", paymentStatus: "Paid", totalAmount: "$250.00" },
  { invoice: "INV002", paymentMethod: "PayPal", paymentStatus: "Pending", totalAmount: "$150.00" },
  { invoice: "INV003", paymentMethod: "Bank Transfer", paymentStatus: "Unpaid", totalAmount: "$350.00" },
];

<Table.Root>
  <Table.Caption>A list of your recent invoices.</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head className="w-[100px]">Invoice</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head>Method</Table.Head>
      <Table.Head className="text-right">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    {invoices.map((invoice) => (
      <Table.Row key={invoice.invoice}>
        <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
        <Table.Cell>{invoice.paymentStatus}</Table.Cell>
        <Table.Cell>{invoice.paymentMethod}</Table.Cell>
        <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
      </Table.Row>
    ))}
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.Cell colSpan={3}>Total</Table.Cell>
      <Table.Cell className="text-right">$2,500.00</Table.Cell>
    </Table.Row>
  </Table.Footer>
</Table.Root>
```

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

### Configure Path Aliases in tsconfig.json

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/installation/manual.mdx

Sets up path aliases in tsconfig.json for easier module resolution. It specifically configures the '~' alias to point to the './src/' directory, simplifying import paths within the project. This is a common practice for organizing large codebases.

```json
{
  "compilerOptions": {
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}
```

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

### TanStack Form Input Field Example

Source: https://github.com/fellipeutaka/kanpeki/blob/main/apps/www/src/content/docs/forms/tanstack-form.mdx

Provides a complete example of rendering an input field within a TanStack Form. It includes label, input element, and error display, along with handling for touch, validity, and user input.

```tsx
<form.Field
  name="username"
  children={(field) => {
    const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
    return (
      <Field.Root data-invalid={isInvalid}>
        <Field.Label htmlFor={field.name}>Username</Field.Label>
        <Input
          id={field.name}
          name={field.name}
          value={field.state.value}
          onBlur={field.handleBlur}
          onChange={(e) => field.handleChange(e.target.value)}
          aria-invalid={isInvalid}
          placeholder="johndoe" />
        {isInvalid && <Field.Error errors={field.state.meta.errors} />}
      </Field.Root>
    );
  }}
/>
```