### Install Otp Input Component via CLI (Bash)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/otp-input.mdx

A command to install the Otp Input component using a CLI tool, simplifying the setup process. This is an alternative to manual installation.

```bash
npx @shadx/cli add otp-input
```

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

### Install Badge Component for Tags Input Setup

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/tags-input.mdx

This command installs the badge component, which may be a prerequisite or related component for setting up the Tags Input. It uses npx to execute the shadcn-ui CLI.

```bash
npx shadcn-ui@latest add badge
```

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

### Install Multi Select component via CLI (Bash)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/multi-select.mdx

Installs the multi-select component using the shadx CLI. This command automates the setup process for the component in your project.

```bash
npx @shadx/cli add multi-select
```

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

### Install Breadcrumb Component (CLI)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/breadcrumb.mdx

Installs the Breadcrumb component directly into your project using the shadx CLI. This command simplifies the setup process for the Breadcrumb component.

```bash
npx @shadx/cli add breadcrumb
```

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

### Install shadcn-ui command component (Bash)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/multi-select.mdx

Installs the command component from shadcn-ui using npx. This is a prerequisite for manual installation of the multi-select component.

```bash
npx shadcn-ui@latest add command
```

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

### Initialize Project with Shadcn-UI CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/installation.mdx

Initializes project dependencies, installs necessary packages, adds the 'cn' utility, configures tailwind.config.js, sets up CSS variables, and enables shadcn-ui in your project.

```bash
npx shadcn-ui init

```

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

### Install Tags Input Component using CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/tags-input.mdx

This command installs the Tags Input component using the shadx CLI. Ensure you have the shadx CLI installed or use npx to run it directly.

```bash
npx @shadx/cli add tags-input
```

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

### Define New Example Component (TypeScript)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Code snippet for defining a new example component in TypeScript, showcasing specific props or features. This includes creating the example file and registering it in the 'examples' array of the component registry.

```tsx
// src/registry/default/example/sample-component/sample-component-content.tsx

import { SampleComponent } from "@/registry/default/extension/sample-component";

const SampleComponentContentTest = () => {
  return <SampleComponent content="This is how we use the content prop" />;
};

export default SampleComponentContentTest;
```

```ts
// src/registry/default/components.ts
      
const examples: Registry = [
  {
    name: "sample-component-content",
    type: "components:example",
    registryDependencies: [], // include names of any packages this component depends on.
    files: ["example/sample-component/sample-component-content.tsx"],
  },
];
```

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

### Initialize Project with Shadcn-Extension CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/installation.mdx

Initializes the project with the shadcn-extension CLI, preparing it for component integration.

```bash
npx @shadx/cli init

```

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

### Add Component using Shadcn-Extension CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/installation.mdx

Adds a specified component to your project, including installing its dependencies and integrating it into your codebase. If no component is specified, it lists available components.

```bash
npx @shadx/cli add [component]

```

```bash
npx @shadx/cli add tree-view

```

```bash
npx @shadx/cli add

```

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

### Install Datetime Picker Component

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/datetime-picker.mdx

Instructions for installing the datetime-picker component. This involves adding the shadcn-ui input dependency and the timescape npm package. Alternatively, a CLI command can be used for a more automated installation.

```bash
npx shadcn@latest add input
npm i timescape
```

```bash
npx @shadx/cli add datetime-picker
```

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

### Install Carousel with CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/carousel.mdx

Installs the carousel component directly into your project using the shadx CLI. This is a convenient alternative to manual installation.

```bash
npx @shadx/cli add carousel
```

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

### Initialize Shadcn-Extension CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/packages/cli/README.md

Initializes the Shadcn-Extension CLI within your project. This setup process configures the project for using the extension's features, including integrating UI components and managing their dependencies.

```bash
npx @shadx/cli init
```

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

### Clone Shadcn Extension Turborepo Repository

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/README.md

Clones the Shadcn Extension Turborepo monorepo to your local machine using Git. This is the initial step to get started with the project.

```shell
git clone https://github.com/BelkacemYerfa/shadcn-extension.git
cd shadcn-extension
```

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

### Install Breadcrumb Dependencies (CLI)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/breadcrumb.mdx

Installs necessary components (button and popover) required for the Breadcrumb component using the shadcn-ui CLI. Ensure these are installed before proceeding with the Breadcrumb component.

```bash
npx shadcn-ui@latest add button
npx shadcn-ui@latest add popover
```

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

