Components

Explore the full library of Siddcn terminal UI components. We have 17 component categories with 50+ individual components.

Input Components

Buttons

Interactive button components with 6 variants.

import { SimpleButton, PrimaryButton, GlowButton } from 'siddcn';

<SimpleButton label="Click me" />
<PrimaryButton label="Submit" />
<GlowButton label="Glow Effect" />

Text Input

Text input fields for forms and user input.

import { BasicInput, PasswordInput, SearchInput } from 'siddcn';

<BasicInput label="Name" placeholder="Enter name..." />
<PasswordInput label="Password" />
<SearchInput placeholder="Search..." />

Select

Selection input components with multiple styles.

import { BasicSelect } from 'siddcn';

<BasicSelect
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
  ]}
  onChange={(v) => setSelected(v)}
/>

MultiSelect

Multiple item selection with configurable limits.

import { MultiSelect } from 'siddcn';

<MultiSelect 
  items={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
  ]}
  maxSelect={2}
/>

Display Components

Cards

Container components with 6 variants: Basic, Info, Warning, Success, Error, Glow.

import { BasicCard, SuccessCard, GlowCard } from 'siddcn';

<BasicCard title="Card Title">
  Content here
</BasicCard>
<SuccessCard title="Success!">
  Operation completed
</SuccessCard>

Trees

File trees and data hierarchies with vim navigation.

import { FileTree } from 'siddcn';

<FileTree data={{
  name: 'project',
  type: 'dir',
  children: [
    { name: 'src', type: 'dir', children: [] },
    { name: 'package.json', type: 'file' }
  ]
}} />

Tabs

Tabbed navigation with modern, rounded, and pill styles.

import { Tabs } from 'siddcn';

<Tabs 
  tabs={[
    { id: 'tab1', label: 'Tab 1', content: <Content1 /> },
    { id: 'tab2', label: 'Tab 2', content: <Content2 /> },
  ]}
  style="modern"
/>

Table

Scrollable data grids with row selection.

import { Table } from 'siddcn';

<Table
  columns={[
    { key: 'name', header: 'Name', width: 20 },
    { key: 'status', header: 'Status', width: 10 }
  ]}
  data={data}
/>

Feedback Components

Progress

Linear, circular, and step progress indicators.

import { LinearProgress, CircularProgress, StepProgress } from 'siddcn';

<LinearProgress value={75} max={100} />
<CircularProgress percentage={60} />
<StepProgress currentStep={2} totalSteps={5} />

Spinners

5 loading spinner variants: Dots, Bouncing, Pulse, Bar, Wave.

import { DotsSpinner, BarSpinner, WaveSpinner } from 'siddcn';

<DotsSpinner text="Loading..." />
<BarSpinner width={20} />
<WaveSpinner />

Badges

Status badges, count badges, and dot indicators.

import { StatusBadge, CountBadge, DotBadge } from 'siddcn';

<StatusBadge status="success" />
<CountBadge count={42} />
<DotBadge color="green" />

Notifications

Toasts, banners, and progress notifications.

import { Toast, Banner, ProgressNotification } from 'siddcn';

<Toast type="success" message="Operation completed!" />
<Banner type="warning" message="System maintenance" />
<ProgressNotification message="Uploading..." progress={45} />

Data Visualization

Charts

Bar and line charts for data visualization.

import { BarChart, LineChart } from 'siddcn';

<BarChart data={data} />
<LineChart data={data} />

Dashboards

6 pre-built dashboard layouts: Htop, Network, Server, Vertical, Horizontal, Paged.

import { HtopDashboard, NetworkDashboard, ServerDashboard } from 'siddcn';

<HtopDashboard width={80} cpuCores={4} />
<NetworkDashboard width={70} />
<ServerDashboard width={75} />

Effects & Animation

Animated Text

Typewriter, gradient, pulsing, and loading dot animations.

import { TypewriterText, LoadingDots } from 'siddcn';

<TypewriterText text="Hello, World!" speed={50} />
<Text>Loading<LoadingDots /></Text>

Backgrounds

Twinkling stars, matrix rain, and animated starfields.

import { TwinklingStars, MatrixRain, AnimatedStars } from 'siddcn';

<TwinklingStars width={60} density={0.15} />
<MatrixRain width={60} height={5} />

Components

On this page