Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



Configuration for setup Legion to your development



Legion uses multi-theming with the help of ThemeProvider from Emotion, this means you can switch themes quickly and see what you need with as easy as props parsing to the ThemeProvider. With each theme from each tribe being fetched from an API endpoint, you are guaranteed to be updated as long as both designer and developer cooperated with any incoming updates to your application.


In this example we are going to use what’s generated from the Create React App command, but the principal stays the same across entire application. You are going to edit your main root file of your React Js whether it’s App.js or Index.js or Main.js, and wrap the entire Main Component / Main App with the ThemeProvider such as follows with the props description:


themeobjectThe generated object from designer’s Figma pushed to the given repository. Fetched first before passed to the ThemeProvider as props.

Available Themes

Not all squad are also provided like tribe, some are ready for use some aren’t since needs will differ across platforms too. Here are the squads that are ready to use by order:

Theme NameAPI Endpoint
Theme Pijar Sekolah
Theme Logee Trans
Theme Agree Culture
Theme GovMart
Theme BigBox
Theme TKP
Theme DigiTern
Theme OSS
Theme PadiUMKM
Theme MyTens
Theme BPOM

Usage Themes

Below is the usage example using Pijar’s squad theme.

import { ThemeProvider } from '@emotion/react'
import { createTokens } from '@legion-ui/core'
const TokensPijar = createTokens({
apiUrl: '',
apiHeaders: { Accept: 'application/vnd.github.v3.raw' },
tokensName: 'pijarTokens'

After you wrap the main App component inside the ThemeProvider, you’re all set and ready to go you can use any available components provided.