### Add Tree-View Component with Shadcn-Extension CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/packages/cli/README.md

An example of adding a specific 'tree-view' component to your project using the Shadcn-Extension CLI. This command installs the tree-view component and any related dependencies required for its functionality.

```bash
npx @shadx/cli add tree-view
```

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

### Install Otp Input Component (Bash)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/otp-input.mdx

Instructions to install the Otp Input component. This involves adding the shadcn-ui input component and the react-otp-input library. Ensure your project is set up with npm or a compatible package manager.

```bash
npx  shadcn@latest add input
npm i react-otp-input
```

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

### Install Carousel Dependencies (Manual)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/carousel.mdx

Installs the necessary embla-carousel and embla-carousel-react packages using npm. This is a prerequisite for manual installation of the carousel component.

```bash
npm i embla-carousel embla-carousel-react
```

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

### Install Timeline Component using CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/timeline.mdx

Install the Timeline component into your project using the Shadcn UI CLI. This command adds the necessary files and configurations for the component.

```bash
npx @shadx/cli add timeline
```

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

### Initialize Project Dependencies with Shadcn-UI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/packages/cli/README.md

This command initializes the necessary dependencies for a new project using the shadcn-ui CLI. It sets up the project structure, installs required packages, and configures essential utilities like the 'cn' function and Tailwind CSS.

```bash
npx shadcn-ui init
```

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

### Install Smart DateTime Input via CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/smart-datetime-input.mdx

Installs the Smart DateTime Input component using the shadx CLI. This is a convenient way to add the component to your project.

```bash
npx @shadx/cli add smart-datetime-input
```

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

### Setup PostHog Analytics (Shell)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Steps to configure PostHog analytics for the project. This involves creating a PostHog project, copying environment variables, and renaming the configuration file.

```shell
POSTHOG_API_KEY=your-api-key
POSTHOG_HOST=your-host
```

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

### Tags Input Usage Example

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/tags-input.mdx

Example of how to use the Tags Input component in a React application.

```APIDOC
## Tags Input Component Usage

### Description

This section demonstrates how to integrate and use the Tags Input component within your React application.

### Method

Client-side component usage

### Endpoint

N/A

### Parameters

N/A

### Request Example

```tsx
import { useState } from "react";
import { TagsInput } from "@/components/extension/tags-input";

const MyTagsInputComponent = () => {
  const [value, setValue] = useState<string[]>([]); // Initialize with an empty array

  return (
    <TagsInput
      value={value}
      onValueChange={setValue}
      placeholder="Enter your used tech"
    />
  );
};

export default MyTagsInputComponent;
```

### Response

N/A
```

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

### Start Development Server with pnpm

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/README.md

Starts the development server for all applications and packages in the Shadcn Extension Turborepo using the pnpm dev command. This enables live reload for a smoother development experience.

```shell
pnpm dev
```

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

### Install Smart DateTime Input

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/smart-datetime-input.mdx

Installs the necessary packages for the Smart DateTime Input component. Requires npx and npm. Adds the 'input' component from shadcn-ui and the 'chrono-node' library.

```bash
npx shadcn@latest add input
npm i chrono-node
```

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

### Install Dependencies for File Upload

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/file-upload.mdx

Installs the necessary libraries, react-dropzone for file input functionality and sonner for notification messages, via npm.

```bash
npm i react-dropzone
npm i sonner
```

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

### Install Project Dependencies with pnpm

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/README.md

Installs all project dependencies for the Shadcn Extension Turborepo using the pnpm package manager. This command should be run after cloning the repository.

```shell
pnpm install
```

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

### Datetime Picker Usage Example

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/datetime-picker.mdx

Basic usage example of the DatetimePicker component in a React application.

```APIDOC
## Usage

Import the component and use it in your JSX:

```tsx
import { DatetimePicker } from "@/components/extension/datetime-picker";

<DatetimePicker
  value={Date.now()}
  onChange={(date) => console.log(date)}
  format={(["months", "days", "years"], ["hours", "minutes", "seconds", "am/pm"])}
/>
```
```

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

### Carousel Usage Example

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/carousel.mdx

Example demonstrating how to use the Carousel component in a React application.

```APIDOC
## Usage

```tsx
import {
  Carousel,
  CarouselMainContainer,
  CarouselThumbsContainer,
  SliderMainItem,
  SliderThumbItem,
} from "@/components/extension/carousel";

<Carousel
  carouselOptions={
    /*Check embla carousel for this options*/
  }
  orientation="vertical"
