Installation
Learn how to install siddcn and add components to your project.
Installation
Learn how to install siddcn and add components to your project.
Global Installation
Install siddcn globally to use the interactive CLI browser:
npm install -g siddcnAfter installation, run siddcn to launch the interactive component browser.
Project Installation
To use siddcn components in your project:
npm install siddcn ink reactyarn add siddcn ink reactpnpm add siddcn ink reactAdding Individual Components
You can add individual components using the CLI:
# Add a button component
npx siddcn add button-simple
# Add a progress bar
npx siddcn add progress-linear
# Add a file tree
npx siddcn add tree-filePeer Dependencies
Siddcn requires the following peer dependencies:
| Package | Version |
|---|---|
react | >= 18.0.0 |
ink | >= 4.0.0 |
TypeScript Support
Siddcn is written in TypeScript and includes type definitions out of the box. No additional configuration is required.
// Types are automatically included
import { SimpleButton, LinearProgress, FileTree } from 'siddcn';
// All props are fully typed
<SimpleButton label="Click me" />
<LinearProgress value={50} max={100} />
<FileTree data={treeData} />Project Structure
A typical project using siddcn looks like this:
my-tui-app/
├── src/
│ ├── index.tsx # Entry point
│ ├── App.tsx # Main component
│ └── components/ # Your custom components
├── package.json
└── tsconfig.json