Solid UI

https://github.com/stefan-karger/solid-ui
Admin
SolidUI is an unofficial port of shadcn/ui and tremor-raw to SolidJS, offering accessible and...
Tokens:36,306
Snippets:331
Trust Score:-
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Drawer via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/drawer.mdx

Installs the Drawer component using the solidui-cli. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add drawer
```

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

### Install Tooltip via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/tooltip.mdx

Installs the Tooltip component using the solidui-cli. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add tooltip
```

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

### Install Menubar Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/menubar.mdx

Installs the Menubar component using the solidui-cli. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add menubar
```

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

### Install Grid Component using CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/grid.mdx

Installs the Grid component and its dependencies using the solidui-cli. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add grid
```

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

### Install Skeleton Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/skeleton.mdx

Installs the Skeleton component using the solidui-cli. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add skeleton
```

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

### Install Select Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/select.mdx

Installs the Select component using the Solid UI CLI. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add select
```

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

### Install Sidebar Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/sidebar.mdx

Installs the sidebar component using the solidui-cli. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add sidebar
```

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

### Create Vite Project with Solid

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/vite.mdx

Initializes a new Vite project, guiding the user to select Solid as the framework and TypeScript as the variant.

```bash
npm create vite@latest

```

```txt
✔ Project name: ... vite-project
✔ Select a framework: › Solid
✔ Select a variant: › TypeScript

```

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

### Install Tailwind CSS and Configure

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/vite.mdx

Installs Tailwind CSS and its peer dependencies, then generates the necessary configuration files (`tailwind.config.js` and `postcss.config.js`).

```bash
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

```

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

### Install Card Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/card.mdx

Installs the Solid UI Card component using the provided CLI command. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add card
```

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

### Install Context Menu via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/context-menu.mdx

Installs the Context Menu component using the Solid UI CLI. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add context-menu
```

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

### Install Collapsible Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/collapsible.mdx

Installs the Collapsible component and its related files using the solidui-cli. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add collapsible
```

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

### Install Dropdown Menu via CLI - Solid UI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/dropdown-menu.mdx

Installs the Dropdown Menu component using the Solid UI CLI. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add dropdown-menu
```

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

### Install Progress Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/progress.mdx

Installs the Solid UI progress component using the Solid UI CLI. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add progress
```

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

### Install Hover Card via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/hover-card.mdx

Installs the Hover Card component using the Solid UI CLI. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add hover-card
```

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

### Install Checkbox via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/checkbox.mdx

Installs the Checkbox component using the Solid UI CLI. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add checkbox
```

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

### Install Accordion Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/accordion.mdx

Installs the Accordion component and its dependencies using the Solid UI CLI. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add accordion
```

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

### Install Carousel Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/carousel.mdx

Installs the carousel component and its dependencies using the solidui-cli. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add carousel
```

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

### Install Tabs Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/tabs.mdx