>
  <CarouselMainContainer className="h-60">
    <SliderMainItem> slide 1 </SliderMainItem>
    <SliderMainItem> slide 2 </SliderMainItem>
    <SliderMainItem> ... </SliderMainItem>
  </CarouselMainContainer>

  <CarouselThumbsContainer className="h-60">
    <SliderThumbItem index={1}> slide 1 </SliderThumbItem>
    <SliderThumbItem index={2}> slide 2 </SliderThumbItem>
    <SliderThumbItem index={...}> ... </SliderThumbItem>
  </CarouselThumbsContainer>
</Carousel>
```
```

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

### File Upload Usage Example

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/file-upload.mdx

Provides a basic usage example of the File Upload component in a React application.

```APIDOC
## File Upload Usage Example

This is a basic example of how to use the File Upload component in your React application.

### Component Setup

```tsx
import {
  FileUploader,
  FileUploaderContent,
  FileUploaderItem,
  FileInput,
} from "@/components/extension/file-uploader";
```

### Basic Implementation

```tsx
<FileUploader
  value={files}
  onValueChange={setFiles}
  dropzoneOptions={dropZoneConfig}
  className="relative max-w-xs space-y-1"
>
  <FileInput className="border border-dashed border-gray-500">
    <Button variant={"outline"}>Upload a file</Button>
  </FileInput>
  <FileUploaderContent className="h-48 ">
    <FileUploaderItem index={i}>file 1</FileUploaderItem>
    <FileUploaderItem index={i}>file 2</FileUploaderItem>
    <FileUploaderItem index={i}>...</FileUploaderItem>
  </FileUploaderContent>
</FileUploader>
```
```

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

### Install Dependencies for Tree View

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/tree-view.mdx

Installs necessary npm packages and adds the scroll-area component using the shadcn-ui CLI. This is the first step in the manual installation process for the Tree View component.

```bash
npm install @radix-ui/react-accordion use-resize-observer
npx shadcn-ui@latest add scroll-area
```

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

### Add Component with Shadcn-Extension CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/packages/cli/README.md

Adds a specified UI component to your project using the Shadcn-Extension CLI. This command handles the installation of the component and its associated dependencies, ensuring seamless integration into your codebase.

```bash
npx @shadx/cli add [component]
```

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

### Markdown Document Frontmatter (Markdown)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Example of the frontmatter section for a Markdown documentation file. It includes the component's title and a brief description. It also shows how to include links to dependencies.

```markdown
---
title: Sample Component
description: A simple sample component
---

```

```markdown
---
links:
  - title: shadcn-ui
    url: https://ui.shadcn.com/docs/components/input
  - title: react-otp-input
    url: https://devfolioco.github.io/react-otp-input/
---

```

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

### SampleComponent Variant Example in TypeScript

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Provides an example of creating a variant of the SampleComponent, named SampleComponentVariant. It showcases how to use the SampleComponent with a 'variant' prop.

```tsx
const SampleComponentVariant = ()=>{
  return (
     <SampleComponent content="variant" />
  )
}
```

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

### Datetime Picker Form Example

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/datetime-picker.mdx

Example of integrating the DatetimePicker component within a form, utilizing React Hook Form.

```APIDOC
## Example

### Form

This example demonstrates how to use the `DatetimePicker` within a form managed by `react-hook-form`.

```tsx
"use client";

import { DatetimePicker } from "@/components/extension/datetime-picker";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

const FormSchema = z.object({
  datetime: z.coerce.date(),
});

type FormValues = z.infer<typeof FormSchema>;

const DateTimeForm = () => {
  const form = useForm<FormValues>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      datetime: new Date(),
    },
  });

  function onSubmit(data: FormValues) {
    console.log("Form submitted with data:", data);
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          control={form.control}
          name="datetime"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Select Date and Time</FormLabel>
              <FormControl>
                <DatetimePicker
                  value={field.value}
                  onChange={field.onChange}
                  format={(["months", "days", "years"], ["hours", "minutes", "seconds", "am/pm"])}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </Form>
  );
};

export default DateTimeForm;
```
```

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

### Breadcrumb Usage Example

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/breadcrumb.mdx

Illustrates how to implement the Breadcrumb component in a Next.js application.

```APIDOC
## Breadcrumb Usage

### Basic Implementation

This example demonstrates a standard breadcrumb setup with navigation links.

```tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/extension/breadcrumb";
import { Link } from "next/link";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <Link href="/">Home</Link>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <Link href="/components">Components</Link>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```
```

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

