npm.io
28.7.6 • Published 2 months ago

@aotearoan/neon

Licence
MIT
Version
28.7.6
Deps
3
Size
6.0 MB
Vulns
0
Weekly
0
Stars
24
SummaryDependencyVersions

GitHub package.json version npm bundle size (scoped) GitHub last commit npm GitHub

Documentation & Demo

Full documentation is available on the demo site.

Installation

Install with NPM:

npm install @aotearoan/neon

or yarn:

yarn add @aotearoan/neon

Usage

Javascript/Typescript

Import components and supporting classes like so:

import { NeonButton } from '@aotearoan/neon';

export default defineComponent({
  name: 'SomeComponent',
  components: {
    NeonButton,
  },
  ...
});
SASS

To import the theme:

@use '@aotearoan/neon/theme';

Alternatively the theme can be imported with a list of used components to minimise the final package size:

@use '@aotearoan/neon/theme' with (
  $neon-components: (
      NeonAlert,
      NeonButton,
      NeonCard,
      NeonCardBody,
      NeonCardFooter,
      NeonCardHeader,
      NeonDrawer,
  ),
);
HTML

Add the necessary app & Neon styles to the HTML element as well as the light/dark mode, e.g.to set dark mode by default:

<html class="app neon neon-mode--dark">

For more information on dynamically changing the mode see Dark mode.

Building and using the library locally
  1. build the project (npm build),
  2. run npm pack to create a tarball of the project
  3. install from the tarball with npm i -S /$PATH-TO-THIS-PROJECT/aotearoan-neon-21.2.8.tgz

Keywords

sasscssvueVueJSVue3designsystemcomponentlibrarydarklightthemethemingmodewebSASSscsscssvariablesapplicationjavascripttypescriptframeworkhtmlneonlightweightuiux