https://componentsui.com/build/

Step-by-step tutorials to help you build beautiful components into your Carrd.co projects

A compilation of video and written tutorials to help you build beautiful components like complex pricing tables, badges and dynamic sections using Carrd elements and copying / pasting little pieces of code into your new or existing projects


What's this

Here's what this project is all about and how to use it

The Components UI Gallery is a great way to start a new landing page or website in Carrd with pre-built components but sometimes you just want to add a single new component to an existing project.

At least for now, this is impossible in Carrd since you can’t share components between projects. Build UI is a compilation of step-by-step tutorials, videos and code snippets to guide you on how to make components into your new or existing Carrd projects.

Build UI is meant to be used as a reference tool: Decide what component(s) you want to build in your project, follow the steps in the tutorial and copy the code (if necessary) to build it. That’s it.

https://componentsui.com/build

Every component [from Components UI] was fully ready to use but also highly customizable. I also purchased Build UI to add in some additional functionality and I am 100% pleased with the result.

Emily G

e.g. creative content


What's included

Step-by-step video and written tutorials with detailed illustrations

The eBook in PDF

The eBook is like the Master index. Here you’ll find a list of all the components available and the tutorial for each one

Table Of Contents

How to use build UI

  • 1.1. Sections & Assets

  • 1.2. Reference Tool

The Set Up

  • 2.1. Setting the Canvas

  • 2.2. Background

Main Components

Build these components straight into your Carrd projects:

Pricing Components

Build pricing tables straight into your Carrd projects:

  • 4.1. Simple Pricing Table → Preview

  • 4.2. Complex Pricing Table → Preview

Advanced Components

Build these advanced components straight into your Carrd projects:

  • 4.1. Simple Pricing Table → Preview

  • 4.2. Complex Pricing Table → Preview

Code Snippets

Pieces of code that you can copy and paste in your Carrd project using the Embed element

  • 6.1. Back to Top Button PREVIEW

  • 6.2. Affiliate Banner PREVIEW

  • 6.3. Maker Widget PREVIEW

  • 6.4. Scroll Indicator PREVIEW

  • 6.5. Dynamic Feature Section PREVIEW

  • 6.6. Toggle in Simple Pricing Table PREVIEW

  • 6.7. Toggle in Complex Pricing Table PREVIEW

  • 6.8. Fixed Banner at the top with Blurred Background PREVIEW

  • 6.9. Fixed Banner at the Bottom with Blurred Background PREVIEW

Tutorial Videos

When there’s a video available for the components’ tutorial you’ll find it referenced on the Ebook so you can look it up on your Gumroad downloads

Code Snippets

Pieces of code that you can copy and paste in your Carrd project using the Embed element

Get a Free Sample

Enter your email and you'll get sample chapters from the eBook PDF and tutorial videos that you can use immediately on your Carrd projects. You'll also receive occasional updates on the project

I respect your privacy. Unsubscribe at anytime.


It's not an expense.
It's an investment.

Build UI can help you save time and make money. It can pay for itself many times over when you use it to sell your products or services

Products

Build a product page for your physical or digital products. Use it to showcase your new book, comic, art, courses, designs, app and more

Services

If you are a consultant, an agency or offer services, you can build a landing page to sell them or to show your business

Businesses

Build a website for your company, online community, personal website, app landing page or other project you’ve been thinking about

What can you build

Use it to build landing pages for your products & services. Almost limitless possibilities

A few examples...

  • Product page for new Ebook

  • Sell digital products

  • Digital Agency Website

  • Promote and sell courses

  • Offer your services

  • Consultant website

  • Company website

  • Sell memberships for online community

  • Personal portafolio

  • App landing page

  • Software as a Service landing page


Simple and Affordable Pricing

Choose a package that fits you

premium package

Get the eBook and tutorials to build the Main, Advanced and Pricing Components

$49 $39 USD

  • Ebook in PDF - 39 Pages

  • 12 Tutorial Videos

  • Free Updates

  • Use on unlimited projects

✨ best value

complete package

Get the eBook and tutorials to build Every Component + Code Snippets Section

$98 $69 USD

  • Ebook in PDF - 59 Pages

  • 21 Tutorial Videos

  • Everything in Premium Package

  • Code Snippets Section

  • Free Updates

  • Use on unlimited projects

code snippets package

Get the eBook and tutorials to build Pricing Components + Code Snippets Section

$59 $49 USD

  • Ebook in PDF - 41 Pages

  • 12 Tutorial Videos

  • Code Snippets Section

  • Free Updates

  • Use on unlimited projects

Ex. VAT. Any applicable tax will be added at checkout

You need a Carrd Pro Plus account to apply some of the tutorials in Build UI. Go to the URL http://try.carrd.co/oscar and get 30% off one Pro upgrade or renewal. I don't get a commission but you get a discount.


Frequently Asked Questions

Who is behind this project?

This is a product by Components UI

Hey! I’m @oscaroarevalo, the creator of Build UI. I’m an industrial engineer, writer and builder of things on the internet. Normally I’m working as a consultant and writing ideas about business development – operations, products, marketing – and personal growth. You can read more about me here

Do I have to know how to code to use this?

No. The Code Snippets are just pieces of code that you can copy and paste in your Carrd project using the Embed element. Every Code Snippet has a detailed video/written tutorial to guide you every step into building it on your Carrd website

Is this for me?

Build UI is for anyone that wants to build a beautiful website in Carrd. Whether you are a professional entrepreneur or someone who wants to start a side project for extra income, Build UI will help you in developing a lading page or website to showcase your new book, comic, art, designs, app, business and more

Is my credit card information secured?

Yes. All transactions are made thru Gumroad

What am I allowed to do with Build UI?

You can use the components in unlimited projects for commercial or personal use. You cannot redistribute, resell, lease, license, sub-license or offer any of the components "as is" to any third party, website or online marketplace. You cannot create derivative products like themes, templates or anything else where you would be repackaging and/or redistributing the components. Read the license here. Please be kind :)

What if I purchased it and I don’t like it?

If you purchase any package and found out you don’t like the material or you can’t find the value in it, just reply with your purchase receipt email within 30 days and I will issue a refund. No questions asked. I want you to be happy with your purchase

Can I buy pre-built Components?

Yes. Go to Components UI. You can also buy templates at Templates UI

I have another question!

No problem. Write me a email at oscar@oscaroarevalo.com

Build beautiful components in your Carrd.co websites

Build UI is a compilation of step-by-step tutorials, videos and code snippets to guide you on how to make pricing tables, badges, dynamic sections, and more into your new or existing Carrd projects

Made with in El Salvador, CA
Published with Components UI

A project by

https://componentsui.com
Built by @oscaroarevalo