aotearoan / neon

Neon is a modern VueJS design library built with Typescript and SASS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

About

Neon is a modern VueJS design library built with Typescript and SASS

License:Other


Languages

Language:TypeScript 44.0%Language:SCSS 39.7%Language:Vue 15.9%Language:JavaScript 0.3%Language:HTML 0.1%Language:Shell 0.0%