Component Library Guide
The Component Library (NitroShock menu) lists your saved components with search, categories, favorites, a preview and a Trash tab. Get components opens the NitroShock library, where you preview ready-made components in your site's styles and Add the ones you want at no credit cost; insert them from the page builder's Insert Components panel.
The Component Library lists every component saved on your site: ones you built in Component Studio, sections you saved from your pages, and ready-made components you added from the NitroShock library. Open it from the NitroShock menu or NitroShock → Component Library. To put a component on a page, use the Insert Components panel in the page builder; the library screen is for browsing and managing.
Views
- All Components - everything in your library.
- Favorites - components you have starred.
- Custom - components made on this site, including duplicates and saved page sections.
- Imported - components added from the NitroShock library.
- NitroShock library - the ready-made components published on nitroshock.ai (see below).
- Trash - components you have deleted, until you restore them or delete them for good.
Searching and Sorting
Search matches component names and descriptions. The category filter lists the categories your components use, with a count for each. Sort by Name, Date Created, Last Modified or Most Used, and switch between grid and list view with the icons next to the sort menu.
Working with a Component
Hover over a card for quick Edit, Duplicate and Delete icons, and click the star to add it to Favorites. Click the card itself to open a preview with Preview, HTML, CSS and JavaScript tabs and desktop, tablet and mobile views. On a site imported with NitroShock, Use site CSS shows it with your site's own stylesheet. The preview also shows how many times the component has been inserted into a page (Used: N times, the count behind the Most Used sort) and has Edit Component, Duplicate, Export JSON, a favorites button and Delete.
- Edit opens the component in Component Studio.
- Duplicate makes a copy named with "(Copy)" added.
- Export JSON downloads the component as a file you can import on another site.
- Delete asks for confirmation, then moves the component to the Trash tab. A trashed component no longer appears in Component Studio's list or the builder's Insert Components panel.
Trash. On the Trash tab, Restore puts a component back where it was. Delete on a trashed component removes it permanently after a second confirmation, and Empty Trash permanently deletes everything in the trash at once.
Your pages are not affected by editing or deleting a library component. When you insert a component, its HTML is copied into the page and its CSS and JavaScript into the page's own CSS and JS tabs, so the page keeps working on its own.
Getting Ready-Made Components
Click Get components in the library header, or open the NitroShock library tab. It lists every component published on nitroshock.ai, each with a live preview drawn in your site's own styles; click a preview to see it full size. A line above the grid tells you how many components are on nitroshock.ai, how many are already in your library and how many have an update.
- Find: search, filter by category, and tick Hide added to see only what you do not have yet. Refresh reads the list from nitroshock.ai again.
- Add puts one component in your library, under All Components and Imported. The card then reads Added.
- Update appears instead when a newer version has been published. It replaces your copy in place and keeps its id, so pages that already use it are unaffected.
- Add all adds every component you do not have yet, after a confirmation.
Only administrators can add components; other users see Ask an administrator on the cards. Adding and inserting components do not use credits.
Components arrive as plain, editable content: real headings, copy and icons you change in Component Studio or on the page, not fill-in fields. Edit one in Component Studio and click Save to update your copy, or Save As New to keep the original as well.
From the page builder. You can also add components without leaving a page. In the builder's Insert Components panel, the category dropdown has a From nitroshock.ai group listing every online category with its count. Pick one to see its components, click Add on the ones you want, then drag each onto the page from its own category in the same dropdown.
Adding Components
- Create New in the library header opens Component Studio with a new component.
- AI Generate opens Component Studio with the AI Assistant ready to build from your description.
- Save sections from a page: in the page builder, Save page sections to library in the top bar (or Save section to library on a single section) saves sections of a page you built as components, up to ten at a time. They are named after the page, for example "Home - Section 2", and filed under Captured Sections. This needs code access (administrators by default).
- Import: in Component Studio, open the Import tab, paste the component JSON and click Import Component, then Save.
Sharing a Component
To offer a component to other NitroShock users, open it in Component Studio and click Share to Library. It is reviewed by NitroShock before it appears in the NitroShock library for everyone to add.
FAQ
How many components can I store?
There is no set limit. Components are stored in your own WordPress database.
Can I insert a component from this screen?
No. Open the page in the builder and use the Insert Components panel, where your library components are listed below the basic elements.
Will adding a component again overwrite my changes?
No. A component you already have shows Added, and Add all skips it. Only Update replaces your copy, including any changes you made to it, and it appears only when nitroshock.ai has a newer version. Use Save As New in Component Studio first if you want to keep your edited version.