Components and templates
Build a piece once,use it everywhere.
Components are the building blocks: a hero, a price table, a gallery, a contact form — HTML, CSS and JavaScript with a declared data structure. Templates are the frame around the page: header, footer, fonts and the code every page shares. Between them, they are why the fortieth page looks like the first.
The library.
The Components window is a library, sorted into main and secondary categories, with a recently used shelf and a search. Find the piece you want and drag it onto the page in the preview; it lands as a block with its default content, ready to fill in.
Each component has settings that decide how it may be used. Active or not. Read-only, so the one everybody depends on cannot be edited by accident. Prevent cloning, for a component that should exist exactly once. And clone, for everything else — the quickest way to make a variant without disturbing the original.
Because blocks point at components, improving a component improves every block built from it. Fix the spacing on a card once and it is fixed on every page it appears on.
- 1HeadersHero with image · Hero with video · Split hero
- 2ContentText and image · Feature cards · FAQ
- 3CommercePrice table · Product grid
- ·Recently usedFeature cards, dragged onto "Services" a minute ago.
- 4Price tableRead-only · prevent cloning. The one the whole team relies on.
Invented libraryDrag onto the preview
Inside a component
Code, a structure,
and default data.
Three parts, each with a clear job, and one of them is what makes the block's form appear.
HTML, CSS, JavaScript
Written in a proper code editor with syntax highlighting and a fullscreen mode, one tab each. It is ordinary front-end code; there is no proprietary language to learn first.
Data structure
A JSON description of the fields the component takes — texts, images, lists, colours. castomUI reads it and generates the settings form every block of this component uses.
Default data
The content a fresh block starts with, validated against the structure, so a component dragged onto a page never arrives empty or broken.
Draw it properly once.
Build from the drawing after that.
Generate or change a component with AI.
Generate a component with AI from a description of what it should be and do. The part that makes the difference is context, and you choose it with checkboxes: the project information, the project's CSS and JavaScript, its pages, the template's blocks, CSS, JS and fonts, and the current page's information and blocks. A component generated with the template's fonts and styles in view looks like it belongs; one generated from a sentence alone looks like a stock photo of a component.
Change a component with AI works the same way on something that already exists — "make the cards stack on narrow screens", "add an optional badge field" — and the result is the same three parts you can open and read: code, structure, default data.
A block can also ask for its component to be regenerated, or for a private clone of it, when one page needs something the rest should not have. That is covered on Pages and blocks.
Templates:
the frame every page sits in.
A template holds the shared blocks — header, footer, a cookie notice, whatever repeats — in drag order, and the code every page needs: CSS, JavaScript and HTML, each for HEAD or BODY.
Its appearance sets a primary and a secondary font from a list that includes Inter, Roboto, Open Sans, Lato, Montserrat, Oswald, Poppins, Raleway, Outfit, Lexend, Playfair Display, Abril Fatface and Cabin.
A project can have more than one template — a main one, a landing-page one without navigation, a print-friendly one — and pages choose theirs in page details. Clone a template to start a variant. Any page can leave out the template header or footer when it needs to stand alone.
- 1HeaderLogo, menu "Top", language switcher.
- 2FooterContact details from global variables.
- 3FontsPrimary Outfit · secondary Inter.
- 4HEADBrand CSS, one analytics snippet.
- ·Template "Landing"Cloned from Main. No header, same fonts.
Invented examplePages pick their template
Project level
Code that belongs to the whole site.
Additional code
Project settings hold HTML for HEAD, HTML for BODY, base CSS and JavaScript, in the same code editor with fullscreen. The place for the verification tag, the chat widget, the rule every page should follow.
Base CSS by AI
Generate the project's base CSS with AI — typography, spacing, colours, the defaults every component inherits — then read it and keep what you agree with. It is CSS; you can edit every line.
Who should touch what.
The split is deliberate. Components and templates are where somebody who writes front-end code does their work. Blocks are where everybody else does theirs. A designer can refine the price table on a Tuesday without asking anyone to stop editing prices, and the editor filling in prices cannot misplace a closing tag because there is no tag in front of them.
Read-only components and prevented cloning exist for the moment a project has more than two people in it — see Collaboration for roles.
From experience: every project eventually grows a component called "Hero copy 3 final". Cloning is cheap and names are free. Rename it now, while you still remember what was different.
Every window,
one website.
Open the editor and arrange them the way the job needs.
Open castomUI See pricing