Design System Hub

Catalog of ready-made
Zero Blocks for Tilda.

Pre-tested responsive components across 5 screens (1200, 960, 640, 480, 320 px) with native interaction runtime. Copy in 1 click and paste straight into Zero Block.

Tilda Ready
✨ SaaS 2026
HeroCTAMetricsAuto Layout5 screens

Hero Section (SaaS / Product)

Modern first screen with accent badge, bold headline, dual CTA buttons, floating metric chips, and subtle backdrop glow.

1200 / 960 / 640 / 480 / 320 px14 layers
Emulator
Auto-Reflow
CardsAuto LayoutStack Reflow5 screens

Feature Cards Grid

3 responsive cards with icons, status pills, descriptions, and CTA links. Automatically reflows into a single column on mobile without vertical collisions.

1200 / 960 / 640 / 480 / 320 px18 layers
Emulator
Interactive
How does import work?
Are five breakpoints supported?
Do I need to write JavaScript?
[accordion]InteractiveZero Code5 screens

Interactive FAQ Accordion

4 expandable questions with [accordion], [c-item], [c-toggle], and [c-content] markers. Expands smoothly upon publishing with native TildEka runtime.

1200 / 960 / 640 / 480 / 320 px22 layers
Emulator
Interactive
PROJECT #01
←
→
[slider]GalleryGestures5 screens

Interactive Project Slider

Full-featured slider with [c-slide] cards, [l-#prev] / [l-#next] controls, [c-dot] indicators, and counter. Supports keyboard and touch gestures.

1200 / 960 / 640 / 480 / 320 px26 layers
Emulator
Native Form
[form]Tilda CRMInputsValidation

Lead Capture Form (Tilda Form)

Native Tilda Form [form] with Name, Phone, Email, Textarea, consent checkbox, and styled submit button. Connects directly to Tilda CRM/Telegram.

1200 / 960 / 640 / 480 / 320 px16 layers
Emulator
High Conversion
PricingBadgesButtons5 screens

Pricing Matrix (3 Plans)

3-tier pricing matrix with highlighted featured plan, feature checklist, billing notes, and primary CTA buttons.

1200 / 960 / 640 / 480 / 320 px24 layers
Emulator

How to paste a ready-made block into Tilda

Every block in the catalog contains a full 5-screen specification ready for clipboard import.

01Click “Copy to Tilda”

The TildEka package with all 5 responsive screens is written to your clipboard.

02Open Zero Block in Tilda

Click the TILDEKA button on the top toolbar of the Zero Block editor.

03“Import package from clipboard”

Tilda grid updates instantly, and layers and interactions align into place.