Charma UI

Angular component library for Charma interfaces. It includes reusable standalone components, directives, SCSS design tokens, themes, icons, and packaged assets.

Visit Charma UI for live demos and comprehensive documentation.

Installation

Install the package in an Angular application:

npm install @shakka/charma-ui

Add the global stylesheet to the app styles array:

"styles": [
  "node_modules/@shakka/charma-ui/charma-ui.scss"
]

Optional theme overrides should be added after charma-ui.scss so they can override the default :root custom properties:

"styles": [
  "node_modules/@shakka/charma-ui/charma-ui.scss",
  "node_modules/@shakka/charma-ui/themes/black.scss"
]

Basic Usage

Import components from @shakka/charma-ui:

import { Button, Alert } from '@shakka/charma-ui';

Use them in a standalone component:

import { Component } from '@angular/core';
import { Button, Alert } from '@shakka/charma-ui';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [Button, Alert],
  template: `
    <charma-alert type="success">Saved successfully</charma-alert>
    <charma-button label="Continue"></charma-button>
  `,
})
export class ExampleComponent {}

Contents

The library exposes components such as:

• Accordion, Alert, Avatar, Badge, Breadcrumb
• Button, Card, Checkbox, Chip, Date Picker
• Drawer, Dropdown, Empty State, File Upload
• Input, Menu, Modal Dialog, Pagination, Popover
• Select, Snackbar, Table, Tabs, Tooltip
• Tree, Navbar, Price, and more

The public API is defined in src/public-api.ts.

Styles and Assets

The SCSS entrypoint is:

src/charma-ui.scss

It includes the default Charma theme custom properties and public utility classes for typography, spacing, layout, grid, flex, elevation, composition, buttons, icons, and animations.

The default theme included by charma-ui.scss is dark.

Additional theme overrides live under:

src/themes

The stylesheet does not reset consumer application elements globally.

Library assets are packaged from:

src/lib/assets

Local Development

From the workspace root:

npm install
npm run build:lib
npm run storybook

Build output is generated in:

dist/charma-ui

Tests

Run unit tests from the workspace root:

npm test

Maintenance

When adding a component, make sure it is exported from:

src/public-api.ts

The workspace provides a helper:

npm run update:api