v0.0.1

Introduction

Learn how Elyri is organised into sections and packages, and the two ways to use it.

#What is Elyri

Elyri is a collection of React components: motion effects, UI primitives and page blocks. Import any component straight from npm, or copy its source into your project with the CLI and edit it like your own code.

#Sections and packages

The site is organised into sections, each published as its own npm package. Install only what you use.

SectionPackageContentsComponents
Motion@elyri/motionAnimation, background and text effects, with zero runtime dependencies.30
UI@elyri/uiButton, Alert, Dialog and other primitives — more on the way.31
Blocks@elyri/blocksCopy-and-own page sections such as login — more on the way.1

#Two ways to use it

ModeBest forUpgrades
Import from the packageUsing components as-isBump the package version
Copy source with the CLIDeep customisation and full ownershipRe-run add --overwrite (replaces local edits)

You can mix both: import most components and copy out only the ones you want to reshape.

#Principles

  • Zero runtime dependencies: only react and react-dom (18 or 19) as peer dependencies.
  • CSS variable theming: every customisable value is an --elyri-* variable you can override globally or inside any container.
  • Performance first: WebGL backgrounds pause offscreen and in background tabs, and render at no more than 2× device pixel ratio by default.
  • Reduced motion aware: follows the system preference, and any subtree can be forced to play or stay still.

#Next steps

Installation →Install a package, import the styles and render your first component.CLI →Copy component source into your project and own it.Browse components →Live previews, tweakable props and copy-ready code.