We're performing some maintenance. If you're experiencing any issues please reach out via Slack
Go to Slack
Your payment method has expired. Update your billing details to regain access to premium features.
Manage Billing

Resources, Import Sitemap & React Library Update

May 6, 2024

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

Wireframing 1.0
Wireframing 2.0
Library coverage
Uses ~25% of marketing components.
Uses ~70% of marketing components.

More variety and creative layouts appear in generations.
Brand style fit
Mixed styles, not brand-aware.
Selects styles that match the project description (e.g., off-grid/overlapping for agencies; card layouts for SaaS).

Wireframes feel “on-brand” from the first draft.
Section content match
Defaulted to generic layouts (e.g., always 3 pricing plans), relying only on the section title.
Selects components based on content count using both title & description (e.g., “2 pricing plans” generates a 2-plan layout).

Sections communicate the right thing with the right structure.
Page flow awareness
No awareness of position/order.
Chooses components with placement in mind; improves rhythm and alternation.

Smoother narrative and fewer repetitive beats down the page.
Site-wide consistency
Components are not reused across pages.
Reuses suitable components across pages for coherence.

A more unified site with less rework later.
Copywriting 1.0
Copywriting 1.5
Context
Only looked at one section at a time.
Considers the entire page.

Less repetition, smoother flow across sections
Model
OpenAI GPT
Claude

Sharper, more natural copy.
Quality
Generic, often placeholder text.
More relevant, compelling, and usable.

Saves editing time, closer to production-ready.
Consistency
No awareness of position/order.
Unified tone across the whole page.

Feels like one voice, not stitched-together fragments.
Team
Andy, Sam & Sanskar
Team
Andy & Sam
Team
Damian & Sam
Team
Damian & Sanskar
Team
Damian & Meredith
Team
Damian & George
Team
Damian, Maria & Chester
Team
Rob & Nour
Team
Kaleb, Maria & Jonathan
Team
Kaleb & Maria
Team
Kaleb, Jonathan & Damian
Team
Kaleb, Damian, Jonathan & Maria
Team
Damian, Maria & Marc
Team
Damian, Maria & Kaleb
Team
Kaleb & Matt
Team
Kaleb, Matt & Jonathan
Team
Andy, Chris, George, Kaleb, Damian & Maria
Team
Damian, Trung, Andy, Weidong, Kaleb & Maria
Team
Nick & Abhi
Team
Nick & Weidong
Team
Nick & Max
Team
Andy & Weidong
Team
Andy, Diego & Trung
Team
Marc & Trung
Team
Marc & Arman
Team
Pantelis