Documentationstable

Installation Section

A pre-styled section component that displays CLI installation commands with bash syntax highlighting and copy button functionality.

Installation

Install the component directly into your project using the Pittaya CLI.

npm install @mylib/ui button

Install the component directly into your project using the Pittaya CLI.

npx pittaya@latest add installation-section

Use the Installation Section when you need to display package installation commands in your documentation, landing pages, or component libraries.

This component is perfect for design systems, UI libraries, and any project that offers CLI-based installation.

Place the installation section early in your documentation for easy discoverability.
Use clear component slugs that match your CLI package naming conventions.
Customize the title and description to match your brand voice and documentation style.
Consider adding additional installation methods (npm, yarn, pnpm) if your CLI supports them.

The component includes proper semantic HTML with heading hierarchy and descriptive text for screen readers.

The copy button provides visual feedback through icons and toast notifications, ensuring all users can successfully copy the installation command.

Combine variants and sizes to meet your needs.

Simple usage with just the component slug. Uses all default values.

Install the component directly into your project using the Pittaya CLI.

npm install @mylib/ui button

Customize the title and description to match your needs.

Add the Avatar component to your project with a single command.

npm install @mylib/ui avatar

Use a different CLI command or package manager.

Install using npm directly from our package registry.

npm install @mylib/ui dialog

TSX interface that combines variants and default attributes.

Prop	Type	Default	Description
`componentSlug`Required	`string`	—	The slug of the component to install. This will be appended to the CLI command.
`title`	`string`	`'Installation'`	The heading text for the installation section.
`description`	`string`	`'Install the component directly into your project using the Pittaya CLI.'`	The descriptive text explaining how to use the command.
`availableCommands`Required	`object`	—	The available commands to install the component.
`className`	`string`	`'mt-8 space-y-4'`	Additional CSS classes to customize the section styling.