Getting Started

Welcome to GIX Components! GIX Components are currently used in NNS-dapp. If you’re just getting started with designing or developing a (client side) dapp for the Internet Computer, you’re in the right place.


These design principles are the foundation of the gix-components.

Do not reinvent the wheel

If the design of an element can be solved with CSS styling only, then no particular component should be created - e.g. that is why <button /> are native HTML elements.


We do indeed use Svelte to develop this design system but, we do not use any other dependencies. Mostly for security reason and to minimize the tech debt.


The components should be for everyone. We can - and should - always improve but, we try our best to make sure people with different backgrounds can use the dapps in which the design system is being used.


Any components and styles has to be ultimately tested. Whether it is with emulated tests or e2e screenshots testing.


Install gix-components as a dependency.

npm i @dfinity/gix-components


Once the library added to your project, components can be use without further settings.

However, you will need to load the global styles (see Usage) and define which theme option (see Theming) you would like to apply to make your dapp looks awesome!


GIX components are developed with SvelteKit. They were originally developed in Svelte for the NNS-dapp rewrite.

Currently, they are packaged as pure Svelte components - e.g. are not shipped as custom elements. If your concrete use case needs their usage in another language, please reach out.


Currently only provided in english, the design system supports i18n. If it were to be translated, a setup function will be exposed to select language and other i18n options.