AniUI

JavaScript

How to use AniUI components in JavaScript projects.

We recommend TypeScript. TypeScript gives you type-safe props, variant inference via cva + VariantProps, and better autocomplete in your editor. AniUI components are authored and maintained in TypeScript.

Using JavaScript#

For teams that prefer JavaScript, AniUI supports it via the CLI. During npx @aniui/cli init, select "No" when asked "Would you like to use TypeScript?"

$ npx @aniui/cli init

✔ Detected Expo project
✔ Where should components be installed? components/ui
✔ Where should the utility file go? lib/utils.js
✔ Choose a theme preset: Default (neutral)
✔ Would you like to use TypeScript? No

ℹ Components will be generated as .jsx files with types stripped automatically.

How It Works#

AniUI maintains one source of truth — TypeScript (.tsx) files. When tsx: false is set in your config, running npx @aniui/cli add button automatically strips type annotations, interfaces, and generics — outputting clean .jsx files. The component logic and styling remain identical.

Configuration#

The init command creates a .aniui.json file in your project root:

.aniui.json
{
  "componentsDir": "components/ui",
  "utilPath": "lib/utils.js",
  "theme": "default",
  "tsx": false
}

You can also manually edit this file to switch between TypeScript and JavaScript at any time.

Path Aliases#

For path alias support in JavaScript projects, add a jsconfig.json to your project root:

jsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Switching to TypeScript#

To switch from JavaScript to TypeScript later:

  1. Change "tsx": true in .aniui.json
  2. Delete the existing .jsx component files
  3. Re-run npx @aniui/cli add button card text to get the TypeScript versions
Previous← InstallationNextCLI →