Tabs

Organize content into switchable sections with ASCII-styled tab headers.

Docs•API Reference

Basic Tabs:

Welcome to React ASCII UI

A collection of retro-styled React components that bring the aesthetic of classic terminal interfaces to modern web applications.

Perfect for developers who want to create nostalgic, hacker-style interfaces or command-line inspired web apps.

Code Examples (with disabled tab):

import React, { useState } from 'react';
import { AsciiButton, AsciiInput } from 'react-ascii-ui';

interface AppProps {
  defaultName?: string;
}

const App: React.FC<AppProps> = ({ defaultName = '' }) => {
  const [name, setName] = useState<string>(defaultName);

  const handleClick = (): void => {
    alert(`Hello, ${name}!`);
  };

  return (
    <div>
      <AsciiInput 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name" 
      />
      <AsciiButton onClick={handleClick}>
        Say Hello
      </AsciiButton>
    </div>
  );
};

Installation

npm install react-ascii-ui

Usage

import { AsciiTabs } from 'react-ascii-ui';

const tabs = [
  {
    label: "Tab 1",
    content: <div>Content for first tab</div>
  },
  {
    label: "Tab 2", 
    content: <div>Content for second tab</div>
  }
];

export default function Example() {
  return <AsciiTabs tabs={tabs} />;
}

Examples

Basic Tabs

Welcome to the home page!
const tabs = [
  { label: "Home", content: "Welcome to the home page!" },
  { label: "About", content: "Learn more about our project." },
  { label: "Contact", content: "Get in touch with us." }
];

<AsciiTabs tabs={tabs} />

Default Active Tab

This tab starts active!
<AsciiTabs 
  tabs={tabs} 
  defaultTab={1}  // Second tab starts active
/>

Disabled Tabs

This tab is available
const tabs = [
  { label: "Available", content: "This tab is available" },
  { label: "Disabled", content: "Hidden content", disabled: true },
  { label: "Active", content: "This tab is clickable" }
];

<AsciiTabs tabs={tabs} />

Rich Content

System Status

CPU Usage: 45%
Memory: 2.3GB
const tabs = [
  {
    label: "Dashboard",
    content: (
      <div>
        <h4>System Status</h4>
        <div>CPU Usage: 45%</div>
        <div>Memory: 2.3GB</div>
      </div>
    )
  },
  {
    label: "Alerts",
    content: (
      <AsciiAlert variant="warning" title="System Alert">
        Disk space is running low
      </AsciiAlert>
    )
  }
];

API Reference

Props

PropTypeDefaultDescription
tabsAsciiTab[]-Array of tab objects to display
defaultTabnumber0Index of tab that should be active initially
onTabChange(index: number) => void-Callback fired when active tab changes
classNamestring""Additional CSS classes

AsciiTab

PropertyTypeRequiredDescription
labelstringYesText displayed on the tab header
contentReact.ReactNodeYesContent to show when tab is active
disabledbooleanNoWhether the tab is disabled and unclickable

AsciiTabs extends all HTML div attributes and React.HTMLAttributes.