Installation

ELIXIR Cloud Components (ECC) can be installed and used in multiple ways to fit your project's needs. Choose the installation method that best suits your development environment.

The following examples use service-name as a placeholder. Replace it with the actual service name for your use case. You can find the list of available services in the Supported Services section.

Installation Methods

Package Manager (Recommended)

Install ECC packages using your preferred package manager. This method provides better dependency management, bundling optimization, and TypeScript support.

npm install @elixir-cloud/(service-name)

CDN Installation

For quick prototyping or when you prefer not to use a package manager, you can load ECC components directly from a CDN. This method is ideal for vanilla HTML/JavaScript projects.

<script type="module" src="https://esm.sh/@elixir-cloud/(service-name)@(version)/components/component-name"></script>

⚠️

When using CDN installation, make sure to specify a version to ensure consistency across deployments.

Usage Examples

React/TypeScript Projects

After installing via package manager, you can import and use components in your React application:

import Button from '@elixir-cloud/design/react/button';
 
export default function App() {
  return (
    <div>
      <h1>My Application</h1>
      <Button variant="primary">Click me</Button>
    </div>
  );
}

Vanilla HTML/JavaScript

With Package Manager

import '@elixir-cloud/design/components/button';
 
// Use the web component
document.body.innerHTML = '<ecc-utils-design-button>Click me</ecc-utils-design-button>';

With CDN

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECC Example</title>
    <script type="module" src="https://esm.sh/@elixir-cloud/design@2.0.0-alpha.6/components/button"></script>
  </head>
  <body>
    <h1>My Application</h1>
    <ecc-utils-design-button>Click me</ecc-utils-design-button>
  </body>
</html>

Next Steps

After installation, you can:

Explore the Component Documentation to see all available components
Learn about Customization to adapt components to your design system
Check out specific service documentation for advanced usage patterns

Introduction Customization