Getting started

Get started with Charm UI library

Charm UI - is a minimalistic CSS and React components libary for creating simple and beautiful documentation or blog websites. It's developed with InterUI font family in mind.

Installation

Charm can be downloaded through npm and includes two version of CSS styles and React layout components:

npm install charm-ui -S

Within the download you'll find the following directories and files:

charm-ui/
└── dist/
    ├── charm.classed.css
    ├── charm.tagged.css
    └── esm/ (commonjs/)
        └── layout/
            └── index.js

CSS

Charm CSS library includes two different versions:

// Use tagged css version
import 'charm-ui/dist/charm.tagged.css';

// Use classed css version
import 'charm-ui/dist/charm.classed.css';

Or simply linking css file in your browser:

<link rel="stylesheet" href="path/to/charm-ui/dist/charm.tagged.css">

• If you prefer to use html tags, start with charm.tagged css library.
• If you prefer to use css classes, you can use charm.classed css.

Any versions also includes minimal CSS resets, Utility classes and some Layout components for better presentation. Most of times you can just drop tagged version of Charm and write plain html or MDX. You can also use static site generators like GatsbyJS.

Charm is only a minimal UI presentation of your website. You can extend, update or change and use CharmUI the way you want

JS

Charm also contains some basic JS layout components that can be used within React. You can read more about Charm layout components on Components page.