### Example Usage of BreadCrumb Component in React

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/introduction.mdx

This code snippet demonstrates how to use the BreadCrumb component from the Shadcn extension in a React application. It shows importing the necessary components and rendering a basic breadcrumb structure with multiple items and separators. This example assumes the Shadcn/ui components are already configured.

```tsx
import React from "react";
import { BreadCrumb } from "@/component/extension/breadcrumb";
import { BreadCrumbItem } from "@/component/extension/breadcrumb";
import { BreadCrumbSeparator } from "@/component/extension/breadcrumb";

export const BreadCrumbTest = () => {
  return (
    <BreadCrumb variant="ghost">
      <BreadCrumbItem>Home</BreadCrumbItem>
      <BreadCrumbSeparator />
      <BreadCrumbItem>Settings</BreadCrumbItem>
      <BreadCrumbSeparator />
      <BreadCrumbItem>Info</BreadCrumbItem>
    </BreadCrumb>
  );
};

```

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

### Form Setup with Zod Validation in TypeScript

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/multi-select.mdx

This snippet demonstrates the initial setup for a form component using React, TypeScript, shadcn UI components, react-hook-form, and zod for validation. It defines the form schema using zod and infers the form values type.

```tsx
"use client";
import { Form, FormField, FormItem } from "@/components/ui/form";
import z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";

const schema = z.object({
  frameworks: z.array(z.string()),
});

type FormValues = z.infer<typeof schema>;

```

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

### Datetime Picker Component Usage

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/datetime-picker.mdx

Example of how to import and use the DatetimePicker component in a React application. It demonstrates setting the initial value, an onChange handler, and defining the date and time format.

```tsx
import { DatetimePicker } from "@/components/extension/datetime-picker";
```

```tsx
<DatetimePicker
  value={Date.now()}
  onChange={(date) => console.log(date)}
  format={ 
    (["months", "days", "years"], ["hours", "minutes", "seconds", "am/pm"])
  }
/>
```

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

### Smart DateTime Input Usage Example

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/smart-datetime-input.mdx

Demonstrates how to use the Smart DateTime Input component in a React application. It shows how to import the component and pass common props like name, value, onChange, placeholder, and a disabled function.

```tsx
import { SmartDateTimeInput } from "@/components/extension/smart-date-time-input";

<SmartDateTimeInput
  name="datetime"
  value={Date.now()}
  onChange={(e) => setValue(e.target.value)}
  placeholder="e.g. tomorrow at 3pm"
  disabled={(date) => date < new Date()}
/>
```

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

### Smart DateTime Input within a Form Example

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/smart-datetime-input.mdx

Illustrates integrating the Smart DateTime Input component within a form using shadcn/ui's Form component. It shows how to use FormField to manage the input's state and apply props like placeholder and disabled.

```tsx
"use client";

import { SmartDateTimeInput } from "@/components/extension/smart-date-time-input";

// ... other imports and setup

const SmartDateTimeForm = () => {
  return (
     <Form {...form}>
       {/* ... other form elements */}
       <FormField
          control={form.control}
          name="otp"
          render={({ field }) => (
            <>
            {/* ... other elements within render */}
            <SmartDateTimeInput
              name="datetime"
              value={field.value}
              onChange={field.onChange}
              placeholder="e.g. tomorrow at 3pm"
              disabled={(date) => date < new Date()}
            />
            {/* ... other elements within render */}
            </>
          )}
        />
       {/* ... other form elements */}
     </Form>
  )
}
```

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

### View Available Components with Shadcn-Extension CLI

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/packages/cli/README.md

Lists all available UI components that can be added to your project via the Shadcn-Extension CLI. Running this command without arguments displays a comprehensive catalog of components ready for integration.

```bash
npx @shadx/cli add
```

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

### Add Docs Configuration in TypeScript

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Illustrates how to add documentation configuration for a 'Sample component' to the `docs-config.ts` file. This is relevant for projects that use a documentation generation tool.

```ts
// src/config/docs-config.ts

export const docsConfig: DocsConfig[] = [
  // ...
  },
  {
    title: "Components",
    pages: [
      {
        title: "Sample component",
        path: "/docs/sample-component",
      },
    ],
  },
];

```

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

### Include Component Preview (Markdown)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Markdown syntax for embedding a component preview within the documentation. The `<ComponentPreview />` component is used, with the component's name passed as a prop.

