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


Keywords
sass, css, vue, VueJS, Vue3, design, system, component, library, dark, light, theme, theming, mode, web, scss, variables, application, javascript, typescript, framework, html, neon, lightweight, ui, ux, component-library, dark-mode, designsystem, responsive, sass-framework, themable, ui-components
License
MIT
Install
npm install @aotearoan/neon@14.1.6

Documentation

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.