Skip to main content

Installation

Prerequisites​

Before installing TX Design UI, make sure you have:

  • Node.js >= 14.0.0
  • React >= 16.8.0
  • React DOM >= 16.8.0

Installation​

Install TX Design UI using your preferred package manager:

npm install --save tx-design-ui

Peer Dependencies​

TX Design UI requires the following peer dependencies:

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0",
  "styled-components": ">=5.0.0"
}

If you don't have these installed, install them:

npm install react react-dom styled-components

Basic Usage​

After installation, you can import and use components:

import React from "react";
import { TxButton, TxInput, TxCheckbox } from "tx-design-ui";

function App() {
  return (
    <div>
      <TxButton label="Click me" onClick={() => alert("Clicked!")} />
      <TxInput placeholder="Enter text" />
      <TxCheckbox label="Accept terms" />
    </div>
  );
}

export default App;

Using with TypeScript​

TX Design UI is written in JavaScript but provides type definitions. To use with TypeScript:

import React, { useState } from "react";
import { TxButton, TxInput } from "tx-design-ui";

const App: React.FC = () => {
  const [value, setValue] = useState<string>("");

  return (
    <div>
      <TxInput value={value} onChange={e => setValue(e.target.value)} placeholder="Type something" />
      <TxButton label="Submit" onClick={() => console.log(value)} />
    </div>
  );
};

export default App;

Import Components​

You can import components in two ways:

import { TxButton, TxInput, TxCheckbox } from "tx-design-ui";

Individual Imports​

import TxButton from "tx-design-ui/lib/components/tx-button";
import TxInput from "tx-design-ui/lib/components/tx-input";

Using Theme Colors​

TX Design UI provides a centralized color system:

import { colors, theme } from "tx-design-ui";

// Use individual colors
const primaryColor = colors.primary; // "#03030f"
const dangerColor = colors.danger; // "#e45649"

// Use theme object
const buttonBg = theme.button.primary.bg;

See the Theme Colors documentation for more information.

Next Steps​

Troubleshooting​

styled-components not found​

If you see an error about styled-components, make sure it's installed:

npm install styled-components

Module not found​

If you get module not found errors, try:

  1. Clear your node_modules and package-lock.json
  2. Reinstall dependencies
rm -rf node_modules package-lock.json
npm install

Version Conflicts​

Make sure all peer dependencies meet the minimum version requirements.

License​

MIT © Tuanxu5