```markdown
<ComponentPreview name="sample-component" />
```

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

### Clone Repository (Shell)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Instructions to clone the shadcn-extension repository from GitHub. This is a prerequisite for local development.

```shell
$ git clone https://github.com/<your-name>/shadcn-extension.git
$ cd shadcn-extension
```

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

### Import SampleComponent in TypeScript

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Shows how to import the SampleComponent from the '@/components/extension/sample-component' path. This is a common pattern for using components within the project.

```tsx
import { SampleComponent } from "@/components/extension/sample-component";
```

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

### Create New Docs File (Shell)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Command to create a new Markdown file for component documentation. This is the first step in adding documentation for a new component.

```shell
touch src/content/docs/sample-component.mdx
```

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

### Build Project with npm

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

The command to build the project using npm. This is a standard command for Node.js projects to compile or bundle assets.

```shell
npm run build
```

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

### Define TreeViewElement Array

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/tree-view.mdx

Provides the TypeScript definition and an example array for `TreeViewElement`, which is used to structure the data for the TreeView component. This array defines the hierarchical relationship between nodes, including their IDs, names, and optional children.

```tsx
interface TreeViewElement {
  id: string;
  name: string;
  children?: TreeViewElement[];
}

const elements: TreeViewElement[] = [
  {
    id: "1",
    name: "components",
    children: [
      {
        id: "2",
        name: "extension",
        children: [
          {
            id: "3",
            name: "tree-view.tsx",
          },
          {
            id: "4",
            name: "tree-view-api.tsx",
          },
        ],
      },
      {
        id: "5",
        name: "dashboard-tree.tsx",
      },
    ],
  },
  {
    id: "6",
    name: "pages",
    children: [
      {
        id: "7",
        name: "page.tsx",
      },
      {
        id: "8",
        name: "page-guide.tsx",
      },
    ],
  },
  {
    id: "18",
    name: "env.ts",
  },
];
```

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

### Build All Apps and Packages with pnpm

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/README.md

Builds all applications and packages within the Shadcn Extension Turborepo using the pnpm build command. This command compiles TypeScript code and prepares the project for development and production.

```shell
pnpm build
```

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

### Use SampleComponent with Content Prop in TypeScript

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Demonstrates how to render the SampleComponent and pass a 'content' prop to it. This illustrates a basic usage pattern for the component.

```tsx
<SampleComponent
	content="this a demo of the SampleComponent"
/>
```

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

### Build Component Registry (Shell)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/CONTRIBUTING.md

Command to run the registry build script. This script generates an updated version of the `src/__registry__/index.tsx` file, essential after adding or modifying components.

```shell
npm run build:registry
```

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

### Render Basic Timeline Component

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/timeline.mdx

Demonstrates the basic structure for rendering a Timeline component. It includes timeline items with headings, dots, lines, and content, showing a 'done' status for the first item.

```tsx
<Timeline>
  <TimelineItem status="done">
    <TimelineHeading>Plan!</TimelineHeading>
    <TimelineDot status="done" />
    <TimelineLine done />
    <TimelineContent>
      Before diving into coding, it is crucial to plan your software project
      thoroughly.
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineHeading>Done!</TimelineHeading>
    <TimelineDot />
  </TimelineItem>
</Timeline>
```

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

### Multi Select Component Usage (TypeScript React)

Source: https://github.com/belkacemyerfa/shadcn-extension/blob/master/apps/extension/content/docs/multi-select.mdx

Demonstrates the basic usage of the MultiSelector component in a React application. It includes importing necessary components and setting up state for selected values.

```tsx
import {
  MultiSelector,
  MultiSelectorContent,
  MultiSelectorInput,
  MultiSelectorItem,
  MultiSelectorList,
  MultiSelectorTrigger,
} from "@/components/extension/multi-select";
```

```tsx
<MultiSelector
  values={value}
  onValuesChange={setValue}
  loop
  className="max-w-xs"
>
  <MultiSelectorTrigger>
    <MultiSelectorInput placeholder="Select your framework" />
  </MultiSelectorTrigger>
  <MultiSelectorContent>
    <MultiSelectorList>
      <MultiSelectorItem value={"React"}>React</MultiSelectorItem>
      <MultiSelectorItem value={"Vue"}>Vue</MultiSelectorItem>
      <MultiSelectorItem value={"Svelte"}>Svelte</MultiSelectorItem>
    </MultiSelectorList>
  </MultiSelectorContent>
</MultiSelector>
```