Skip to main content

Using Nitrozen To Build User Interface

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

Steps to build a user interface

  1. Open a terminal and install the Nitrozen library.

    npm install @gofynd/nitrozen-vue
  2. Use NitrozenButton component inside your Vue app, with CSS and component import.


    <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <nitrozen-button :theme="'secondary'" v-flat-btn>Click me</nitrozen-button>

    import HelloWorld from './components/HelloWorld.vue'
    import { NitrozenButton } from "@gofynd/nitrozen-vue";

    export default {
    name: 'App',
    components: {

    @import './../node_modules/@gofynd/nitrozen-vue/dist/nitrozen.css';

    #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  1. Next, build your app.

    npm run build
    npm start
  2. Open http://localhost:3000 in your web browser, you should be able to see a Nitrozen standard button.