### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 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 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 File New Tab ⌘T New Window Share Print ``` -------------------------------- ### 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() const frameworks = [ { value: "solid", label: "SolidJS" }, { value: "react", label: "React" }, { value: "vue", label: "Vue" }, { value: "svelte", label: "Svelte" } ] return ( ) } ``` -------------------------------- ### 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 Is it accessible? Yes. It adheres to the WAI-ARIA design pattern. ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 └── ... ``` -------------------------------- ### 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 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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: ~/* ``` -------------------------------- ### 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 ( Create project Deploy your new project in one-click.
) } ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 (
) } ``` -------------------------------- ### 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 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 Open My Account Profile Billing Team Subscription ``` -------------------------------- ### 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" --- Astro ``` -------------------------------- ### 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" ``` -------------------------------- ### 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" ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 Open Are you sure absolutely sure? This action cannot be undone. This will permanently delete your account and remove your data from our servers. ``` -------------------------------- ### 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 ``` -------------------------------- ### 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" } // ... ] ``` -------------------------------- ### 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 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 ``` -------------------------------- ### Configure ui.config.json Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/installation/tauri.mdx Illustrates the interactive prompts encountered during the `solidui-cli` initialization, covering TypeScript usage, global CSS file location, Tailwind configuration path, and source directory alias. ```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.js Configure the import alias for the src directory: ~/* ``` -------------------------------- ### 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 (
) } ``` -------------------------------- ### 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 ``` -------------------------------- ### Add Components to Solid UI Project with CLI Source: https://github.com/stefan-karger/solid-ui/blob/main/apps/docs/src/routes/(app)/docs/cli.mdx The `add` command allows you to easily integrate pre-built components into your Solid UI project. After running the command, you will be prompted to select from a list of available components to add. ```bash npx solidui-cli@latest add [component] ``` -------------------------------- ### 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 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 ``` -------------------------------- ### 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 ( ( <>