### Install Switch Component (SolidJS)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/switch.mdx

Provides instructions and code for installing the Switch component in a SolidJS project. It includes variations for different project setups.

```tsx
```tsx title="components/ui/switch" file=<rootDir>/apps/docs/src/registry/ui/switch.tsx

```
```

```tsx
```tsx title="components/ui/switch" file=<rootDir>/apps/unocss-playground/src/registry/ui/switch.tsx

```
```

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

### Importing UnoCSS Presets into UnoCSS Config

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/installation.mdx

Example of how to import and configure the Animate and Shadcn presets within the UnoCSS configuration file.

```typescript
import {
  defineConfig,
  presetWebFonts,
  presetWind4,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss"

import { presetAnimate } from "./presets/animate"
import { presetShadcn } from "./presets/shadcn"

export default defineConfig({
  presets: [
    presetWind4({
      dark: {
        dark: '[data-kb-theme="dark"]',
        light: '[data-kb-theme="light"]',
      },
    }),
    presetAnimate(),
    presetShadcn(),
  ],
  transformers: [transformerVariantGroup(), transformerDirectives()],
})
```

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

### Install Dependencies with npm

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/installation.mdx

Installs core dependencies for shadcn-solid using npm. This includes `cva`, `tailwind-merge`, and `tw-animate-css` for styling and animation.

```bash
npm install cva@beta tailwind-merge tw-animate-css
```

```bash
npm install cva@beta tailwind-merge @unocss/preset-wind4
```

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

### Install Command Menu Dependencies

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/command.mdx

Installs the necessary cmdk-solid package for the command menu component. This is the first step before using the component in your project.

```bash
npm install cmdk-solid
```

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

### Sidebar Usage Example (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/sidebar.mdx

Demonstrates how to integrate the Sidebar component into an application's routing. It shows the setup of `SidebarProvider` and `SidebarTrigger` within a main layout component, enabling sidebar functionality.

```tsx
import type { RouteSectionProps } from "@solidjs/router"

import { AppSidebar } from "@/components/app-sidebar"
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"

const Page = (props: RouteSectionProps) => {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger />
        {props.children}
      </main>
    </SidebarProvider>
  )
}

export default Page

```

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

### Drawer Side Demo Example

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/drawer.mdx

An example demonstrating the 'side' variant of the Drawer component, likely showing how it can be attached to different sides of the viewport.

```tsx
```tsx file=<rootDir>/apps/docs/src/registry/examples/drawer-side-demo.tsx

```
```

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

### Install Resizable Component

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/resizable.mdx

Provides the code to install the Resizable component in your project. This involves copying and pasting the provided code into your project files.

```tsx
import { Resizable, ResizableHandle, ResizablePanel } from "@components/ui/resizable"

<Resizable>
  <ResizablePanel />
  <ResizableHandle />
  <ResizablePanel />
</Resizable>
```

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

### Install @kobalte/core Dependency

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/segmented-control.mdx

Installs the necessary @kobalte/core dependency for the Segmented Control component.

```bash
npm install @kobalte/core
```

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

### Install Alert Component (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/alert.mdx

Provides the code to install the Alert component by copying and pasting it into your project. This is typically done by placing the provided files in the specified directories.

```tsx
import React from "react"
import { Slot } from "@radix-ui/react-slot"
import {
  type VariantProps,
  cva,
} from "class-variance-authority"
import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn("mb-1 font-medium leading-none tracking-tight", props.className)}
    {...props}
  />
))
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", props.className)}
    {...props}
  />
))
AlertDescription.displayName = "AlertDescription"

export {
  Alert,
  AlertTitle,
  AlertDescription,
  alertVariants
}

```

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

### Badge Component Installation (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/badge.mdx

Provides the code to install the Badge component in your project. It includes variations for different project setups.

```tsx
import { type VariantProps, cva } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
```

```tsx
import { type VariantProps, cva } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
```

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

### Calendar Component Installation (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/calendar.mdx

Provides the code to install the Calendar component into your project. This involves copying and pasting the provided code into the specified file paths for different project setups.

