Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aotearoan/neon

Neon is a modern VueJS design library built with Typescript and SASS
https://github.com/aotearoan/neon

component-library dark-mode design designsystem framework javascript lightweight neon responsive sass sass-framework themable theme typescript ui-components vue vuejs

Last synced: about 1 month ago
JSON representation

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

Host: GitHub
URL: https://github.com/aotearoan/neon
Owner: aotearoan
License: other
Created: 2020-05-25T09:28:22.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2024-04-05T11:20:23.000Z (8 months ago)
Last Synced: 2024-10-02T03:21:42.835Z (about 2 months ago)
Topics: component-library, dark-mode, design, designsystem, framework, javascript, lightweight, neon, responsive, sass, sass-framework, themable, theme, typescript, ui-components, vue, vuejs
Language: TypeScript
Homepage:
Size: 4.77 MB
Stars: 22
Watchers: 1
Forks: 4
Open Issues: 1
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        ![GitHub package.json version](https://img.shields.io/github/package-json/v/aotearoan/neon)

![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@aotearoan/neon)

![GitHub last commit](https://img.shields.io/github/last-commit/aotearoan/neon)

![npm](https://img.shields.io/npm/dt/@aotearoan/neon)

![GitHub](https://img.shields.io/github/license/aotearoan/neon)

## Documentation & Demo

Full documentation is available on the [demo site](https://aotearoan.github.io/neon/).

## 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](https://aotearoan.github.io/neon/design/theming#dark-mode).