Getting Started

Welcome to the NayaOne Design System

This guide will help you install dependencies, connect the UI libraries, and start using components in your projects.

📦 Installation

Configure the Package Manager

Add NayaOne’s private registry to your package manager with your personal access token.

export NPM_TOKEN=<your-npm-token>
echo //gitlab.com/api/v4/packages/npm/:_authToken=${NPM_TOKEN} > .npmrc

Don’t have one? Generate a new personal access token

Install the Package

Using Bun

bun install @fintech-sandpit/ui

Using npm

npm install @fintech-sandpit/ui

Install TailwindCSS

Using Bun

bun install tailwindcss

Using npm

npm install tailwindcss

Setup Vite

In case of using Vite, add its plugin for TailwindCSS and a configuration file.

Using Bun

bun install @tailwindcss/vite

Using npm

npm install @tailwindcss/vite

Create a configuration file

tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
  darkMode: ['selector', '&:where([data-theme="dark"] *)'],
  content: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
};

export default config;

Setup Vite for React applications

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

Setup Vite for Vue applications

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    tailwindcss(),
    vue(),
  ],
})

⚛️ Use with React

Import styles

Create a stylesheet file

index.css

@import '@fintech-sandpit/ui/style/base.css';
@import '@fintech-sandpit/ui/style/palette.css';

Import the stylesheet file into your application

main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css'; /* <- make sure the stylesheet file is imported */

const root = document.getElementById('root');

if (root) {
  createRoot(root).render(
    <StrictMode>
      <App />
    </StrictMode>,
  )
} else {
  alert('No root element found! Application will not start.');
}

Import and use components

component.tsx

import { Button } from '@fintech-sandpit/ui/react';

return (
  <Button
    colorScheme="primary"
    variant="outline"
    size="lg"
  >
    Click me
  </Button>
);

🔰 Use with Vue

Import styles

Create a stylesheet file

index.css

@import '@fintech-sandpit/ui/style/base.css';
@import '@fintech-sandpit/ui/style/palette.css';

Import the stylesheet file into your application

app.vue

<style lang="css" src="./index.css"></style>

Import and use components

component.vue

<script setup lang="ts">
import { Button } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Button
    color-scheme="primary"
    variant="outline"
    size="lg"
  >
    Click me
  </Button>
</template>