Charts, inputs, overlays, layout and AI-chat components for @visulima/tui. Every component is rendered by the @visulima/tui runtime — its React reconciler, yoga layout and native Rust diff engine — so this package holds components only.

Two ways to use it

Pick whichever fits. The source is identical; only the delivery differs.

1. Install it

You get versioned components and upgrades for free. Each component is its own subpath export, so you only pay for what you import.

npm install @visulima/tui @visulima/tui-kit

pnpm add @visulima/tui @visulima/tui-kit

import { render } from "@visulima/tui";
import Box from "@visulima/tui/components/box";
import Gauge from "@visulima/tui-kit/gauge";

render(
    <Box>
        <Gauge label="CPU" value={72} />
    </Box>,
);

2. Copy it in

You own the code and can change anything. The component is copied into your repo; @visulima/tui stays an installed dependency because the renderer can't be copy-pasted.

npx shadcn@latest add https://visulima.com/r/gauge.json

Components that build on others (area-chart uses line-chart and chart-utils) declare those as registry dependencies, so the CLI fetches them too.

Note: copied files use the automatic JSX runtime and do not import React. Your tsconfig.json needs "jsx": "react-jsx", otherwise you'll hit ReferenceError: React is not defined.

What lives where

@visulima/tui owns the runtime and the primitives every component builds on — Box, Text, Canvas, Cursor, Newline, Spacer, Static, StaticRender, Transform — plus the hooks (@visulima/tui/hooks/*). Import those from there:

import Box from "@visulima/tui/components/box";
import Text from "@visulima/tui/components/text";
import useInput from "@visulima/tui/hooks/use-input";

Everything above that layer lives here: charts (gauge, area-chart, bar-chart, line-chart, sparkline, heatmap, histogram, scatter-plot), inputs (text-input, textarea, select-input, multi-select, slider, date-picker, calendar, masked-input, search-input), overlays (dialog, toast, tooltip, command-palette), layout (card, table, tabs, tree-view, scroll-view), and AI-chat widgets (message-bubble, streaming-text, approval-prompt, operation-tree).

Heavy features are optional

Some components need a peer that is not installed by default, so unused features cost nothing. Install the peer only if you use the component:

| Component | Peer | | ------------------ | ---------------------------------- | | code, markdown | shiki, @shikijs/langs/themes | | markdown | marked | | diff-view | diff | | big-text | cfonts | | table | @visulima/tabular |

Contributing

If you would like to help take a look at the list of issues and check our Contributing guidelines.

Note: please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Credits

• Daniel Bannert
• All Contributors

Made with ❤️ at Anolilab

This is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Anolilab is a Development and AI Studio. Contact us at [email protected] if you need any help with these technologies or just want to say hi!

License

The visulima tui-kit is open-sourced software licensed under the MIT