solid-ui

solid-ui is not a component library that you install as an npm dependency. Instead, it is a collection of re-usable components designed to be copied and pasted directly into your own SolidJS applications.

To use solid-ui:

1. Browse the available components.
2. Pick the components you need.
3. Copy and paste the source code into your project.
4. Customize the code to fit your specific requirements.

This approach allows you to own the code and maintain full control over its implementation, similar to the patterns used by shadcn/ui and tremor-raw.

The Sidebar component is a composite system designed for flexibility and state management. It is composed of the following parts:

• SidebarProvider: Manages the collapsible state of the sidebar.
• Sidebar: The main container for the sidebar UI.
• SidebarHeader: A sticky component for the top of the sidebar.
• SidebarFooter: A sticky component for the bottom of the sidebar.
• SidebarContent: The scrollable area for sidebar items.
• SidebarGroup: A logical section within SidebarContent.
• SidebarTrigger: A component used to toggle the sidebar's collapsible state.

For optimal organization with solid-ui, follow this directory structure:

• src/components/ui/: Contains the generated UI components (e.g., button.tsx, input.tsx).
• src/components/: Contains your application-specific components (e.g., main-nav.tsx).
• src/lib/: Contains utility functions, specifically utils.ts which should define the cn helper.
• src/app.css: Your global styles.
• src/app.tsx: Your application entry point.

You can install the Dialog component using the solidui-cli or by manual installation.

Using the CLI

Run the following command to add the component to your project:

npx solidui-cli@latest add dialog

Manual Installation

1. Install the required dependency:

npm install @kobalte/core

2. Copy the component source code directly into your project files.

You can install the Breadcrumb component using the solidui-cli or by manually copying the source code into your project.

Using CLI:

npx solidui-cli@latest add breadcrumb

Use the add command to install specific components and their required dependencies into your project.

When running the command without a specific component name, you will be presented with an interactive list of available components. You can use the arrow keys to navigate, A to toggle all components, and Enter to submit your selection.

npx solidui-cli@latest add [component]

You can install the navigation-menu component using the solidui-cli or by manual installation.

Using the CLI

Run the following command to add the component to your project:

npx solidui-cli@latest add navigation-menu

Manual Installation

1. Install the required dependency:

npm install @kobalte/core

2. Copy the component source code into your project files.