```tsx
/* Code for components/ui/calendar in apps/docs */
// This is a placeholder for the actual component code.
```

```tsx
/* Code for components/ui/calendar in apps/unocss-playground */
// This is a placeholder for the actual component code.
```

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

### Dialog Component Installation (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/dialog.mdx

Provides the code to install the Dialog component in your project. This involves copying and pasting the provided code into your project files. It is available for different project setups.

```tsx
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
```

```tsx
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
```

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

### Separator Component Installation (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/separator.mdx

Provides the code to install the Separator component. This involves copying and pasting the provided code into your project's UI directory. It is available for different project setups.

```tsx
import * as React from "react"
import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
  <SeparatorPrimitive
    ref={ref}
    className={cn(
      "bg-border-primary",
      orientation === "horizontal" && "h-[1px] w-full",
      orientation === "vertical" && "h-full w-[1px]",
      className
    )}
    decorative={decorative}
    {...props}
  />
))
Separator.displayName = SeparatorPrimitive.displayName

export { Separator }
```

```tsx
import * as React from "react"
import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
  <SeparatorPrimitive
    ref={ref}
    className={cn(
      "bg-border-primary",
      orientation === "horizontal" && "h-[1px] w-full",
      orientation === "vertical" && "h-full w-[1px]",
      className
    )}
    decorative={decorative}
    {...props}
  />
))
Separator.displayName = SeparatorPrimitive.displayName

export { Separator }
```

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

### Kbd Component Usage Example (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/kbd.mdx

Demonstrates how to import and use the Kbd component in a TypeScript React application. This example shows a basic usage of the component to display keyboard input.

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

<Kbd>Ctrl</Kbd>
```

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

### Drawer Demo Example

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/drawer.mdx

A basic demonstration of the Drawer component's functionality, likely showcasing its default behavior.

```tsx
```tsx file=<rootDir>/apps/docs/src/registry/examples/drawer-demo.tsx

```
```

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

### UnoCSS Presets: Animate Configuration

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/installation.mdx

Configuration files for the Animate preset in UnoCSS. Includes index, rules, and theme definitions.

```typescript

```

```typescript

```

```typescript

