Resources, Import Sitemap & React Library Update

It’s a new month which means we’ve released some new components and updates to improve Relume. Happy May Component Day!

Here's what's new:

Introducing Resources

{{TeamKalebMattJono}}

Over the last 12 months, the team has been so focused on product development that we've kind of neglected product documentation that can help you get the most out of Relume. We're fortunate now to have the resources to invest in documentation and are excited to introduce a much-needed documentation hub, which we're calling Resources.

This is a continuous, evolving project. Here's what you might find in it currently:

• Getting Started Video Series: A short and snappy video series, created and produced by Kaleb Jae. The Getting Started series gives you all the tips and tricks to get up and running with Relume in the shortest amount of time possible. We’re all about speed!
• Docs: Find detailed step-by-step guides on using all of Relume's tools and features.
• FAQs: A central spot for frequently asked question from our community. If you still can’t quite find what you’re looking for, you can always reach out to us in Slack.

Dive in and discover Resources today!

Import Sitemap

{{TeamDamianGeorge}}

We're super excited to introduce the Import Sitemap feature. This feature lets you import a website's sitemap into the Site Builder in just a few minutes.

We get it, not every project you undertake is a fresh new build. Sometimes, it's a redesign of an existing site with its own set of pages and structure. In the past, this meant spending time in Site Builder manually adding and arranging pages before you could even think about content and design. Well, those days are now behind us. With our new Import Sitemap feature, you can simply import a sitemap by pasting the URL of the existing site. After you've pasted a valid URL, we'll take care of creating and arranging all the pages (up to 50 pages max) in the Site Builder to match the structure of the website.

By default, we also import the page titles and meta descriptions into the page prompt field. This means you can generate page content and wireframes in seconds and supercharge your website redesign.

We're eager to hear what you think about this feature, so don't hesitate to share your thoughts and feedback with us on Slack.

React Library Update

{{TeamRobNour}}

The React team has been working hard to build even more React components. This month we’re releasing 50 new components, with a large number of uncommon and interactive sections.

New Section Highlights

• 3 new FAQ designs, with interactive accordion component - FAQ 6.
• 3 uncommon sticky scroll feature sections - Content 6, and Layout 348.
• 2 uncommon CTA’s, it’s hard to describe these ones! CTA 37  and CTA 38.
• 6 new login, signup and contact forms. Sign Up 2  and Login 7. These use simple useState and onClick handlers so you can skip the tedious parts of hooking up basic forms.
• A set of uncommon Hero sections including Marquee Header 78,  Anti Gravity Header 80, Zoom In Fullscreen Video Header 82 and an Inline Carousel Header 102 - Don’t miss these! Using Framer motion and Tailwind.
• 2 uncommon card layouts, Layout 422 and Layout 423.
• 3 more footers.
• And a much expanded set of general purpose Hero, Card, Blog and Feature sections.

Full component list available in the changelog

UI Library Updates

• Adopted react-icons and replaced custom SVGs with Box Icons. This change simplifies icon swapping for users, allowing them to use their preferred icon libraries.
• Adopted framer-motion for animations. Framer motion enables us to create smoother and more complex animations. It's a widely recognized and supported animation package. We still use Tailwind animation CSS for simple animations.
• The Relume UI library, @relume_io/relume-ui, was updated to v0.1.0.

Feedback

Thank you to everyone for providing valuable feedback during the beta phase. We've received numerous suggestions about making the React components available in various formats. Many have expressed a desire for a model similar to Shadcn UI, particularly the ability to copy and paste UI component dependencies. We've also received feedback suggesting that a scaled-down version of the code, with just JSX and hardcoded props, can be easier to integrate. In response to this feedback, we plan to develop more robust export options from the Relume library in May.

Written by Damian Martelli, Kaleb Jae & Rob Austin

Edited by Adam Mura