note: unstable
This is the UI kit for Genki. It includes:
- The definitive Genki UI theme, as:
- a tailwind theme + postCSS
- compiled css and ejs for loading in JS or CSS
- a
<genki-theme />web component that can be loaded at the top of any HTML page to provide the CSS, fonts and assets
- Raw assets including fonts and icons
- A fully modular tailwind based styling system that works across frameworks
- A library of components (in the atomic design style). These are custom elements and have accompanying react wrappers.
To open a fast live reloading server where you can iterate on design and functionality of the components:
npm run start
To build the component library and update the gallery and docs, run:
npm run buildTo run the unit tests for the components, run:
npm testTo generate a new component template, run:
# npm run generate scope/genki-componentname
# e.g.
npm run generate atoms/genki-avatar-
<account-drop-down>code | readme -
<add-new-element-button>code | readme -
<chl-accordion>code | readme -
<chl-button>code | readme -
<chl-document-card>code | readme -
<confirmation-dialog>code | readme -
<content-finder>code | readme -
<content-results>code | readme -
<content-searchfield>code | readme -
<genki-block-figure>code | readme -
<genki-block-quote>code | readme -
<genki-block-settings>code | readme -
<genki-block-summary>code | readme -
<genki-block-tagged-title>code | readme -
<genki-component-card>code | readme -
<genki-heading>code | readme -
<genki-icon>code | readme -
<genki-navigator>code | readme -
<genki-prose>code | readme -
<genki-result-article>code | readme -
<genki-result-card>code | readme -
<genki-result-citation>code | readme -
<genki-result-figure>code | readme -
<genki-result-insert-btn>code | readme -
<genki-result-summary>code | readme -
<genki-result-tag>code | readme -
<genki-tag>code | readme -
<genki-theme>code | readme -
<publish-tag>code | readme -
<tag-picker>code | readme -
<tag-picker-display>code | readme -
<tag-picker-editor>code | readme