JSPM – @aotearoan/neon@16.1.1

Package Exports

@aotearoan/neon
@aotearoan/neon/sass/includes/_color-mixins.scss
@aotearoan/neon/sass/includes/_dependencies.scss
@aotearoan/neon/sass/includes/_gradient.scss
@aotearoan/neon/sass/includes/_hidden.scss
@aotearoan/neon/sass/includes/_layout.scss
@aotearoan/neon/sass/includes/_outline.scss
@aotearoan/neon/sass/includes/_palettes.scss
@aotearoan/neon/sass/includes/_responsive.scss
@aotearoan/neon/sass/includes/_scrollbars.scss
@aotearoan/neon/sass/includes/_svg.scss
@aotearoan/neon/sass/includes/_toggle-mixins.scss
@aotearoan/neon/sass/includes/_typography.scss
@aotearoan/neon/theme

Readme

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.