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(),
  ],
})

Create a stylesheet file

src/main.css

@import "tailwindcss";
@import '@fintech-sandpit/ui';

Import component styles

You can either import the component styles directly in the component file (see below) or in the stylesheet file.

src/main.css

@import "tailwindcss";
@import '@fintech-sandpit/ui';
@import '@fintech-sandpit/ui/style/components/button.css';
@import '@fintech-sandpit/ui/style/components/field.css';
/* ...and so on */

⚛️ Use with React

Import stylesheet file

index.html

<!doctype html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/src/main.css" /> <!-- import the stylesheet file -->
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Import and use components

src/component.tsx

// Import the component
import { Button } from '@fintech-sandpit/ui/react';
// Import component styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';

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

🔰 Use with Vue

Import stylesheet file

index.html

<!doctype html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/src/main.css" /> <!-- import the stylesheet file -->
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/index.ts"></script>
  </body>
</html>

Import and use components

src/component.vue

<script setup lang="ts">
// Import the component
import { Button } from '@fintech-sandpit/ui/vue';
// Import component styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
</script>

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