Installation

Choose the method that best suits you to install and use Tango UI.

1. Install via package manager

NPM

npm install tango-ui-cw

Yarn（future support）

yarn add tango-ui-cw

PNPM（future support）

pnpm add tango-ui-cw

2. Import style

Import the CSS file into your project's root component：

App.jsx / layout.tsx

// Import root component CSS (App.jsx / layout.tsx)
import 'tango-ui-cw/index.css';

3. Type Declaration（TypeScript user）

⚠️

Temporary solution: Create a type declaration file in the project root directory to enable TypeScript support.

tango-ui-cw.d.ts

// tango-ui-cw.d.ts (temporary type declaration)
declare module 'tango-ui-cw';

🌐 Use via UNPKG CDN

No installation required; simply include it in your HTML via CDN：

Import in HTML

index.html

<!-- Add in HTML file's <head> tag -->
<link rel="stylesheet" href="https://unpkg.com/tango-ui-cw@0.8.3/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/tango-ui-cw@0.8.3/dist/index.js" />
<link rel="stylesheet" href="https://unpkg.com/tango-ui-cw@0.8.3/dist/index.mjs" />

Dynamic import（recommended for modern frameworks）

component file

// Dynamic loading in JavaScript/TypeScript
import('https://unpkg.com/tango-ui-cw@0.8.3/dist/index.css');
import('https://unpkg.com/tango-ui-cw@0.8.3/dist/index.js');
import('https://unpkg.com/tango-ui-cw@0.8.3/dist/index.mjs');

💡

CDN advantages

• No build, fast development
• Get the latest version automatically
• Suitable for static websites or simple projects

✓

Bingo！

Tango UI is ready; start building beautiful interfaces!