Getting Started [proxy]

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.

Scaffold a new project:

Here's a simple menu with keyboard navigation:

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>
);

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