ankur profile
zuber image
denis profile
steven profile
+800 creators used Drevo Library.

Build Advanced Webstudio Sites Faster and Easier.

Easily add in Webstudio no-code friendly Components, powerful features like the Filters Plugin, and fully-crafted Templates. All in one place.

Get Full Library AccessExplore Library
Filter any Collection you want
Add a CMS Slider in seconds
Play and control any Lottie
Make your Blog or Docs stand out
Make a Light and Dark Theme for your site
Display the Current date and/or Time
Filter any Collection you want
Add a CMS Slider in seconds
Play and control any Lottie
Make your Blog or Docs stand out
Make a Light and Dark Theme for your site
Display the Current date and/or Time

How it works

1. Get Your Cloneable

Start by purchasing the Drevo Library Pro License to receive the cloneable. This gives you immediate, lifetime access to our entire collection of components and plugins, with all future updates included. No subscriptions, no hidden fees.

2. Copy anything from the Library to your site

Explore a growing library of expertly crafted components and powerful plugins like Filters. Simply find what you need and copy it directly into your Webstudio project.

3. Make it your own and ship it!

Paste the element into your site, style it to match your brand, and connect it to your data. Our components and plugins are built to be easily customized and performant.

Components

Add fully functional, ready-to-use components in just a few clicks, with easy-to-follow instructions, and adapted for Webstudio.

Easy Integration
No need to code (it's already done for you)
Seamless Compatibility
Marquee
Typewriter

Webstudio is fast.|powerful.|just better.

Comparison Slider
Before
After
Confetti
Scramble Text
This text scrambles every 4 seconds.
Text Weight Hover

You can hover over the entire text to see the effect in action. It will change the weight of the word based on the cursor position between the defined boundaries.

Plugins

A full set of customizable features to enhance your Webstudio website.

Filters

Filtering, sorting, loading, and pagination of your Collection items.
Works on static or sourced collections from any CMS.
Compatible with Craft and includes ready-to-use components.
Live Preview

Markdown Enhancer

The Markdown Enhancer Plugin supercharges standard markdown by transforming it into rich, interactive HTML. It automatically detects markdown content from the Webstudio's Markdown Embed, and allows us to add any ID, class, or attributes in any portion of the Markdown content. In addition, the plugin also provides built-in functionalities like Code Block, a copyable block of code.

Without MDE Plugin

[#heading-id]## Advanced Customization with Code[#heading-id]

While Webstudio is a no-code platform, you can still embed custom code for advanced functionality. Here’s an example of a simple CSS override to customize link colors:

[code-block]<style>
/* Custom Link Styles */
a {
color: #0070f3;
text-decoration: none;
transition: color 0.2s ease-in-out;
}

a:hover {
color: #005bb5;
}
</style>[/code-block]

With MDE Plugin

[#heading-id]## Advanced Customization with Code[#heading-id]

While Webstudio is a no-code platform, you can still embed custom code for advanced functionality. Here’s an example of a simple CSS override to customize link colors:

[code-block]<style> /* Custom Link Styles */ a { color: #0070f3; text-decoration: none; transition: color 0.2s ease-in-out; }

a:hover { color: #005bb5; } </style>[/code-block]

Templates

Built directly in and for Webstudio and uses Craft's design system. Made to be performant, minimal, and beautiful.

AM - A minimal portfolio template

A minimal template designed to showcase your work and display your information, including a few Drevo Library Components to give you more functionalities right out of the bat.

am template page
Testimonials

What Users Say

I’ve been an early beta-user of Drevo Library, and I can guarantee you, it will cut your website development time in half, if not more. The components are constructed to offer practical benefits of easy customization with accessibility in mind, so you end up with performant foundation blocks that work reliably for all screen sizes, leaving you with full freedom to design them your way. Needless to say, this library comes highly recommended.
Ankur Puri profile image
Ankur Puri
Webstudio Expert
@tweetdarkpanda
I'm using Webstudio for my website projects and I've been looking for a well-structured UI library that follows the Webstudio's Craft design system standards. And here comes the Drevo Library. It has all the starting components you can ask for, plus nice custom elements, and it's updated frequently. I've been amazed by the ease of use with its single click copy/paste features. It's just a no-brainer if you're willing to push your Webstudio sites to high standards in terms of cleanliness and scalability.
Steven Thomassin profile image
Steven Thomassin
Conversion-Focused Web Designer
@steventhomassin
I must say the components you have created are amazing and very simple to use also of high quality. Love the amazing work you’ve done. Excited to see the future of drevo design 🙌🏽
Zuber Rahim profile image
Zuber Rahim
Webstudio Designer
@ZuberRahim
That's very cool 🔥. I think I'll change my CMS baserow filter to your filter
Denis Ko profile image
Denis Ko
No-Code Web Dev
@Den_mrt

Unlimited, Lifetime Access

$59/one-time

Next Price Tier: $79

Features:
  • Full Access to the Drevo Library
  • Early Access to New Free Components/Plugins versions
  • Lifetime Updates
  • Built for Webstudio
Get Full Library Access
Limited Time Offer

Frequently Asked Questions

Yes. All components and plugins are built for production use and can be used for commercial projects.
Major updates will be monthly. Whether it's adding new elements, updating existing ones, or fixing small issues, Drevo Library constantly strives to improve and be the best version of itself.
You will receive access to your Member Space, where you will find instructions and the DL Pro Cloneable Link.
No! Everything was crafted, prioritizing no-code use. However, in cases that code might benefit the functionality, we have step-by-step instructions with ready-to-go examples.
Because our products are digital and instantly accessible after purchase, we’re unable to offer refunds once an order is completed. We encourage you to explore the Free Components/Plugins of the Library beforehand to experience how they work and review all elements included in the Pro version to ensure it meets your needs before purchasing.