Getting Started

A batteries-included framework for building interactive terminal user interfaces with React and Ink

giggles is a batteries-included framework for building terminal user interfaces (TUIs) with React and Ink. It handles focus management, input routing, screen navigation, and theming out of the box — along with a component library covering most TUI use cases and terminal utilities for things like handing off control to external programs. Everything is declarative and composable, so you can build polished CLI apps without wiring up the low-level details yourself.

Installation

Scaffold a new project:

npx create-giggles-app

pnpm create giggles-app

yarn create giggles-app

Your First TUI

Here's a simple menu with keyboard navigation:

app.tsx

import { useState } from 'react';
import { Box, Text, render } from 'ink';
import { GigglesProvider } from 'giggles';
import { Select } from 'giggles/ui';

const menuItems = [
  { label: 'New Game', value: 'new' },
  { label: 'Continue', value: 'continue' },
  { label: 'Settings', value: 'settings' },
  { label: 'Quit', value: 'quit' },
];

function App() {
  const [choice, setChoice] = useState('new');

  return (
    <Box flexDirection="column" gap={1}>
      <Text bold>My App</Text>
      <Select options={menuItems} value={choice} onChange={setChoice} />
      <Text dimColor>Selected: {choice}</Text>
    </Box>
  );
}

render(
  <GigglesProvider>
    <App />
  </GigglesProvider>
);

Terminal

What's happening

GigglesProvider wraps your app and provides focus + input context
Select handles focus, keyboard navigation, and rendering for you
Use j/k or arrow keys to navigate, Enter to confirm

Getting Started

Installation

Your First TUI

On this page