Installation

Get started with Archyra in minutes. Install the package directly or connect your AI coding assistant via MCP server.

Requirements

Basic Installation

Install the package and its peer dependencies using your preferred package manager.

npm install archyra framer-motion

Tailwind CSS Configuration

If you're using Tailwind CSS, add the package to your content configuration to ensure styles are included.

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/archyra/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of your config
}

Next.js Configuration

For Next.js projects, you may need to add the package to transpilePackages.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['archyra'],
}

module.exports = nextConfig

MCP Server Setup

Archyra includes a built-in MCP (Model Context Protocol) server for AI coding assistants like Claude, Cursor, and Windsurf.

{
  "mcpServers": {
    "archyra": {
      "command": "npx",
      "args": ["-y", "archyra@latest", "serve"]
    }
  }
}

Verify Installation

Test that everything is working by importing a component:

import { LoadingDots } from 'archyra';

export default function TestComponent() {
  return <LoadingDots />;
}