DOCSEARCHbyAlgolia
Submit Docs

JenikaUI Documentation

website·Indexed 31 days ago

https://anburocky3.github.io/JenikaUI/

A UI component library featuring TypeScript support and a variety of button styles including Normal, Outlined, Rounded, and various state indicators (Primary, Secondary, Success, Danger, Warning, Info). Requires Node.js version 15.0 or higher for installation via npm.

Tokens
448
Snippets
5
Records
5
Agent score
25%

What's inside JenikaUI

  1. Install JenikaUI using npm or yarn

    To use JenikaUI, you must have Node.js version 15.0 or higher installed and be familiar with the command line. Install the library using your preferred package manager.
    # Using yarn
yarn add jenika-ui

# Using npm
npm install jenika-ui

  2. Configure JenikaUI styles in a project

    After installing the package, import the global CSS styles into your main entry file (e.g., main.ts or main.js) to ensure components are styled correctly.
    // main.ts or main.js
import '/node_modules/jenika-ui/dist/style.css';

  4. Use JButton variants for different semantic styles

    The JButton component supports multiple variant props to apply different semantic colors and styles to buttons. Available variants include primary, secondary, success, danger, warning, info, and dark. If no variant is provided, the button renders with a default style.
    <JButton>Default Button</JButton>
<JButton variant="primary">Primary</JButton>
<JButton variant="secondary">Secondary</JButton>
<JButton variant="success">Success</JButton>
<JButton variant="danger">Danger</JButton>
<JButton variant="warning">Warning</JButton>
<JButton variant="info">Info</JButton>
<JButton variant="dark">Dark</JButton>

  5. Use JenikaUI components in Vue

    Import specific components from the library to use them in your Vue templates. For example, the JButton component can be used with a variant prop (e.g., primary).

    Tip: If you have Unplugin Vue Components installed, you can skip the manual import step.

    <script setup>
import JButton from './components/JButton/JButton.vue';
</script>

<template>
    <JButton variant="primary">Primary</JButton>
</template>