```

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

### Kbd Component Installation (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/kbd.mdx

Provides the code to install the Kbd component in your project. This involves copying and pasting the component's source code into your project's directory structure.

```tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const kbdVariants = cva(
  "inline-flex items-center justify-center rounded-md border bg-muted px-2 py-1 font-mono text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-border",
      },
      size: {
        default: "h-5 min-w-[20px]",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface KbdProps
  extends React.HTMLAttributes<HTMLElement>,
    VariantProps<typeof kbdVariants> {
  asChild?: boolean
}

function Kbd({
  className,
  asChild,
  variant,
  size,
  ...props
}: KbdProps) {
  const Comp = asChild ? Slot : "kbd"
  return (
    <Comp className={cn(kbdVariants({ variant, size, className }))} {...props} />
  )
}

export { Kbd, kbdVariants }
```

```tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const kbdVariants = cva(
  "inline-flex items-center justify-center rounded-md border bg-muted px-2 py-1 font-mono text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-border",
      },
      size: {
        default: "h-5 min-w-[20px]",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface KbdProps
  extends React.HTMLAttributes<HTMLElement>,
    VariantProps<typeof kbdVariants> {
  asChild?: boolean
}

function Kbd({
  className,
  asChild,
  variant,
  size,
  ...props
}: KbdProps) {
  const Comp = asChild ? Slot : "kbd"
  return (
    <Comp className={cn(kbdVariants({ variant, size, className }))} {...props} />
  )
}

export { Kbd, kbdVariants }
```

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

### Install Pagination UI Component

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/pagination.mdx

Provides the code to install the Pagination UI component. This snippet is intended to be copied and pasted directly into your project. It shows the import statement for the necessary pagination elements.

```tsx
import {
  Pagination,
  PaginationEllipsis,
  PaginationItem,
  PaginationItems,
  PaginationNext,
  PaginationPrevious,
} from "@components/ui/pagination"
```

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

### Progress Component Usage Example (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/progress.mdx

Illustrates how to import and use the Progress component in your TypeScript application. This example shows a basic implementation with a specified value.

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

```

```tsx
<Progress value={80} />

```

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

### Install Embla Carousel for Solid

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/carousel.mdx

Installs the necessary Embla Carousel dependency for Solid.js projects using npm.

```bash
npm install embla-carousel-solid
```

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

### Tooltip Component Installation (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/tooltip.mdx

Provides the necessary code to install and integrate the Tooltip component into a TypeScript project. This includes the component's source files for different project structures.

```tsx
```tsx title="components/ui/tooltip" file=<rootDir>/apps/docs/src/registry/ui/tooltip.tsx

```
```

```tsx
```tsx title="components/ui/tooltip" file=<rootDir>/apps/unocss-playground/src/registry/ui/tooltip.tsx

```
```

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

### Skeleton Component Usage Example

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/skeleton.mdx

Demonstrates how to import and use the Skeleton component in your TypeScript application. This is a basic example showing the component's integration.

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

<Skeleton />
```

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

### Card Component Usage Example (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/card.mdx

Demonstrates how to import and use the Card component and its sub-components in a TypeScript React application. This example shows the basic structure for rendering a card with a title, description, content, and footer.

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

```

```tsx
<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>

```

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

### Install Sonner Dependencies

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/sonner.mdx

Installs the necessary somoto and @kobalte/core packages using npm. These are the core dependencies for the Sonner toast component.

```bash
npm install somoto @kobalte/core
```

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

### Pagination Component Usage Example

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/pagination.mdx

Demonstrates how to use the Pagination component with custom item and ellipsis components. It includes pagination controls for previous and next pages, along with ellipsis for larger page ranges. This example assumes the necessary components are imported from '@components/ui/pagination'.

```tsx
import {
  Pagination,
  PaginationEllipsis,
  PaginationItem,
  PaginationItems,
  PaginationNext,
  PaginationPrevious,
} from "@components/ui/pagination"

<Pagination
  count={10}
  itemComponent={(props) => (
    <PaginationItem page={props.page}>{props.page}</PaginationItem>
  )}
  ellipsisComponent={() => <PaginationEllipsis />}
>
  <PaginationPrevious />
  <PaginationItems />
  <PaginationNext />
</Pagination>
```

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

### Search Component Installation (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/search.mdx

Provides the code to install the Search component into your project. This involves copying and pasting the provided TypeScript code into your project files. It's designed for integration within the shadcn-solid framework.

```tsx
```tsx title="components/ui/search" file=<rootDir>/apps/docs/src/registry/ui/search.tsx

```
```

```tsx
```tsx title="components/ui/search" file=<rootDir>/apps/unocss-playground/src/registry/ui/search.tsx

```
```

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

### Tabs Component Usage Example

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/tabs.mdx

Example code demonstrating how to import and use the Tabs component in your application. It shows the basic structure with TabsList, TabsTrigger, TabsIndicator, and TabsContent.

```tsx
import {
  Tabs,
  TabsContent,
  TabsIndicator,
  TabsList,
  TabsTrigger,
} from "@components/ui/v4/tabs"

```

```tsx
<Tabs>
  <TabsList>
    <TabsTrigger />
    <TabsTrigger />
    <TabsIndicator />
  </TabsList>
  <TabsContent />
  <TabsContent />
</Tabs>

```

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

### Drawer Component Installation

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/drawer.mdx

Provides the code to install the Drawer component. This snippet includes variations for different project structures, specifically for a root directory and an unocss playground.

```tsx
```tsx title="components/ui/drawer" file=<rootDir>/apps/docs/src/registry/ui/drawer.tsx

```
```

```tsx
```tsx title="components/ui/drawer" file=<rootDir>/apps/unocss-playground/src/registry/ui/drawer.tsx

```
```

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

### Toggle Group Demo Example

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/toggle-group.mdx

A demonstration of the Toggle Group component in action. This example showcases the basic functionality and appearance of the toggle group.

```tsx
```tsx file=<rootDir>/apps/docs/src/registry/examples/toggle-group-demo.tsx

```
```

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

### Badge Component Secondary Example (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/badge.mdx

Shows how to render the Badge component with the 'secondary' variant.

```tsx
import { Badge } from "@/components/ui/badge"

<Badge variant="secondary">Secondary</Badge>
```

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

### Calendar Demo Example (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/calendar.mdx

A placeholder for the calendar-demo.tsx file, likely used for showcasing the basic functionality of the Calendar component.

```tsx
/* Code for calendar-demo.tsx */
// This is a placeholder for the actual demo code.
```

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

### Card Component Installation (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/card.mdx

Provides the code for installing the Card component in a TypeScript project. This involves copying and pasting the component's source code into your project's directory structure. It is available in multiple locations within the project.

```tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const cardVariants = cva(
  "text-slate-950 dark:text-white",
  {
    variants: {
      elevation: {
        "0": "shadow-none",
        "1": "shadow-sm",
        "2": "shadow",
        "3": "shadow-md",
        "4": "shadow-lg",
      },
    },
    defaultVariants: {
      elevation: "0",
    },
  }
)

export interface CardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof cardVariants> {
  asChild?: boolean
}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, elevation, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "div"
    return (
      <Comp
        ref={ref}
        className={cn(cardVariants({ elevation, className }))}
        {...props}
      />
    )
  }
)
Card.displayName = "Card"

export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  asChild?: boolean
}

const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
  ({ className, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "div"
    return (
      <Comp
        ref={ref}
        className={cn("flex flex-col space-y-1.5 p-6", className)}
        {...props}
      />
    )
  }
)
CardHeader.displayName = "CardHeader"

export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
  asChild?: boolean
}

const CardTitle = React.forwardRef<HTMLParagraphElement, CardTitleProps>(
  ({ className, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "h3"
    return (
      <Comp
        ref={ref}
        className={cn(
          "text-2xl font-semibold leading-none tracking-tight",
          className
        )}
        {...props}
      />
    )
  }
)
CardTitle.displayName = "CardTitle"

export interface CardDescriptionProps
  extends React.HTMLAttributes<HTMLParagraphElement> {
  asChild?: boolean
}

const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(
  ({ className, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "p"
    return (
      <Comp
        ref={ref}
        className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
        {...props}
      />
    )
  }
)
CardDescription.displayName = "CardDescription"

export interface CardContentProps
  extends React.HTMLAttributes<HTMLDivElement> {
  asChild?: boolean
}

const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
  ({ className, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "div"
    return <Comp ref={ref} className={cn("p-6 pt-0", className)} {...props} />
  }
)
CardContent.displayName = "CardContent"

export interface CardFooterProps
  extends React.HTMLAttributes<HTMLDivElement> {
  asChild?: boolean
}

const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
  ({ className, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "div"
    return (
      <Comp
        ref={ref}
        className={cn("flex items-center p-6 pt-0", className)}
        {...props}
      />
    )
  }
)
CardFooter.displayName = "CardFooter"

export { Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
  cardVariants
}
```

```tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const cardVariants = cva(
  "text-slate-950 dark:text-white",
  {
    variants: {
      elevation: {
        "0": "shadow-none",
        "1": "shadow-sm",
        "2": "shadow",
        "3": "shadow-md",
        "4": "shadow-lg",
      },
    },
    defaultVariants: {
      elevation: "0",
    },
  }
)

export interface CardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof cardVariants> {
  asChild?: boolean
}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, elevation, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "div"
    return (
      <Comp
        ref={ref}
        className={cn(cardVariants({ elevation, className }))}
        {...props}
      />
    )
  }
)
Card.displayName = "Card"

export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  asChild?: boolean
}

const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
  ({ className, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "div"
    return (
      <Comp
        ref={ref}
        className={cn("flex flex-col space-y-1.5 p-6", className)}
        {...props}
      />
    )
  }
)
CardHeader.displayName = "CardHeader"

export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
  asChild?: boolean
}

const CardTitle = React.forwardRef<HTMLParagraphElement, CardTitleProps>(
  ({ className, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "h3"
    return (
      <Comp
        ref={ref}
        className={cn(
          "text-2xl font-semibold leading-none tracking-tight",
          className
        )}
        {...props}
      />
    )
  }
)
CardTitle.displayName = "CardTitle"

export interface CardDescriptionProps
  extends React.HTMLAttributes<HTMLParagraphElement> {
  asChild?: boolean
}

const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(
  ({ className, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "p"
    return (
      <Comp
        ref={ref}
        className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
        {...props}
      />
    )
  }
)
CardDescription.displayName = "CardDescription"

export interface CardContentProps
  extends React.HTMLAttributes<HTMLDivElement> {
  asChild?: boolean
}

const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
  ({ className, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "div"
    return <Comp ref={ref} className={cn("p-6 pt-0", className)} {...props} />
  }
)
CardContent.displayName = "CardContent"

export interface CardFooterProps
  extends React.HTMLAttributes<HTMLDivElement> {
  asChild?: boolean
}

const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
  ({ className, asChild, ...props }, ref) => {
    const Comp = asChild && Slot ? Slot : "div"
    return (
      <Comp
        ref={ref}
        className={cn("flex items-center p-6 pt-0", className)}
        {...props}
      />
    )
  }
)
CardFooter.displayName = "CardFooter"

export { Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
  cardVariants
}
```

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

### Dropdown Menu Component Installation

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/dropdown-menu.mdx

Provides the code to install the Dropdown Menu component. This involves copying and pasting the provided UI component code into your project's designated directory.

```tsx
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent class="w-56">
        <DropdownMenuItem onSelect={() => alert("సాయ")}>
          <div class="i-lucide-log-out w-4 h-4 mr-2" />
          <span>Log out</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem disabled>
          <div class="i-lucide-plus-circle w-4 h-4 mr-2" />
          <span>New Team</span>
        </DropdownMenuItem>
        <DropdownMenuPortal>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <div class="i-lucide-plus w-4 h-4 mr-2" />
              <span>Invite others</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem>
                <div class="i-lucide-mail w-4 h-4 mr-2" />
                <span>Email</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <div class="i-lucide-message-square w-4 h-4 mr-2" />
                <span>Message</span>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <div class="i-lucide-plus-circle w-4 h-4 mr-2" />
                <span>More options</span>
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuItem>
            <div class="i-lucide-git-branch w-4 h-4 mr-2" />
            <span>Other Branch</span>
          </DropdownMenuItem>
        </DropdownMenuPortal>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

```

```tsx
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent class="w-56">
        <DropdownMenuItem onSelect={() => alert("సాయ")}>
          <div class="i-lucide-log-out w-4 h-4 mr-2" />
          <span>Log out</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem disabled>
          <div class="i-lucide-plus-circle w-4 h-4 mr-2" />
          <span>New Team</span>
        </DropdownMenuItem>
        <DropdownMenuPortal>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <div class="i-lucide-plus w-4 h-4 mr-2" />
              <span>Invite others</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem>
                <div class="i-lucide-mail w-4 h-4 mr-2" />
                <span>Email</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <div class="i-lucide-message-square w-4 h-4 mr-2" />
                <span>Message</span>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <div class="i-lucide-plus-circle w-4 h-4 mr-2" />
                <span>More options</span>
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuItem>
            <div class="i-lucide-git-branch w-4 h-4 mr-2" />
            <span>Other Branch</span>
          </DropdownMenuItem>
        </DropdownMenuPortal>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

```

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

### Tabs Component Example in TSX

Source: https://context7.com/hngngn/shadcn-solid/llms.txt

Demonstrates the Tabs component for organizing layered content with tab navigation. It includes triggers, content sections, and an indicator for visual feedback. This example utilizes components from both shadcn/ui tabs and card modules.

```tsx
import {
  Tabs,
  TabsContent,
  TabsIndicator,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

const TabsDemo = () => {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsIndicator />
      </TabsList>
      <TabsContent value="account">
        <Card>
          <CardHeader>
            <CardTitle>Account</CardTitle>
          </CardHeader>
          <CardContent>
            Make changes to your account here.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="password">
        <Card>
          <CardHeader>
            <CardTitle>Password</CardTitle>
          </CardHeader>
          <CardContent>
            Change your password here.
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  )
}
```

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

### Switch Component Usage Example (SolidJS)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/switch.mdx

Illustrates how to import and use the Switch component in a SolidJS application. It shows the necessary imports and JSX structure.

```tsx
```tsx
import {
  Switch,
  SwitchControl,
  SwitchInput,
  SwitchThumb,
} from "@components/ui/switch"
```
```

```tsx
```tsx
<Switch>
  <SwitchInput />
  <SwitchControl>
    <SwitchThumb />
  </SwitchControl>
</Switch>
```
```

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

### Checkbox Component Installation - TypeScript

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/checkbox.mdx

Provides the code to install the Checkbox component into your project, with variations for different project setups.

```tsx
 
```

```tsx
 
```

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

### Install Button Component (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/button.mdx

Provides the code to install the Button component by copying and pasting it into your project. This snippet is available for different project setups.

```tsx
```tsx file=<rootDir>/apps/docs/src/registry/ui/button.tsx

```
```

```tsx
```tsx file=<rootDir>/apps/unocss-playground/src/registry/ui/button.tsx

```
```

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

### Install Slider Component

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/slider.mdx

Provides the code to install the Slider component in your project. This involves copying and pasting the provided code into your project files. It is available for different project setups.

```tsx
import {
  Slider,
  SliderFill,
  SliderThumb,
  SliderTrack,
} from "@components/ui/slider"

<Slider>
  <SliderTrack>
    <SliderFill />
    <SliderThumb />
  </SliderTrack>
</Slider>
```

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

### OTP Field Component Installation (TypeScript/TSX)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/otp-field.mdx

Provides the code to install the OTP Field component into your project. This involves copying and pasting the provided code into the specified file paths for different project setups.

```tsx
import {
  OTPField,
  OTPFieldGroup,
  OTPFieldInput,
  OTPFieldSeparator,
  OTPFieldSlot,
} from "@/components/ui/otp-field"

<OTPField>
  <OTPFieldInput />
  <OTPFieldGroup>
    <OTPFieldSlot index={0} />
    <OTPFieldSlot index={1} />
    <OTPFieldSlot index={2} />
  </OTPFieldGroup>
  <OTPFieldSeparator />
  <OTPFieldGroup>
    <OTPFieldSlot index={3} />
    <OTPFieldSlot index={4} />
    <OTPFieldSlot index={5} />
  </OTPFieldGroup>
</OTPField>
```

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

### Menubar Usage Example - React/TypeScript

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/menubar.mdx

Illustrates how to import and use the Menubar component in a React application with TypeScript. It shows the basic structure for creating a functional menubar.

```tsx
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarPortal,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/ui/menubar"

```

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarPortal>
      <MenubarContent>
        <MenubarItem />
        <MenubarSeparator />
        <MenubarItem />
      </MenubarContent>
    </MenubarPortal>
  </MenubarMenu>
</Menubar>

```

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

### Date Picker Range Demo (TSX)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/date-picker.mdx

Illustrates how to use the Date Picker component for selecting a date range. This example extends the basic functionality to allow users to pick a start and end date.

```tsx
import {
  Calendar,
  CalendarCell,
  CalendarCellTrigger,
  CalendarHeadCell,
  CalendarLabel,
  CalendarNav,
  CalendarTable,
} from "@/registry/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverPortal,
  PopoverTrigger,
} from "@/registry/ui/popover";
import { Index } from "solid-js";

export function DatePickerRangeDemo() {
  return (
    <Calendar mode="range">
      {(props) => (
        <Popover>
          <PopoverTrigger />
          <PopoverPortal>
            <PopoverContent>
              <div>
                <div>
                  <CalendarNav action="prev-month" />
                  <CalendarLabel />
                  <CalendarNav action="next-month" />
                </div>
                <CalendarTable>
                  <thead>
                    <tr>
                      <Index each={props.weekdays}>
                        {(weekday) => <CalendarHeadCell />}
                      </Index>
                    </tr>
                  </thead>
                  <tbody>
                    <Index each={props.weeks}>
                      {(week) => (
                        <tr>
                          <Index each={week()}>
                            {(day) => (
                              <CalendarCell>
                                <CalendarCellTrigger />
                              </CalendarCell>
                            )}
                          </Index>
                        </tr>
                      )}
                    </Index>
                  </tbody>
                </CalendarTable>
              </div>
            </PopoverContent>
          </PopoverPortal>
        </Popover>
      )}
    </Calendar>
  );
}
```

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

### Define Task Data Structure and Columns for TanStack Table

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/data-table.mdx

Defines the TypeScript type for task data and the column definitions for a TanStack Table. This setup is crucial for structuring data and specifying how it should be displayed in the table, including access keys and headers.

```tsx
import type { ColumnDef } from "@tanstack/solid-table"

// This type is used to define the shape of our data.
// You can use a Zod or Validbot schema here if you want.
export type Task = {
  id: string
  code: string
  title: string
  status: "todo" | "in-progress" | "done" | "cancelled"
  label: "bug" | "feature" | "enhancement" | "documentation"
}

export const columns: ColumnDef<Task>[] = [
  {
    accessorKey: "code",
    header: "Task",
  },
  {
    accessorKey: "title",
    header: "Title",
  },
  {
    accessorKey: "status",
    header: "Status",
  },
]
```

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

### Install Breadcrumbs UI Component

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/breadcrumbs.mdx

Provides the necessary code to install the Breadcrumbs UI component into your project. It includes installation instructions for different environments.

```tsx
import {
  BreadcrumbList,
  Breadcrumbs,
  BreadcrumbsItem,
  BreadcrumbsLink,
  BreadcrumbsSeparator,
} from "@components/ui/breadcrumbs"

<Breadcrumbs>
  <BreadcrumbList>
    <BreadcrumbsItem>
      <BreadcrumbsLink />
    </BreadcrumbsItem>
    <BreadcrumbsSeparator />
  </BreadcrumbList>
</Breadcrumbs>
```

```tsx
import {
  BreadcrumbList,
  Breadcrumbs,
  BreadcrumbsItem,
  BreadcrumbsLink,
  BreadcrumbsSeparator,
} from "@components/ui/breadcrumbs"

<Breadcrumbs>
  <BreadcrumbList>
    <BreadcrumbsItem>
      <BreadcrumbsLink />
    </BreadcrumbsItem>
    <BreadcrumbsSeparator />
  </BreadcrumbList>
</Breadcrumbs>
```

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

### App Sidebar Structure Example (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/sidebar.mdx

Illustrates the composition of the `AppSidebar` component using various parts of the Sidebar UI component. It shows how to structure the sidebar with a header, content, and footer, including nested groups within the content area.

```tsx
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
} from "@/components/ui/sidebar"

