@unily/resin-components

React component library for the Unily Resin design system.

Install

npm install @unily/resin-components @unily/resin-icons @unily/resin-tokens

Peer dependencies:

• react ^19.0.0
• react-dom ^19.0.0
• @unily/resin-icons (matching major version)
• @unily/resin-tokens (matching major version)

ESM-only package

@unily/resin-components is published as ESM only.

• Use import syntax.
• require('@unily/resin-components') is not supported.

import { Button } from '@unily/resin-components';

For Node.js environments, use an ESM-compatible setup (for example "type": "module").

Quick start

Import tokens once at your app entry point, then consume components.

import '@unily/resin-tokens/variables';
import { Button } from '@unily/resin-components';

export function App() {
  return <Button label="Continue" />;
}

Usage notes

• Install @unily/resin-icons and @unily/resin-tokens alongside this package.
• Load token CSS before rendering components so styles resolve correctly.
• Use Resin components and icons together for consistent behavior and visuals.

import '@unily/resin-tokens/variables';
import { Button } from '@unily/resin-components';

export function SaveButton() {
  return <Button label="Save" icon="check-circle-filled" iconPosition="leading" />;
}