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',
// ...
],
}