# UI Kits

**UI Kits** are reusable UI components introduced in **ONEWEB Page Designer (version 5.0.21.01 and later)**.\
They allow designers and developers to **create, store, and reuse UI components across multiple pages and applications**, ensuring consistency, faster development, and easier maintenance.

UI Kits are ideal for:

* Reusable headers, cards, or sections
* Standardized UI patterns
* Design systems and component libraries
* Cross‑page and cross‑application consistency

***

### Create a Reusable UI Kit

#### Step 1: Select a UI Component

1. Open a page in **Page Designer**
2. Select the UI component you want to make reusable

***

#### Step 2: Open UI Kit Menu

1. Click the **UI Kit** icon from the **left sidebar menu**
2. The UI Kits popup window opens

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FzDiS3T6GDw9cP9uzbMTk%2Fimage.png?alt=media&#x26;token=f327bfcc-4956-461e-bed3-f52f1385f8da" alt=""><figcaption></figcaption></figure>

***

#### Step 3: Create a New UI Kit

1. Click the **‘+’** icon in the UI Kits popup
2. Enter a **UI Kit name**
3. Click **Create**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FQEXK084D97XYPuSrw0pQ%2Fimage.png?alt=media&#x26;token=97399edd-f4fe-4d64-9cb8-16cd40477246" alt=""><figcaption></figcaption></figure>

***

#### Step 4: Verify UI Kit Creation

Once created successfully:

* A green confirmation message appears
* The UI Kit is listed under **User Customize** tab in UI Kits popup

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FCduOXjvP5qvXTbwqrADd%2Fimage.png?alt=media&#x26;token=2203520a-bf48-473c-b701-07a5c072af2d" alt=""><figcaption></figcaption></figure>

***

### Use UI Kits on a Page

#### Step 5: Drag UI Kit to Page

1. Open the target page
2. Open the **UI Kits popup**
3. Drag the UI Kit from the list
4. Drop it into the desired location inside **PageContent**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FUNAcltxIUQbyuvh3FEBF%2Fimage.png?alt=media&#x26;token=c4427380-7658-426d-85a0-e1320f0fe821" alt=""><figcaption></figcaption></figure>

The UI Kit behaves like a normal component and can be reused across pages.

***

### Remove UI Kits from Application

UI Kits can be removed if they are no longer required.

1. Open **UI Kits popup**
2. Select the UI Kit
3. Remove it from the list

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Ff2LVzpslsVdIKXiGESJK%2Fimage.png?alt=media&#x26;token=b15f6103-1da6-4fd2-94f7-704d1e4fcf1b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FkCmirnOtlcbzaO3bPeEG%2Fimage.png?alt=media&#x26;token=8eee443e-484d-4751-8fe6-adc95456403f" alt=""><figcaption></figcaption></figure>

***

### Export & Import UI Kits Across Applications

UI Kits can be shared across different applications within the **ONEWEB ecosystem**.

***

#### Export UI Kits

1. Go to **Page Designer Home**
2. Open **RESOURCES → UI Kits** tab

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FFYHrCsD5llIv65CEPLW3%2Fimage.png?alt=media&#x26;token=db4d384c-55cd-47a6-a033-c6d6bad7aa65" alt=""><figcaption></figcaption></figure>

3. Click **Export UI Kit**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FYH9xG5fragFcmXufWk7O%2Fimage.png?alt=media&#x26;token=cbe306f8-7d14-4a09-b3fe-172b16f07d4e" alt=""><figcaption></figcaption></figure>

4. Select UI Kits to export
5. Enter **Package Name** and **Namespace**
6. Click **Export** and save the package

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FqWnIrue54G0BzZhkBhDJ%2Fimage.png?alt=media&#x26;token=d5ab2c04-088f-4eeb-912e-8feb96d3de03" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FeTR7emVK28YvdBvC3gYU%2Fimage.png?alt=media&#x26;token=0ad26636-1325-46b3-914c-9b21f2810a7f" alt=""><figcaption></figcaption></figure>

***

#### Import UI Kits

1. Click **Add UI Kits**
2. Select the exported UI Kit package from your system

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FlhNx6A1PLzwdpGmva2m7%2Fimage.png?alt=media&#x26;token=dfe45152-1341-4329-baa1-ec8ebc53ab93" alt=""><figcaption></figcaption></figure>

3. Imported UI Kits appear in the UI Kits list

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FHJgwbLckUsjgyGjvBoWL%2Fimage.png?alt=media&#x26;token=bb83918a-138a-4420-9ab8-e9c5b5066ded" alt=""><figcaption></figcaption></figure>

***

### Use Imported UI Kits

1. Open a page
2. Open **UI Kit menu**
3. Switch to **External UI Kits** tab
4. Drag the imported UI Kit into the page

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FEoomzQ2K3OYoUdDtuAhT%2Fimage.png?alt=media&#x26;token=e8666003-9e43-4c13-b482-dc6cd56e6ed2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FI1eYBAhtfK8WcAnZSjVa%2Fimage.png?alt=media&#x26;token=651e83e8-a9b4-4a45-be28-2b1e01467aed" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F0ptZQSG9gKTR4ZiDLQ8a%2Fimage.png?alt=media&#x26;token=eacba6b5-1ed9-411a-90af-bb53c95fc67b" alt=""><figcaption></figcaption></figure>

***

### Design Perspective

As part of **Page Designer best practices**:

* Use UI Kits to enforce **consistent UI patterns**
* Name UI Kits clearly and logically
* Avoid deeply nested or overly complex kits
* Treat UI Kits as a reusable design system
* Store shared kits centrally and reuse across apps

UI Kits significantly improve **maintainability, productivity, and design consistency** in ONEWEB applications.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/building-apps/ui-page-designer/ux-ui-components/pages/page-features/ui-kits.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.