Installs the Tabs component and its dependencies using the Solid UI CLI. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add tabs
```

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

### Create SolidStart Project with Tailwind CSS

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/solid-start.mdx

Initializes a new SolidJS project using npm, specifically selecting the 'with-tailwindcss' template for integrated Tailwind CSS support. It guides the user through project naming and template selection.

```bash
npm init solid@latest
```

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

### Install Avatar Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/avatar.mdx

Installs the Avatar component using the Solid UI CLI. This is the recommended method for quick setup.

```bash
npx solidui-cli@latest add avatar
```

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

### Install Inter Font with Fontsource

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/solid-start.mdx

Installs the Inter font using the `@fontsource/inter` package, a convenient way to manage font files within a project. This is a prerequisite for using the Inter font in SolidStart.

```bash
npm install @fontsource/inter
```

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

### Install Charts via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/charts.mdx

Installs the charts component from solidui-cli.

```bash
npx solidui-cli@latest add charts
```

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

### SolidJS Application Directory Structure

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/solid-start.mdx

Illustrates a recommended directory structure for SolidJS applications, including placement of public assets, components (UI and general), utility functions, and routes. This provides a clear organizational blueprint.

```txt
.
├── public
│   ├── favicon.ico
│   └── ...
├── src
│   ├── components
│   │   ├── ui
│   │   │   ├── button.tsx
│   │   │   ├── input.tsx
│   │   │   └── ...
│   │   ├── main-nav.tsx
│   │   ├── page-header.tsx
│   │   └── ...
│   ├── lib
│   │   └── utils.ts
│   ├── routes
│   │   ├── [...404].tsx
│   │   ├── index.tsx
│   │   └── ...
│   ├── app.css
│   ├── app.tsx
│   └── ...
├── app.config.ts
├── tailwind.config.cjs
└── ...
```

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

### Create Astro Project

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/astro.mdx

Initializes a new Astro project using npm. This command starts the project creation process, prompting for configuration details.

```bash
npm create astro@latest
```

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

### Configure UI Settings via CLI Prompts

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/solid-start.mdx

Demonstrates the interactive prompts used by the SolidUI CLI to configure `ui.config.json`. It covers settings like TypeScript usage, file paths for global CSS and Tailwind configuration, and import aliases.

```txt
Would you like to use TypeScript? (recommended) yes
Where is your global CSS file? src/app.css
Where is your tailwind.config.js located? tailwind.config.cjs
Configure the import alias for the src directory: ~/*
```

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

### Install Callout Component using CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/callout.mdx

Installs the Callout component using the solidui-cli. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add callout
```

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

### Initialize Solid UI Project with CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/cli.mdx

The `init` command sets up a new Solid UI project by installing dependencies, configuring Tailwind CSS, adding the `cn` utility, and creating a `ui.config.json` file for project-specific configurations. This is the first step to integrating Solid UI into your project.

```bash
npx solidui-cli@latest init
```

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

### Install Timeline Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/timeline.mdx

Installs the Timeline component using the solidui-cli. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add timeline
```

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

### Install Label Component using CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/label.mdx

Installs the Solid UI Label component using the provided CLI command. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add label
```

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

### Install Drawer Dependencies Manually

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/drawer.mdx

Manually installs the necessary dependency for the Drawer component using npm. This is an alternative to the CLI installation.

```bash
npm install @corvu/drawer
```

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

### Install Toast Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/toast.mdx

Installs the Toast component using the solidui-cli. This is the recommended and simplest way to add the component to your project.

```bash
npx solidui-cli@latest add toast
```

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

### Install Aspect Ratio Component using CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/aspect-ratio.mdx

Installs the Aspect Ratio component using the Solid UI CLI. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add aspect-ratio
```

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

### Install Pagination via CLI - Bash

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/pagination.mdx

Installs the pagination component using the Solid UI CLI. This is the quickest way to add the component to your project.

```bash
npx solidui-cli@latest add pagination
```

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

### Install Bar List via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/bar-list.mdx

Installs the Bar List component using the solidui-cli. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add bar-list
```

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

### Install Resizable Component via CLI - Bash

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/resizable.mdx

Installs the Resizable component and its dependencies using the solidui-cli. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add resizable
```

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

### Install Table Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/table.mdx

Installs the Solid UI table component using the provided CLI command. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add table
```

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

### Install Badge Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/badge.mdx

Installs the Badge component using the Solid UI CLI. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add badge
```

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

### Install Resizable Component Manually - Bash

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/resizable.mdx

Manually installs the Resizable component by adding the necessary npm package. This method is useful for projects that do not use the CLI or require more control over the installation process.

```bash
npm install @corvu/resizable
```

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

### Install Node Types for Vite Configuration (npm)

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/manual.mdx

Installs the type definitions for Node.js as a development dependency. This is required for using Node.js path modules within the Vite configuration file without type errors.

```bash
# (so you can import "path" without error)
npm i -D @types/node
```

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

### Update vite.config.ts for Path Aliasing

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/vite.mdx

Updates the `vite.config.ts` file to configure Vite's resolve alias, enabling the use of `~` as a shortcut for the `./src` directory, and installs `@types/node` for path module support.

```bash
# (so you can import "path" without error)
npm i -D @types/node

```

```ts
import path from "path"

import solid from 'vite-plugin-solid';
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [solid()],
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./src")
    }
  }
})

```

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

### Install Switch Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/switch.mdx

Installs the Switch component using the Solid UI CLI. This is a quick way to add the component to your project.

```bash
npx solidui-cli@latest add switch
```

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

### Initialize SolidUI Project with CLI

Source: https://context7.com/stefan-karger/solid-ui/llms.txt

Initializes a SolidJS project with SolidUI configuration, creating necessary files and installing dependencies. It prompts for user preferences like TypeScript usage and file locations. The command generates a `ui.config.json` file to store these settings.

```bash
npx solidui-cli init

npx solidui-cli init --cwd ./my-solid-app
```

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

### Install Chart.js Dependency

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/charts.mdx

Installs the chart.js library, a dependency for the chart components.

```bash
npm install chart.js
```

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

### Install Command Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/command.mdx

Installs the Command component and its dependencies using the Solid UI CLI.

```bash
npx solidui-cli@latest add command
```

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

### Install Tailwind CSS Dependencies (npm)

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/manual.mdx

Installs necessary Tailwind CSS related packages using npm. These packages are essential for styling components and managing utility classes within the project.

```bash
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge
```

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

### Install Progress Circle via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/progress-circle.mdx

Installs the Progress Circle component using the Solid UI CLI. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add progress-circle
```

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

### Install Delta Bar using CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/delta-bar.mdx

Installs the Delta Bar component using the Solid UI CLI. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add delta-bar
```

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

### Install Separator Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/separator.mdx

Installs the Separator component using the solidui-cli. This is a quick way to add the component to your project.

```bash
npx solidui-cli@latest add separator
```

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

### Create Tauri Project with Solid

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/tauri.mdx

Initializes a new Tauri project using npm, guiding the user to select Solid as the frontend framework and TypeScript for the UI flavor.

```bash
npm create tauri-app@latest

```

```txt
✔ Project name · tauri-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript
✔ Choose your UI template · Solid
✔ Choose your UI flavor · TypeScript

```

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

### Install Slider via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/slider.mdx

Installs the Slider component using the solidui-cli. This is the quickest way to add the component to your project.

```bash
npx solidui-cli@latest add slider
```

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

### Basic Solid UI Sheet Usage

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/sheet.mdx

A fundamental example of the Solid UI Sheet component, showcasing a trigger to open the sheet and its content area. This serves as a starting point for customization.

```tsx
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you sure absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account and remove your data
        from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>
```

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

### Install Command Component Dependencies Manually

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/command.mdx

Manually installs the necessary npm dependencies for the Command component, including @kobalte/core and cmdk-solid.

```bash
npm install @kobalte/core cmdk-solid
```

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

### Install Carousel Dependencies Manually

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/carousel.mdx

Manually installs the necessary Embla Carousel Solid dependency using npm. This is an alternative to the CLI installation.

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

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

### Install Sonner via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/sonner.mdx

Installs the Sonner component using the solidui-cli. This is a quick way to add the component to your project.

```bash
npx solidui-cli@latest add sonner
```

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

### Install Solid UI Sheet via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/sheet.mdx

Installs the Solid UI Sheet component using the provided CLI command. This is the quickest way to add the component to your project.

```bash
npx solidui-cli@latest add sheet
```

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

### Install Combobox via CLI - Solid UI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/combobox.mdx

Installs the Combobox component using the Solid UI CLI. This is a quick way to add the component to your project.

```bash
npx solidui-cli@latest add combobox
```

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

### Install OTP Field Dependencies Manually

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/otp-field.mdx

Installs the @corvu/otp-field package using npm. This is a manual installation step for the OTP Field component.

```bash
npm install @corvu/otp-field
```

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

### Install Alert Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/alert.mdx

Installs the Alert component and its dependencies using the Solid UI CLI. This is the recommended and simplest method for adding the component to your project.

```bash
npx solidui-cli@latest add alert
```

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

### Install Flex Component using CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/flex.mdx

Installs the Flex component using the solidui-cli. This command-line interface tool simplifies the process of adding components to your Solid UI project.

```bash
npx solidui-cli@latest add flex
```

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

### Install OTP Field via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/otp-field.mdx

Installs the OTP Field component using the solidui-cli. This command fetches and sets up the necessary files for the component.

```bash
npx solidui-cli@latest add otp-field
```

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

### Render a Basic Menubar UI in SolidJS

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/menubar.mdx

Provides a JSX example of how to render a basic Menubar structure with File menu, including items, separators, and shortcuts.

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

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

### Select Component Example in SolidJS

Source: https://context7.com/stefan-karger/solid-ui/llms.txt

Demonstrates the Select component, a dropdown with search and multi-select capabilities. It shows how to configure options, handle selection changes, and customize item rendering. This example uses SolidJS for state management and relies on various sub-components of the Select primitive.

```tsx
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectLabel,
  SelectDescription
} from "~/components/ui/select"
import { createSignal } from "solid-js"

function SelectExample() {
  const [value, setValue] = createSignal<string>()

  const frameworks = [
    { value: "solid", label: "SolidJS" },
    { value: "react", label: "React" },
    { value: "vue", label: "Vue" },
    { value: "svelte", label: "Svelte" }
  ]

  return (
    <Select
      value={value()}
      onChange={setValue}
      options={frameworks}
      optionValue="value"
      optionTextValue="label"
      placeholder="Select a framework..."
      itemComponent={(props) => (
        <SelectItem item={props.item}>{props.item.rawValue.label}</SelectItem>
      )} >
      <SelectLabel>Framework</SelectLabel>
      <SelectTrigger class="w-[200px]">
        <SelectValue<typeof frameworks[0]> >
          {(state) => state.selectedOption()?.label}
        </SelectValue>
      </SelectTrigger>
      <SelectContent />
      <SelectDescription>Choose your preferred framework</SelectDescription>
    </Select>
  )
}
```

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

### Basic Accordion Usage Example

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/accordion.mdx

A basic example demonstrating how to use the Accordion component with a single collapsible item. This shows the structure for triggers and content.

```tsx
<Accordion multiple={false} collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>
```

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

### Install Alert Dialog via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/alert-dialog.mdx

Installs the Alert Dialog component using the Solid UI CLI. This is a quick way to add the component to your project.

```bash
npx solidui-cli@latest add alert-dialog
```

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

### Install Tailwind CSS and Dependencies

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/tauri.mdx

Installs Tailwind CSS, PostCSS, and Autoprefixer as development dependencies, and generates the necessary configuration files (`tailwind.config.js` and `postcss.config.js`).

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

```

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

### Install Dialog Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/dialog.mdx

Installs the Dialog component using the Solid UI CLI. This is a quick way to add the component to your project.

```bash
npx solidui-cli@latest add dialog
```

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

### Install Toggle Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/toggle.mdx

Installs the Solid UI Toggle component using the Solid UI CLI. This is the quickest way to add the component to your project.

```bash
npx solidui-cli@latest add toggle
```

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

### Install Popover Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/popover.mdx

Installs the Popover component using the Solid UI CLI. This is a quick way to add the component to your project.

```bash
npx solidui-cli@latest add popover
```

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

### Install Button Component via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/button.mdx

Installs the Button component using the Solid UI CLI. This is a quick way to add the component to your project.

```bash
npx solidui-cli@latest add button
```

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

### SolidJS Card Component Examples

Source: https://context7.com/stefan-karger/solid-ui/llms.txt

Provides examples of using the SolidJS Card component and its associated sub-components (`CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`). This demonstrates how to structure content within a card, including forms and action buttons.

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

function CardExample() {
  return (
    <Card class="w-[350px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <div class="grid w-full items-center gap-4">
            <div class="flex flex-col space-y-1.5">
              <label for="name">Name</label>
              <input id="name" placeholder="Name of your project" />
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter class="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}
```

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

### Install Radio Group via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/radio-group.mdx

Installs the Radio Group component using the solid-ui CLI tool. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add radio-group
```

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

### Import and Use Button Component in SolidStart Page

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/solid-start.mdx

Shows how to import the 'Button' component, added via the SolidUI CLI, into a SolidStart page component (`Home`). It illustrates basic usage by rendering a button with text.

```tsx
import { Button } from "~/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```

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

### Add Solid UI Button Component

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/vite.mdx

Adds a `Button` component to the project using the `solidui-cli add` command and demonstrates how to import and use it in a Solid.js component.

```bash
npx solidui-cli@latest add button

```

```tsx
import { Button } from "~/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

```

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

### Install Badge Delta via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/badge-delta.mdx

Installs the Badge Delta component using the Solid UI CLI. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add badge-delta
```

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

### Install Navigation Menu via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/navigation-menu.mdx

Installs the Navigation Menu component using the Solid UI CLI. This is the quickest way to add the component to your project.

```bash
npx solidui-cli@latest add navigation-menu
```

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

### Install Breadcrumb Component using CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/breadcrumb.mdx

Installs the Breadcrumb component using the Solid UI CLI. This is the recommended method for adding the component to your project.

```bash
npx solidui-cli@latest add breadcrumb
```

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

### Install Number Field via CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/number-field.mdx

Installs the Number Field component using the solidui-cli. This is a quick way to add the component to your project.

```bash
npx solidui-cli@latest add number-field
```

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

### Install Avatar Component Dependencies Manually

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/avatar.mdx

Manually installs the necessary dependencies for the Avatar component using npm. This method is useful if you prefer not to use the CLI.

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

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

### Add SolidUI Components

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/dark-mode/solid-start.mdx

Installs specified SolidUI components, such as 'button' and 'dropdown-menu', which are likely used for the dark mode toggle and other UI elements.

```bash
npx solidui-cli@latest add button dropdown-menu
```

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

### Add Components to SolidJS Project with CLI

Source: https://context7.com/stefan-karger/solid-ui/llms.txt

Fetches and installs UI components into your SolidJS project, automatically handling dependencies. Components can be added individually, all at once, or through an interactive selection process. Existing components can be overwritten if needed.

```bash
# Add specific components
npx solidui-cli add button card dialog

# Add all available components
npx solidui-cli add --all

# Overwrite existing components
npx solidui-cli add button --overwrite

# Interactive selection (run without arguments)
npx solidui-cli add
```

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

### Add Component to Project with Solid UI CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/packages/cli/README.md

The `add` command integrates a specified component into your project and automatically installs any necessary dependencies. If run without arguments, it displays a list of available components.

```bash
npx solidui-cli@latest add [component]
```

```bash
npx solidui-cli@latest add alert-dialog
```

```bash
npx solidui-cli@latest add
```

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

### Import Inter Font and Configure App in SolidStart

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/solid-start.mdx

Shows how to import the Inter font in the main `app.tsx` file and configure the application structure for routing and navigation. It includes importing necessary SolidStart components and custom Nav component.

```tsx
import { Suspense } from "solid-js"

import { Router } from "@solidjs/router"
import { FileRoutes } from "@solidjs/start/router"

import Nav from "~/components/Nav"

import "@fontsource/inter"
import "./app.css"

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <Nav />
          <Suspense>{props.children}</Suspense>
        </>
      )}>
      <FileRoutes />
    </Router>
  )
}
```

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

### Install Sonner Manually

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/sonner.mdx

Manually installs the Sonner component by adding the 'solid-sonner' npm package. This method requires copying and pasting provided code into your project.

```bash
npm install solid-sonner
```

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

### Basic Button Usage in SolidJS

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/button.mdx

Shows a basic example of rendering a Button component with an 'outline' variant. This illustrates the fundamental way to use the Button.

```tsx
<Button variant="outline">Button</Button>
```

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

### Implement Responsive Grid Layout with Cards

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/grid.mdx

Demonstrates how to use the Grid and Col components to create a responsive layout. The example shows a grid with varying column spans on different screen sizes, containing Card components.

```typescript
<Grid cols={1} colsMd={2} class="w-full gap-2">
  <Col span={1} spanMd={2}>
    <Card>
      <CardHeader>
        <CardTitle>Title</CardTitle>
      </CardHeader>
      <CardContent>KPI 1</CardContent>
    </Card>
  </Col>
  <Card>
    <CardHeader>
      <CardTitle>Title</CardTitle>
    </CardHeader>
    <CardContent>KPI 2</CardContent>
  </Card>
  <Card>
    <CardHeader>
      <CardTitle>Title</CardTitle>
    </CardHeader>
    <CardContent>KPI 3</CardContent>
  </Card>
</Grid>
```

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

### Install Toggle Group via CLI - Solid UI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/toggle-group.mdx

Installs the Toggle Group component using the Solid UI CLI. This is a quick way to add the component to your project.

```bash
npx solidui-cli@latest add toggle-group
```

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

### Install Text Field Component using CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/text-field.mdx

Installs the Text Field component into your Solid UI project using the Solid UI CLI. This is the recommended method for quick integration.

```bash
npx solidui-cli@latest add text-field
```

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

### Tabs Component Example in TypeScript (TSX)

Source: https://context7.com/stefan-karger/solid-ui/llms.txt

Demonstrates the usage of the Tabs component for organizing content into distinct views. It utilizes Tabs, TabsList, TabsTrigger, and TabsContent components. This example is written in TSX, a syntax extension for JavaScript and React.

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

function TabsExample() {
  return (
    <Tabs defaultValue="account" class="w-[400px]">
      <TabsList class="grid w-full grid-cols-2">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <div class="p-4">
          <h3 class="font-medium">Account Settings</h3>
          <p class="text-sm text-muted-foreground">
            Manage your account settings and preferences.
          </p>
        </div>
      </TabsContent>
      <TabsContent value="password">
        <div class="p-4">
          <h3 class="font-medium">Password Settings</h3>
          <p class="text-sm text-muted-foreground">
            Change your password and security settings.
          </p>
        </div>
      </TabsContent>
    </Tabs>
  )
}
```

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

### Basic Context Menu Usage

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/context-menu.mdx

A basic example of how to implement the Context Menu component. It includes a trigger element and a content area with various menu items.

```tsx
<ContextMenu>
  <ContextMenuTrigger>Open</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel>My Account</ContextMenuLabel>
    <ContextMenuSeparator />
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

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

### Import and Use Button Component in Astro

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/astro.mdx

Shows how to import and use the Button component within an Astro file. This example illustrates integrating a Solid UI component into an Astro page.

```astro
---
import { Button } from "~/components/ui/button"
---

<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>
```

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

### Checkbox Component Example in TypeScript (TSX)

Source: https://context7.com/stefan-karger/solid-ui/llms.txt

Demonstrates the Checkbox component, supporting checked, unchecked, and indeterminate states. This example uses Solid.js's createSignal for state management and is written in TSX.

```tsx
import { Checkbox } from "~/components/ui/checkbox"
import { createSignal } from "solid-js"

function CheckboxExample() {
  const [checked, setChecked] = createSignal(false)
  const [items, setItems] = createSignal([
    { id: 1, label: "Accept terms", checked: false },
    { id: 2, label: "Subscribe to newsletter", checked: true },
    { id: 3, label: "Enable notifications", checked: false }
  ])

  return (
    <div class="space-y-4">
      {/* Basic checkbox */}
      <Checkbox checked={checked()} onChange={setChecked}>
        <span class="ml-2">Remember me</span>
      </Checkbox>

      {/* Checkbox list */}
      <div class="space-y-2">
        {items().map((item) => (
          <Checkbox
            checked={item.checked}
            onChange={(checked) => {
              setItems(items().map(i =>
                i.id === item.id ? { ...i, checked } : i
              ))
            }}
          >
            <span class="ml-2">{item.label}</span>
          </Checkbox>
        ))}
      </div>

      {/* Indeterminate state */}
      <Checkbox indeterminate>
        <span class="ml-2">Select all (partial)</span>
      </Checkbox>
    </div>
  )
}
```

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

### Import and Use Progress Component in SolidJS

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/progress.mdx

Demonstrates how to import and use the Solid UI Progress component in a SolidJS application. It shows the necessary imports and a basic usage example.

```tsx
import { Progress, ProgressValue, ProgressValueLabel } from "~/components/ui/progress"

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

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

