TUIMORPHIC

Terminal-aesthetic React components built on Base UI

v0.2.0

ACCORDION

Docs →

Tuimorphic is a terminal-aesthetic React component library built on Base UI with SRCL styling.

ACTION BAR

Docs →

ACTION BUTTONS

Docs →

BADGES

Docs →
DefaultOnlinePendingOfflineInfo

BAR LOADER

Docs →
Determinate:
Indeterminate:

BUTTONS

Docs →
Primary:
Secondary:
Disabled:

CARDS

Docs →

CENTER TITLE

Default card with centered title.

LEFT TITLE

Card with left-aligned title.

RIGHT TITLE

Card with right-aligned title.

CARD DOUBLE

Docs →

SYSTEM STATUS

CPU

Usage: 45%

Temp: 62°C

MEMORY

Used: 640KB

Free: 384KB

CHECKBOX

Docs →

INLINE CODE

Docs →

Use npm install tuimorphic to install the package. Press Ctrl+C to copy.

default code

subtle code

accent code

CODE BLOCK

Docs →
import { Button } from 'tuimorphic';

function App() {
  return (
    <Button variant="primary">
      Click Me
    </Button>
  );
}

DATA TABLE

Docs →
FILENAMESIZETYPE
CONFIG.SYS256System
AUTOEXEC.BAT512Batch
COMMAND.COM54,619Executable

DATE PICKER

Docs →
2026 JANUARY
Su
Mo
Tu
We
Th
Fr
Sa

Selected: None

DRAWER

Docs →

GRID

Docs →

ITEM 1

Grid cell 1

ITEM 2

Grid cell 2

ITEM 3

Grid cell 3

WIDE ITEM

Spans 2 columns

ITEM 5

Grid cell 5

HEADINGS

Docs →

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Double Border

Single Border

Arrow Style

INPUT

Docs →
Enter username
Enter password

LABELS

Docs →

MESSAGES

Docs →
USER
Hello, how do I format a floppy disk?
10:42:15
SYSTEM
Use the FORMAT command. Example: FORMAT A:
10:42:18
USER
Thanks! What about quick format?
10:42:25
SYSTEM
Add the /Q flag: FORMAT A: /Q
10:42:28

POPOVER

Docs →

PROGRESS

Docs →
Download:
45%
Upload:
75%
Custom:
60%

RADIO BUTTONS

Docs →

SELECT

Docs →
OPERATING SYSTEM

SLIDER

Docs →
VOLUME
50

TEXT

Docs →

Default body text for general content.

Secondary text for supporting information.

Muted text for less important details.

Caption text for annotations.

Extra small text (xs)

Small text (sm)

Medium text (md)

Large text (lg)

Extra large text (xl)

TOGGLE

Docs →

TREEVIEW

Docs →
C:
DOS
COMMAND.COM
EDIT.COM
CONFIG.SYS
AUTOEXEC.BAT