Logo

Getting Started

Installation

Install the packages, add the shared styles once, and import only the primitives you use. Most components work without extra setup. Forms and icons are the two common additions.

Install packages

Install the component package and the foundation package together. The foundation layer provides the shared token contract and base styles.

npm

npm install @frame-ui-ng/components @frame-ui-ng/foundation

Add styles

Import the foundation styles before the component styles. Do this once in your global stylesheet.

styles.css

/* styles.css */
@import '@frame-ui-ng/components/styles.css';

Import primitives

Each component package supports both a module import and separate primitive imports when you want more explicit control in a standalone component. The component pages show the exact imports for each primitive.

Module Import

import { FrSidebarModule } from '@frame-ui-ng/components/sidebar';

Primitive Import

import { FrSidebar, FrSidebarContent, FrSidebarHeader } from '@frame-ui-ng/components/sidebar';

What next

After installation, choose how the tokens should integrate with your app and then move to the component pages for usage details.