### Basic Resizable Panel Usage - TypeScript

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/resizable.mdx

Demonstrates the basic usage of the Resizable component to create a horizontally resizable layout with two panels. This example shows how to structure the components for a common resizable UI pattern.

```tsx
<Resizable orientation="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</Resizable>

```

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

### Import and Use Alert Component in SolidJS

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/alert.mdx

Demonstrates how to import and use the Alert component, including its sub-components AlertTitle and AlertDescription, in a SolidJS application. This example shows a basic alert with a title and description.

```tsx
import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert"

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

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

### Timeline Component Usage Example

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/timeline.mdx

Demonstrates how to import and use the Timeline component in a React application. It takes an array of items, each with a title and description, and an active item index to highlight the current step.

```tsx
import { Timeline } from "~/components/ui/timeline"

<Timeline
  items={[
    {
      title: "Event #1",
      description: "This is the first event of the timeline."
    },
    {
      title: "Event #2",
      description: "This is the second event of the timeline."
    },
    {
      title: "Event #3",
      description: "This is the third event of the timeline."
    }
  ]}
  activeItem={1}
/>
```

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

### Basic Switch Component Usage in TSX

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/switch.mdx

Provides a basic example of how to render the Switch component in a TSX file. It includes the Switch, SwitchControl, and SwitchThumb elements.

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

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

### SolidJS Button Component Examples

Source: https://context7.com/stefan-karger/solid-ui/llms.txt

Demonstrates the usage of the SolidJS Button component, showcasing various variants (default, secondary, destructive, outline, ghost, link) and sizes (sm, default, lg, icon). It also illustrates how to handle disabled states and use the button polymorphically as a link.

```tsx
import { Button } from "~/components/ui/button"

