Last Updated: 8/24/2025
How to use a component from Unicorn
Introduction
Unicorn is a collection of unique web assets that can be used anywhere. They are primarily built in Unicorn Studio, a high-end visual WebGL editor - meaning you can easily customize assets (color, text, etc.) based on your needs. You would use assets like these to improve your site design and make it standout.
Dislaimer
If you want to add assets into your custom coded project, or you want to host the assets on your computer (in JSON), then please follow documentation written here. Scroll down to the "SDK Parameters" section.
Getting started
Let's go take a look at the catalog page. Let's say, for example, we want to choose the Liquid Glass component.
Say this is the component you wanted on your website. Go ahead and click "remix project".
You may need to create an account in Unicorn Studio. Once you've done that, you should see the image above. Now click "remix project" here. It will open up in the project in Unicorn Studio's editor. Look for the "export" button.
When you click "export", navigate to the "Embed" tab. You will then see information about how to embed this into your site. There are dedicated docs to add this to Framer, Webflow, Wix, Figma Sites, and JavaScript. Please follow their documentation if you wish. For this tutorial, we will explain how to add this site into Framer.
Copy the Framer component URL and paste in your Framer editor. Then copy the Project ID and pass it into the respective prop in the Framer component. It should now work on your site!
If you wish to optimize or update the component, just do your changes and then click "Publish". It will automatically update your embed without you having to do anything.
If you have any issues, please refer to Unicorn Studio's documentation on how to import components.