export const AppSidebar = () => {
  return (
    <Sidebar>
      <SidebarHeader />
      <SidebarContent>
        <SidebarGroup />
        <SidebarGroup />
      </SidebarContent>
      <SidebarFooter />
    </Sidebar>
  )
}

```

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

### Skeleton Component Installation

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/skeleton.mdx

Provides the code to install the Skeleton component in your project. It is available for different configurations within the shadcn-solid project.

```tsx
```tsx file=<rootDir>/apps/docs/src/registry/ui/skeleton.tsx

```
```

```tsx
```tsx file=<rootDir>/apps/unocss-playground/src/registry/ui/skeleton.tsx

```
```

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

### Accordion Component Usage Example

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/accordion.mdx

Illustrates how to import and use the Accordion component in your application. Shows the basic structure for creating an accordion with trigger and content elements.

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

```

```tsx
<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
</Accordion>

```

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

### Text Area Example

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/text-field.mdx

Presents an example of the Text Field component used as a Text Area for multi-line text input.

```tsx
// Code for text area demo
```

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

### KbdGroup Component Usage Example (TypeScript)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/kbd.mdx

Illustrates how to use the `KbdGroup` component to group multiple keyboard keys together. This is useful for displaying key combinations.

```tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd"

<KbdGroup>
  <Kbd>Shift</Kbd>
  <Kbd>Cmd</Kbd>
  <Kbd>P</Kbd>
</KbdGroup>
```

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

