What you can do
You already opened a widget from Widgets and landed in the composer. Picture Maya's homepage hero on the Production Default Widget. The canvas is empty. This page is what you can drag from the RuleCMS set.
Two everyday jobs:
- Build the hero from Text and Image. Open Components, drop Text for the headline and Image for the photo. Drop a second Text under the photo and restyle it as a caption. There is no Heading component and no Caption component — a heading, a caption, and a button label are all the same Text with different settings.
- Add a features band under the hero. Drag a List for the three benefits, an Icon tick beside a line, and a Button for "Start free trial". Same palette, same Modify drawer.
The same cards cover a lot of other everyday work:
- Video. A product demo or a short looping clip, after you upload under Videos.
- Accordion. An FAQ — one card per question, stacked in a column.
- Embed. A YouTube clip, a map, or a Calendly booking page inside the hero section.
- Custom. A slot for something your developer already built in the website — a booking form, a calculator — not a finished control of its own.
How these components think
RuleCMS ships a small set of general pieces, not a hundred specialised blocks. The component holds what it is — the words, the picture, the symbol. Selected Column and Entire Row do the layout: spacing, size, colour, typography, how columns sit together.
That split is the idea you must not get wrong. Click Text and Selected Component shows Content Text and Enclosing Tag. Click Image and those settings are gone — an image has no words to set. Looking for font size on the heading? That lives under Selected Column, then Typography, not on Text itself.
Each component has only its own settings. The settings listed under Text are the ones a text component actually offers, and the same for Image. That is why you will not find Content Text under Image.
Drag your first components
You do this after Edit Widget or Create Widget — the same landing the composer guide already walked. After Get Started you are in Production, looking at the Default Widget.
- Open the organization → team → project → environment you want to work in. Find the orange Widgets card, View Widgets, then the widget row. Edit Widget opens the composer.
- On the left, stay on the Components tab. The first library panel is already open — usually Base Elements. Drag Text onto the empty canvas. Drag Image next to it, or below it to start a second row.
- Click the Text. The Modify drawer opens. Selected Component is the copy — Content Text and Enclosing Tag. Selected Column is the box — Typography, padding, width. Entire Row is how the columns sit together.
- Type the hero heading. Set Enclosing Tag to a heading. Click the Image and pick a photo with Select Image. Drag a second Text under the photo, type a caption, and restyle it smaller under Selected Column → Typography. There is no Save button in the drawer — the composer writes the draft as you go. That is a safe stop.
Every card RuleCMS ships is in the table below. Open a row for what that component does and the settings it owns. New cards appear here when they land on the palette.
| Component | What it is for | Settings |
|---|---|---|
| Text | Words on the page — a heading, a paragraph, a label, or a button caption. | 4 |
| Image | A picture, delivered and resized automatically through Cloudinary so it loads fast on every device. | 8 |
| Video | A video from your team's library, converted and resized automatically so it plays on every browser. | 11 |
| Icon | A small line symbol — a tick, an arrow, a bin — drawn in the surrounding text colour. | 1 |
| Button | A call to action — the thing on the page you want a visitor to click. | 6 |
| Divider | A horizontal line marking where one part of the page ends and the next begins. | 2 |
| Embed | A YouTube or Vimeo video, a Google map, or a Calendly booking page, shown inside your own. | 4 |
| List | A bulleted or numbered list — features, steps, benefits, anything that comes in items. | 7 |
| Accordion | A line a reader clicks to reveal more — a question and its answer, a section that starts collapsed, a "show more". | 6 |
| Custom Component | A slot for a component your developer built — you type the name they registered and fill in the settings it expects. | 2 |
What to read next
This page is the story and the first walkthrough. Each card, the column and row settings, and the other ways to get a component onto the palette live on the pages below.
- The page for each component — open any row in the table above. Start with Text if you just dragged the headline.
- Attribute Reference — Spacing, size, colour, borders, typography, and row layout. Those belong to the column and the row, not to a component.
- The Composer — The palette, the canvas, and the Modify drawer — including Filters when a library looks missing.
- Custom Component — The palette card says Custom. You type the name your developer registered; the live site fills the slot.
- Mount Your Own Components — How a developer registers that name on
RuleCMSWidget. - Component Libraries — Bringing your own React components into RuleCMS as first-class palette cards.
How this fits
These are the built-in palette cards. Every team has them from the moment it is created — there is nothing to install, enable, or pay extra for. They are not a team library, and they are not a mount. Those are different doors.
A component library is your team's own React components, enabled as real palette cards with a preview. They appear alongside these. They are not documented here, because they are not ours — if a setting on one of them is unclear, ask whoever maintains that library.
Custom is a slot for a component that already lives in your website. Your developer registers a name; you type it. In the editor you will only ever see a dashed box. That is expected. Embed is a different card again — YouTube, Vimeo, a map, or Calendly, not your own code.
A developer on your team may also care where the built-in cards live. They are not compiled into the RuleCMS application. They ship in @rulecms/source-components-react, published on npm: www.npmjs.com/package/@rulecms/source-components-react. The list above can grow when that package is upgraded, and the same components can be used outside the composer. You do not need any of that to drag Text onto the hero.