If you need additional UI libraries or services (like custom fonts or component kits), Shaper likely has or will have plugins to support them. Below are known plugin integrations (such as Google Fonts and shadcn/ui) and how to enable/use them, as well as notes on Shaper’s API integration capabilities.

​
Google Fonts Integration

Want to use a specific Google Font in your design? Shaper supports Google Fonts via a plugin, so you have thousands of font families at your fingertips without manual imports.

  • Enabling Google Fonts: In your project’s settings or plugins menu, look for Google Fonts integration. This might be a toggle or an “Enable Google Fonts” button. Turn it on for the project.
  • Using Google Fonts: Once enabled, go to any text element, and in the typography/font dropdown, you should see a list of Google Fonts or an option to search the Google Fonts library. Type to filter the font name (e.g., “Roboto”, “Montserrat”). Shaper will fetch and list matching fonts. Select the font and apply it to your text element.
  • Automatic Font Loading: When you choose a Google Font, Shaper takes care of loading it in your project (adding the appropriate <link> or import in the code). You don’t need to manually embed font links. The font will appear in the canvas and also be included when you preview or deploy.
  • Font Tokens: For consistency, consider defining font choices as design tokens (e.g., a token for primary font family). Even though you’re pulling from Google Fonts, you can assign a token like font-primary: "Roboto" in the token editor. Use that token for all base text styles. This way, if you ever switch to a different Google Font, you can do it via the token and not chase down individual text elements.
  • Performance Tip: Don’t overload with too many different Google Fonts; each unique font family/weight adds load time. Stick to a core set of fonts (perhaps one for headings, one for body) and use your design tokens to vary style (weight, size) rather than using dozens of families. This ensures your site stays sleek even with custom fonts.

​
Shadcn/UI Component Library Plugin

Shaper comes pre-integrated with shadcn/ui, a popular open-source component library of accessible React components styled with Tailwind CSS. This means you can quickly use ready-made components (like dialogs, dropdowns, tooltips, etc.) in your Shaper project instead of building everything from scratch.

  • Enabling shadcn/ui: Depending on the Shaper version, shadcn/ui might be enabled by default as part of the platform. If not, check Plugins or Libraries in the settings to enable the shadcn/UI library. Enabling it will ensure the library’s components and styles are available in your project (Shaper will handle installing the npm package and linking the styles).
  • Adding shadcn Components: Once enabled, find the Components Library or Add Component (+) menu in the Shaper editor. You should see a category for shadcn/UI Components (they might be listed by name, such as Button, AlertDialog, Accordion, etc.). You can browse or search for the component you need. For example, to add a modal, look for “Dialog” or “AlertDialog”. Drag and drop the component onto your canvas or into your component hierarchy.
  • Configuration & Variants: Many shadcn components come with variants or require certain props (for example, a Button might have variants like “primary/secondary” or an AlertDialog might have subcomponents for Trigger and Content). Shaper provides a Variant Editor for shadcn components. Select the placed component and look at the right-hand properties panel; you’ll see options to toggle variants or styles (this likely maps to Tailwind classes or boolean props under the hood). For instance, a shadcn Button might allow a variant="outline" – Shaper could expose that as a toggle for outline style. Adjust these to get the look you need. Shaper updates the class names or props of the component accordingly in code.
  • Styling shadcn Components: Because these components use Tailwind, you can further customize them by editing classes or wrapping them. However, try to use the provided variant options to stay consistent. If you do need to customize deeply (say, custom CSS beyond what Tailwind offers), you can always open the code editor for that component and modify it – but note that if you update the library or if Shaper re-syncs that component’s template, your manual changes might be overwritten. It’s best to use Tailwind utility classes or custom CSS modules to extend styles rather than editing library source.
  • Upgrading and Maintaining: Since shadcn/ui is an external library, Shaper will manage the package version. If the library updates with new components or fixes, Shaper might offer an update (perhaps through a dependency manager UI or via code package.json). Keep an eye on Shaper’s update notes for any changes to built-in libraries. Upgrading may require adjusting your design if there are breaking changes in the component library.
  • Storybook Integration: Shaper hints at Storybook support – essentially, the ability to import your own design system components via Storybook. If you have a custom component library documented in Storybook, Shaper can import those components into the editor. This is an advanced plugin: you’d point Shaper to your Storybook config or a bundle of your components, and it would list them in the add-components panel, similar to shadcn. This way, if your dev team already built a React component library, designers can drag those into Shaper designs. It ensures tokens stay consistent and changes stay connected across design and code. For enabling this, look for a Storybook plugin or documentation on how to connect Storybook. Typically, you might have to provide the build of your Storybook (the story JSON or component manifests) to Shaper. Once connected, it’s like having your internal design system inside Shaper. This feature truly embodies Shaper’s community-first ethos: designers can use dev-built components with no friction.

​
Other Integrations and Plugins

Shaper is expanding its ecosystem. Some other integration points and how to use them:

  • NPM Packages: Beyond official “plugins,” remember that Shaper’s code editor is essentially a real development environment. You can install any NPM package via the integrated terminal or possibly a GUI. For example, if you need a chart library, you can open the terminal (in Shaper’s VS Code panel) and run npm install recharts (or have your developer do so). After installation, you can import that package in the code editor and even use the component in Shaper’s canvas (though not visually drag-droppable unless Shaper recognizes it, you could wrap it in a Shaper component). This means Shaper can integrate with virtually any API or library your code needs – you’re not limited to built-in plugins. Use this power carefully, as adding many packages could bloat your project; stick to what’s needed for your product.
  • Custom Plugins or API Usage: Shaper might offer a developer API in the future to create custom plugins (for example, to pull data from an external source directly into the design tool, or to add a custom panel). Keep an eye on the Shaper documentation or community announcements if you’re interested in extending Shaper’s functionality. As of now, most integration is done through code or the few built-in plugins.
  • Third-Party Services: You can connect analytics, chat widgets, etc., by adding their embed code in Shaper’s code editor. For instance, to add Google Analytics, insert the script tag in the <Head> of your Next.js pages (the code editor allows editing those files). The change will persist and deploy with your site. Similarly, to integrate a CMS (discussed below), you’d use their API in your code.