This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Teams

Version: 0.131.0

Getting Started

AdminUI is an experimental collection of the reusable components within VTEX admin apps. It is available as an npm package of the name @vtex/admin-ui.

Setup

How to set up admin-ui for different frameworks.

VTEX IO

In the /react folder, install the admin-ui package.

yarn add @vtex/admin-ui

For the root component of the app:

// 1. import the ThemeProvider
import { createSystem } from '@vtex/admin-ui'

// 2. add an unique key for the onda instance
const [ThemeProvider] = createSystem({
key: 'unique-key-in-kebab-case',
})

function RootComponent() {
// 3. Use at the root of your app
return <ThemeProvider>{/** your app code here */}</ThemeProvider>
}

Multi-route apps

Sometimes the app does not have a single entry. You must define a unique key for each one of them, like:

Example routes.json:

// /admin/routes.json
{
"app.route1": {
"path": "/admin/route1",
"component": "Root1"
},
"app.route2": {
"path": "/admin/route2",
"component": "Root2"
}
}

For the Root1:

// Root 1

const [ThemeProvider] = createSystem({
key: 'app-name-root-one',
})

For the Root2:

// Root 2

const [ThemeProvider] = createSystem({
key: 'app-name-root-two',
})

Gatsby

For ease of use, we provide a gatsby-plugin.

yarn add @vtex/admin-ui @vtex/gatsby-plugin-admin-ui

In your gatsby-config file, resolve the plugin.

// gatsby-config.js

module.exports = {
plugins: [
'@vtex/gatsby-plugin-admin-ui',
// ...
],
}