Card

A container component with ASCII borders for organizing and grouping related content.

Installation

npm install react-ascii-ui

Usage

import { AsciiCard, AsciiButton } from 'react-ascii-ui';

export default function Example() {
  return (
    <AsciiCard title="User Profile">
      <p>Welcome back, User!</p>
      <AsciiButton>Edit Profile</AsciiButton>
    </AsciiCard>
  );
}

Examples

<AsciiCard>
  <p>This is a basic card without a title.</p>
</AsciiCard>

<AsciiCard title="[ SYSTEM STATUS ]">
  <p>All systems operational.</p>
</AsciiCard>

<AsciiCard title="Login">
  <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
    <AsciiInput placeholder="Username" />
    <AsciiInput type="password" placeholder="Password" />
    <AsciiButton>Sign In</AsciiButton>
  </div>
</AsciiCard>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }}>
  <AsciiCard title="CPU">
    <div style={{ color: '#00ff00', fontSize: '24px' }}>45%</div>
    <div style={{ color: '#ccc', fontSize: '12px' }}>Usage</div>
  </AsciiCard>
  <AsciiCard title="RAM">
    <div style={{ color: '#ffaa00', fontSize: '24px' }}>78%</div>
    <div style={{ color: '#ccc', fontSize: '12px' }}>Usage</div>
  </AsciiCard>
  <AsciiCard title="DISK">
    <div style={{ color: '#ff4444', fontSize: '24px' }}>92%</div>
    <div style={{ color: '#ccc', fontSize: '12px' }}>Usage</div>
  </AsciiCard>
</div>

API Reference

Props

AsciiCard extends all HTML div attributes and React.HTMLAttributes<HTMLDivElement>.