LANTERN

A Vue collection of component with TailwindCSS
· Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Examples
• Contributing
• License
• Contact

About The Project

Lantern is a library of components written with Vue 3 and TailwindCSS. It provide 80+ components, from basics to complex layouts, all responsive for easily build your application.

Getting Started

Prerequisites

• npm

npm install npm@latest -g

Installation

1. Install NPM packages

npm install @pharos-lab/lantern

Usage

To use Lantern, just import the plugin from the package and tell vue to use it!

// main.js

import { createApp } from 'vue';
import { lantern } from '@pharos-lab/lantern'
// import tailwind styles
import '@pharos-lab/lantern/dist/styles.css'

import App from './App.vue';

const application = createApp(app);

application.use(lantern);
application.mount('#app');

Note: Since Lantern is written with tailwind, don't forget to import the styles.css css file !

Now You can use all the features of Lantern!

Examples

<script setup>
// your JavaScript code ...

</script>

<template>
  // your code ...

  <NameOfComponent>
    // Slots if the component needed it
  </NameOfComponent>
</template>

The Lantern plugin made the registration of all components so you don't have to import them and can start using them directly.

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature)
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License.

Contact

pharos-lab - @pharos-lab - [email protected]

Project Link: https://github.com/pharos-lab/lantern