function ButtonExamples() {
  return (
    <div class="flex gap-4">
      {/* Default variant */}
      <Button>Click me</Button>

      {/* Different variants */}
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link Style</Button>

      {/* Different sizes */}
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">
        <svg class="size-4">...</svg>
      </Button>

      {/* Disabled state */}
      <Button disabled>Disabled</Button>

      {/* As link (polymorphic) */}
      <Button as="a" href="/dashboard">
        Go to Dashboard
      </Button>
    </div>
  )
}
```

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

### Configure Tailwind CSS Styles for Solid UI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/manual.mdx

This snippet provides the necessary CSS to configure Tailwind CSS for Solid UI. It defines base styles, color themes for light and dark modes, and responsive container padding. Ensure this is added to your `app.css` file.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --info: 204 94% 94%;
    --info-foreground: 199 89% 48%;

    --success: 149 80% 90%;
    --success-foreground: 160 84% 39%;

    --warning: 48 96% 89%;
    --warning-foreground: 25 95% 53%;

    --error: 0 93% 94%;
    --error-foreground: 0 84% 60%;

    --ring: 240 5.9% 10%;

    --radius: 0.5rem;
  }

  .dark,
  [data-kb-theme="dark"] {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --info: 204 94% 94%;
    --info-foreground: 199 89% 48%;

    --success: 149 80% 90%;
    --success-foreground: 160 84% 39%;

    --warning: 48 96% 89%;
    --warning-foreground: 25 95% 53%;

    --error: 0 93% 94%;
    --error-foreground: 0 84% 60%;

    --ring: 240 4.9% 83.9%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}

@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
}

```

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

