Check out our Components & Widget Library FAQs here

Anima's Components Library holds a collection of interactive components that already contain code snippets inside of them. The Components Library currently consists of React JS Charts, Material Design Library, Google Maps and we'll soon release Bootstrap as well.

React JS Charts

Learn more about charts here!

Material Design Library

Watch Video Tutorial

Create your design with the latest Google Material Design guidelines!

Library documentation


1. Open the Components Library and select Material Design.

2. Click Edit theme if you'd like to customize your Material Design styles to better reflect your product’s brand. We currently only support the colors theme.

You can set up your brand colors, and it will affect all the components in this library.

3. You can find all the widgets of the library on the left sidebar. Select the desired widget and customize its parameters.

4. Select the canvas and click the ‘Insert’ button to add it to your design or drag and drop the widget into the frame.

5. To edit the widget, select it on the canvas, and you’ll see an ‘Edit’ button in Anima plugin's main panel. Customize the widget and then click ‘Update’ to save the changes.

6. To see the code in action, click ‘Preview in browser’ in Anima plugin's main panel.

Google Maps

1. Open the Widget Library and select Google maps.

2. Customize the map, select the layer and click the ‘Insert’ button.

3. Click the 'Preview in browser' button in Anima plugin's main panel to view the map live.

Getting started 😀

Try our sample projects to explore all the possibilities of the Components Library!

Figma sample project

Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?