JSPM

@aotearoan/neon

18.2.9
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 226
  • Score
    100M100P100Q102197F
  • License MIT

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

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.