### Accordion Component Example in TypeScript (TSX)

Source: https://context7.com/stefan-karger/solid-ui/llms.txt

Illustrates the Accordion component, which allows for collapsible content sections. It includes Accordion, AccordionItem, AccordionTrigger, and AccordionContent. This example is written in TSX, suitable for React environments.

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

function AccordionExample() {
  return (
    <Accordion multiple={false} collapsible class="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern and supports keyboard navigation.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles using Tailwind CSS that you can customize.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It's animated by default with smooth expand/collapse transitions.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

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

### Render Badge Component in TypeScript/TSX

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/badge.mdx

Shows a basic example of how to render the Badge component with a 'outline' variant in a SolidJS application.

```tsx
<Badge variant="outline">Badge</Badge>

```

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

### Render Card Component in SolidJS

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/card.mdx

Provides a complete example of how to render the Solid UI Card component with its header, content, and footer. This showcases the basic structure and usage of the card.

```tsx
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>
```

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

### Configure Vite for Path Aliasing (TypeScript)

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/manual.mdx

Sets up Vite's configuration to resolve module paths using aliases. It imports the 'path' module and configures the 'resolve.alias' option to map '~' to the './src' directory, enabling cleaner imports.

```typescript
import path from "path"

import solid from "@vitejs/plugin-solid"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [solid()],
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./src")
    }
  }
})
```

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

### Dropdown Menu Usage Example - Solid UI (TypeScript/TSX)

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/dropdown-menu.mdx

Demonstrates how to import and use the Dropdown Menu component in a Solid UI application. It includes the necessary imports and a basic JSX structure for the menu.

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

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

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

### Initialize Solid UI CLI

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/tauri.mdx

Runs the `solidui-cli` initialization command to set up the Solid UI framework within the project. This command prompts the user for configuration details.

```bash
npx solidui-cli@latest init

```

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

### Basic Navigation Menu Structure

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/navigation-menu.mdx

Provides a basic structure for a Navigation Menu component in Solid UI. This example demonstrates how to create a menu item with a trigger and content.

```tsx
<NavigationMenu>
  <NavigationMenuItem>
    <NavigationMenuTrigger>
      Item one
      <NavigationMenuIcon />
    </NavigationMenuTrigger>
    <NavigationMenuContent>
      <NavigationMenuLink>Link</NavigationMenuLink>
    </NavigationMenuContent>
  </NavigationMenuItem>
</NavigationMenu>
```

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

### Define Payment Data Structure

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/data-table.mdx

Defines the TypeScript type for payment data, including properties like id, amount, status, and email. It also provides an example array of payment objects.

```typescript
type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

export const payments: Payment[] = [
  {
    id: "728ed52f",
    amount: 100,
    status: "pending",
    email: "m@example.com"
  },
  {
    id: "489e1d42",
    amount: 125,
    status: "processing",
    email: "example@gmail.com"
  }
  // ...
]
```

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

### Import Context Menu Components

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/context-menu.mdx

Imports the required components for the Context Menu from the Solid UI library. This setup is necessary before using the component in your JSX.

```tsx
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuTrigger
} from "~/components/ui/context-menu"
```

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

### Use Label Component in TypeScript/JSX

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/label.mdx

Shows a basic example of how to use the Label component in a Solid.js application. The component is rendered with an associated 'for' attribute to link it with a control.

```tsx
<Label for="email">Your email address</Label>

```

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

### Add TanStack Table Dependency

Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/components/data-table.mdx

Adds the necessary @tanstack/solid-table library as a project dependency using npm. This library provides the core data table logic.

```bash
npm install @tanstack/solid-table
```

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

### Dialog Component Example in SolidJS

Source: https://context7.com/stefan-karger/solid-ui/llms.txt

Demonstrates the usage of the Dialog component for creating modal dialogs that require user interaction. It includes triggers, content, headers, footers, and input fields for user data. This component is built using SolidJS and relies on other UI primitives like Button and TextField.

```tsx
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter
} from "~/components/ui/dialog"
import { Button } from "~/components/ui/button"
import { TextField, TextFieldInput, TextFieldLabel } from "~/components/ui/text-field"
import { createSignal } from "solid-js"

function DialogExample() {
  const [open, setOpen] = createSignal(false)

  return (
    <Dialog open={open()} onOpenChange={setOpen}>
      <DialogTrigger as={Button}>Edit Profile</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you're done.
          </DialogDescription>
        </DialogHeader>
        <div class="grid gap-4 py-4">
          <TextField class="grid grid-cols-4 items-center gap-4">
            <TextFieldLabel class="text-right">Name</TextFieldLabel>
            <TextFieldInput class="col-span-3" value="John Doe" />
          </TextField>
          <TextField class="grid grid-cols-4 items-center gap-4">
            <TextFieldLabel class="text-right">Username</TextFieldLabel>
            <TextFieldInput class="col-span-3" value="@johndoe" />
          </TextField>
        </div>
        <DialogFooter>
          <Button type="submit" onClick={() => setOpen(false)}>
            Save changes
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
```
Tokens:
Raw