Lnx

Get started ​

Installation ​

  1. Install the library
    bash
    $ pnpm install lnxjs-components
    bash
    $ npm install lnxjs-components
    bash
    $ yarn add lnxjs-components
  2. In your entry file (usually main.js or main.ts), import the library base:
    ts
    import { createApp } from 'vue'
import App from './App.vue'

import 'lnxjs-components/dist/base.css'; 

createApp(App).mount('#app')
  3. Set the data-theme attribute in your html tag to the theme you want to use:
    html
    <!DOCTYPE html>
<html lang=""> 
<html lang="" data-theme="bobcat"> 
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
  4. If you don't want to use default themes, create a .scss file where you want with your custom css variables:
    scss
    :root {
  --lnx-color-primary: <whatever>;
  --lnx-color-primary-light: <whatever>;
  --lnx-color-primary-dark: <whatever>;
  --lnx-color-primary-accent: <whatever>;
  /* ... */
}
    And then import it in your entry file:
    ts
    import { createApp } from 'vue'
import App from './App.vue'

import 'lnxjs-components/dist/base.css';
import 'custom-theme.css'; 

createApp(App).mount('#app')

    TIP

    You can check available css variables in each theme docs for global styles or in each component docs for component-specific styles