### Combobox Component Installation (tsx)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/combobox.mdx

Provides the code to install the Combobox component in your project. This component combines a text input with a listbox for filtering options.

```tsx
import {
  Combobox,
  ComboboxContent,
  ComboboxItem,
  ComboboxTrigger,
  ComboboxInput,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxLabel,
  ComboboxSeparator,
  Combobox as ComboboxRoot,
} from "@/components/ui/combobox"

export type ComboboxProps = {
  options: Array<{ label: string; value: string }>
  placeholder?: string
  disabled?: boolean
  error?: boolean
  loading?: boolean
  emptyMessage?: string
  onSelectedValueChange?: (value: string | undefined) => void
  onInputChange?: (value: string) => void
  onFocusOutside?: (event: FocusEvent) => void
  onBlurOutside?: (event: FocusEvent) => void
  onEscapeKeyDown?: (event: KeyboardEvent) => void
  onOpenChange?: (open: boolean) => void
  open?: boolean
  multiple?: boolean
  defaultOpen?: boolean
  defaultSelectedValue?: string | string[] | undefined
  selectedValue?: string | string[] | undefined
  children: React.ReactNode
}

export {
  Combobox,
  ComboboxContent,
  ComboboxItem,
  ComboboxTrigger,
  ComboboxInput,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxLabel,
  ComboboxSeparator,
  ComboboxRoot
}

```

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

