v1.0.10 · 17+ Components · TypeScript

TangoUI

Craft interfaces that move.

A modern React component library with SX styling, theme engine, i18n, and beautiful dark-mode-first design.

npm install tango-ui-cw

Scroll

Components

Explore the Collection

Components Collection

Scroll → to exploreDrag horizontally

ButtonVersatile button with SX system, icons, and loading states

SpaceLayout containers for spacing and flexbox

LayoutPage structures with sidebar and content area

InputSmart text input with validation and theme tokens

SearchSearch input with suggestion support

ModalAccessible dialog with slot-based styling

DrawerSlide-out panels with i18n support

TableData tables with sorting and custom rendering

BannerContextual alert banners with 4 severity levels

010

NoticeToast notifications with auto-dismiss

011

TooltipSmart tooltips with placement control

012

UploadFile management with list display

013

MarkHighlight and emphasize text segments

014

LineDividers and visual separators

015

DateFormatted date display component

016

ColorPickerColor selection with visual palette

017

DatePickerDate selection with theme integration

17 ComponentsEnd

Live Preview

See It in Action

Real components, real interactions

Button

Input

Banner

System update

Changes saved

Storage full

Line

Section A

Section B

Section C

Features

Why Tango UI?

A modern React component library with a powerful styling system, theme engine, and internationalization built in.

✦

SX System

String, object, or slot-based styling — powered by Tailwind with tailwind-merge conflict resolution.

◈

Theme Engine

CSS variables + runtime token override. Light/dark with one click. All components respond instantly.

⬡

i18n Ready

Built-in internationalization via TangoI18nProvider. Switch languages with a single toggle.

△

TypeScript First

Full type safety with auto-inferred props, sx slot hints, and exported component types.

◎

17+ Components

Button, Input, Modal, Drawer, Banner, Table, Tooltip, DatePicker, Search, and more.

⎔

Fully Customizable

Override anything via sx, className, or CSS variables. Default themes look great out of the box.

Ready to Build?

Start crafting beautiful interfaces with TangoUI today.

Tango UIv1.0.10

Documentation GitHub npm

Built with TangoUI + Next.js