NNS dapp UI kit 🎨

[peterparker]

Hey devs

I am thrilled to unveil that we published on npmjs earlier today the first version (v1.0.0) of the design system library that powers the UI of NNS-dapp .

Its repo is available on GitHub and the custom made documentation (you may recognize a familiar design ) is deployed on mainnet:

GIX Components

The release is the outcome of four months of work which we drove with a low priority - community and projects are the most important - but, with a strong commitment by iteratively developing and integrating the library within the dapp, step by step.

It unleashes no new features nor changes to the existing but, this puts us in an excellent position to start the development of a stylish makeover** of the design of the dapp!

I am personnaly really happy about this achievement and hope you will share my excitement

---

** We will share some more info soon about the brand new design. Few Figma files are ready and are - at least partially - the outcome of the II design contest that happened few weeks ago. So the flair you might have saw and liked will be there. Let us begin hack some CSS and we come back to you asap.

[skilesare]

Is the actual NNS dapp UI opensourced?

[peterparker]

The NNS dapp UI is indeed open sourced. We don’t accept yet external contributions in this repo but we do already in nns/sns/cmc-js libraries, the API layers of the dapp.

The list of JS repo we have open sourced and developed (since begin of year):

• NNS-dapp frontend: nns-dapp/frontend at main · dfinity/nns-dapp · GitHub
• ic-js (nns, sns, cmc and utils): GitHub - dfinity/ic-js: Libraries for interfacing with the Internet Computer.
• UI kit: GitHub - dfinity/gix-components: A collection of UI components and visual style for web applications

[Samer]

Hey @peterparker

I’m using GIX for my project and loving it!

There’s only one thing that forces me to fork and modify. I can’t use a custom logo. (is that right or did i miss something).

Currently having my own GIX components flavour build sourced as a local package dependency.
I had to modify MenuBackground.svelte

[peterparker]

Cool to hear that the components library has proven to be useful for others too!

I just created a PR that should allow you to use a custom logo and oneliner (menu footer):

https://github.com/dfinity/gix-components/pull/345

<Layout>
  <div slot="menu-items" >Menu options</div>

  <div slot="menu-logo">Your custom logo (optional)</div>

  <div slot="menu-oneliner">A logo or sentence instead of 100% on chain (optional)</div>

  <slot />
</Layout>

Sounds good?

[Samer]

Amazingly fast solution!! Looks good indeed

[peterparker]

Great! Once reviewed and merged, I’ll release a version and let know.

[peterparker]

@Samer the PR has been merged and we just released a new version @dfinity/gix-components@3.1.0 that ships this feature.

<Layout>
  <content>
    <title slot="title">My dapp page</title>

    <div slot="menu-logo">Your custom logo</div>
    <div slot="menu-oneliner">Your custom oneliner (footer of menu)</div>

    <main>
      <slot />
    </main>

    <footer><slot name="footer" /></footer>
  </content>
</Layout>

Demo: https://gix.design

(see the custom logo)