vaporwave-aesthetic-ui

vaporwave-aesthetic-ui

Install

npm install --save vaporwave-aesthetic-ui

Overview

Vaporwave Aesthetic UI is a React component library based on the vapor wave a e s t h e t i c.

Quick Start

To get started with Vaporwave Aesthetic UI, you need to wrap the application with the AestheticProvider component. This provides the theme (or aesthetic in vapor wave speak 🐬 🌴 ) to all child components.

import React, { Component } from 'react'

import { AestheticProvider } from 'vaporwave-aesthetic-ui'

class Example extends Component {
  render() {
    return(
      <AestheticProvider>
        <div>application here</div>
      </AestheticProvider>
    )
  }
}

If you are using React functional components, you can also access the theme from any point in the application with the useAesthetic hook.

Documentation & Demo

For a full overview of Vaporwave Aesthetic UI and a demo of the library in action, there'll soon be a documentation site. For now, just check out the Github repo.

Quick links within the repo:

• components
• theme

Styling and Extending the Library with Theme UI

Vaporwave Aesthetic UI is based on the Theme UI React UI framework. The components listed below have been customized beyond the Theme UI theme object, but all components from Theme UI will work in this application. A full list of Theme UI components may be found here.

As Vaporwave Aesthetic UI is based on Theme UI, it uses Theme UI's sx property for styling. You can style any Vaporwave Aesthetic UI or Theme UI component using the sx property. Read more about the sx prop here.

Made with create-react-library

License

MIT © bpmutter