### Error Text Field Example

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/text-field.mdx

Shows an example of a Text Field component in an error state, typically used for form validation feedback.

```tsx
// Code for error text field demo
```

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

### Basic Table Structure (TSX)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/table.mdx

Illustrates the fundamental structure for creating a table using the imported components. This example demonstrates how to set up the TableHeader, TableBody, and individual TableRows and TableCells.

```tsx
<Table>
  <TableHeader>
    <TableRow>
      <TableHead />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell />
    </TableRow>
  </TableBody>
</Table>

```

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

### Context Menu Demo - TypeScript/JSX

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/context-menu.mdx

Demonstrates the usage and appearance of the Context Menu component. This example showcases how to integrate the Context Menu into a UI, typically triggered by a button or other interactive element.

```tsx

```

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

### Basic Sidebar Usage in Shadcn-Solid

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/sidebar.mdx

A simple example of how to import and render the main Sidebar component within an application. This assumes the necessary context providers are in place.

```tsx
import { Sidebar } from "@/components/ui/sidebar"

const AppSidebar = () => {
  return <Sidebar />
}

export default AppSidebar
```

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

### Setup SidebarProvider and SidebarTrigger in Root Route (SolidJS)

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/sidebar.mdx

Integrates `SidebarProvider` and `SidebarTrigger` into the main application layout. This is essential for managing the sidebar's state and enabling its collapsible behavior. It wraps the main content and the `AppSidebar` component.

```tsx
import type { RouteSectionProps } from "@solidjs/router"

import { AppSidebar } from "@/components/app-sidebar"
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"

const Page = (props: RouteSectionProps) => {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger />
        {props.children}
      </main>
    </SidebarProvider>
  )
}

export default Page
```

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

### Install Text Field Component

Source: https://github.com/hngngn/shadcn-solid/blob/main/apps/docs/src/content/docs/components/text-field.mdx

Provides the code to install the Text Field component into your project. This involves copying and pasting the provided code into your project files.

```tsx
import { TextField, TextFieldInput } from "@components/ui/text-field"

<TextField>
  <TextFieldInput />
</TextField>
```