Component Showcase

Features

• ▸Corner brackets and terminal aesthetic
• ▸Drag-and-drop column reordering
• ▸Sortable columns with visual indicators
• ▸Custom cell rendering with TypeScript support
• ▸Optional pagination with page controls
• ▸Row numbers and column alignment
• ▸Hover effects and responsive design
• ▸Optional hex display header

Text Inputs

TextArea

States

Features

• ▸Corner brackets and terminal aesthetic
• ▸Multiple input types (text, email, password, tel, url, number)
• ▸Character limit with live counter
• ▸Required field indicators
• ▸Disabled and hover states
• ▸TextArea with configurable rows and optional resizing
• ▸Focus states with border color changes

Single Date Selection

Selected: Tuesday, December 9, 2025

Date & Time Selection

Selected: Tuesday, December 9, 2025 at 02:43 AM

Date Range Selection

Features

• ▸Corner brackets and terminal aesthetic
• ▸Optional time selection (hh:mm with AM/PM)
• ▸Min/max date constraints
• ▸Today indicator and selected state
• ▸24-hour or 12-hour time format
• ▸Month/year navigation

Variants

Sizes

Use Cases

Features

• ▸Terminal aesthetic with monospace font
• ▸Multiple variants (default, success, warning, error, info, gray)
• ▸Three sizes (sm, md, lg)
• ▸Rounded pill shape with borders
• ▸Optional click handler for interactive tags
• ▸Hover effects on interactive tags
• ▸Consistent with showcase design system

Basic Examples

Sizes

Interactive Examples

Options

Use Cases

Features

• ▸ASCII-style terminal aesthetic with [========] format
• ▸Grey color scheme matching terminal aesthetic
• ▸Three sizes (sm, md, lg) for different text sizes
• ▸Smooth animated transitions with easing
• ▸Optional label and percentage display
• ▸20-character bar width for consistent display
• ▸Value clamping (0-100) for safety
• ▸Monospace font for authentic terminal look

Progressive Skeleton Screen Demo

See the ProgressBar component in action with a full progressive skeleton screen demonstration

Basic Examples

Sizes

Auto Start

Buttons that automatically start loading when mounted

Without Progress Bar

Button with skeleton loading but no visible progress bar

States

Use Cases

Features

• ▸Integrated ProgressBar component showing loading progress
• ▸Terminal aesthetic matching the design system
• ▸Three sizes (sm, md, lg)
• ▸Configurable duration for progress animation
• ▸Optional auto-start for automatic loading
• ▸Progress complete callback support
• ▸Optional progress bar visibility
• ▸Skeleton overlay during loading state
• ▸Disabled state support

Basic Examples

Sizes

Variants

States

Use Cases

Features

• ▸Smooth left-to-right background transition on hover
• ▸Text remains unaffected by background animation
• ▸Terminal aesthetic matching the design system
• ▸Three sizes (sm, md, lg)
• ▸Three variants (default, primary, secondary)
• ▸Disabled state support
• ▸500ms smooth transition duration

Tabs with Help Button

Tabs without Help Button

Tabs with Tooltips Only

Features

• ▸Tab navigation with active state indicators
• ▸Tooltips on tabs - hover to see descriptions
• ▸Optional help button with tooltip (hover) and popover (click)
• ▸Disabled tab support
• ▸Click outside to close popover
• ▸Terminal/code aesthetic styling
• ▸Monospace typography
• ▸Smooth transitions and hover effects
• ▸Tab change callback support

Basic Examples

Separator Styles

Sizes

Use Cases

Features

• ▸Terminal aesthetic with monospace font
• ▸Support for Next.js Link components
• ▸Optional click handlers for interactive items
• ▸Four separator styles (slash, arrow, chevron, pipe)
• ▸Three sizes (sm, md, lg)
• ▸Last item highlighted (current page indicator)
• ▸Hover effects on clickable items
• ▸Accessible with proper ARIA labels
• ▸Responsive and wraps on smaller screens

Basic Example

import CodeSnippet from "./components/CodeSnippet";

<CodeSnippet
  code="const greeting = 'Hello, World!';"
  language="typescript"
/>

With Hex Display

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

const total = calculateTotal([
  { price: 10 },
  { price: 20 },
  { price: 30 }
]);

console.log(total); // 60

Without Copy Button

export default function MyComponent() {
  return (
    <div className="container">
      <h1>Hello World</h1>
    </div>
  );
}

Without Language Label

# Configuration File
server.port=8080
server.host=localhost
database.url=jdbc:postgresql://localhost:5432/mydb
database.username=admin
database.password=secret

Long Code Example

interface User {
  id: number;
  username: string;
  email: string;
  role: "admin" | "user" | "guest";
  createdAt: Date;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.statusText}`);
  }
  return response.json();
}

const user = await fetchUser(123);
console.log(`User: ${user.username} (${user.email})`);

Use Cases

curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -d '{"name": "John", "email": "john@example.com"}'

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  }
}

SELECT u.id, u.username, u.email, COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.created_at > '2024-01-01'
GROUP BY u.id, u.username, u.email
ORDER BY order_count DESC
LIMIT 10;

Features

• ▸Terminal aesthetic with corner brackets
• ▸Optional language label in header
• ▸Copy to clipboard functionality
• ▸Visual feedback when code is copied
• ▸Optional hex display header
• ▸Horizontal scroll for long lines
• ▸Monospace font for code readability
• ▸Consistent with showcase design system

IconButton Component

IconContentSwitcher Component