Installation

Add AsterMotion to your project as an npm package.

1. Install the package

AsterMotion is published to npm as astermotion. Install it with your package manager of choice.

Code

npm install astermotion

2. Install peer dependencies

Components are built with React and animated with motion. These are declared as peer dependencies rather than bundled, so your project controls the versions.

Code

npm install react react-dom motion

3. Import the stylesheet

Components use pre-compiled utility classes for the AsterMotion theme, so no Tailwind setup is required on your end. Import the stylesheet once, near the root of your app.

Code

import 'astermotion/style.css';

Note: the shipped styles use AsterMotion's fixed brand colors and font — they are not themed through your own Tailwind config.

4. Use a component

Import any component directly from the package.

Code

import { Button, buttonVariant } from 'astermotion';

function App() {
  return <Button variant={buttonVariant.Primary}>Get Started</Button>;
}