Landing pages
A landing page is a sequence of sections, each with one job. Start from a hero that says what the product does, prove it with features and social proof, answer objections, then ask once, clearly.
npx shadcn@latest add https://ui.tealmac.com/r/marquee.json https://ui.tealmac.com/r/number-ticker.json https://ui.tealmac.com/r/border-beam.jsonPro flagship
ProThe whole SaaS product around your landing page: marketing site, sign-in, onboarding, dashboard, billing and settings, wired together.
Components
Free, MIT licensed, one install each.
Marquee
ComponentFreeAn infinite scrolling component that can be used to display text, images, or videos.
Number Ticker
ComponentFreeCounts up or down to a target number when it scrolls into view.
Border Beam
ComponentFreeAn animated beam of light which travels along the border of its container.
Browser Frame
ComponentFreeA Safari-style window with traffic lights, a padlocked address field and optional tabs. Children render as the page, at natural size or laid out at desktop width and scaled to fit.
Blocks
Whole sections, composed from the components.
Split hero with product preview
BlockProHeadline, proof points and two actions beside a product window built in markup.
Centered hero with announcement
BlockProA centered headline under a release announcement, with a full-width shared inbox built in markup below.
Bento feature grid
BlockProFive features in a mixed-size grid, each tile carrying a small working view of the product.
Logo cloud: marquee or grid
BlockFreeCustomer wordmarks as an endlessly scrolling row with faded edges, or a static grid with hairline dividers. Marks brighten on hover.
Masonry wall of short quotes
BlockProA dense, uneven wall of short customer quotes with an overall rating summary.
Three-tier pricing with billing toggle
BlockProThree plans side by side with a monthly or annual switch that updates every price.
Two-column FAQ with accordion
BlockProA sticky introduction with a contact link beside an accordion of common questions.
Call-to-action band
BlockProA full-width closing band with a direct headline, one sentence of reassurance and two actions.
Multi-column footer with newsletter
BlockProBrand blurb and a newsletter field beside four link columns, with legal links and a status line below.
Templates
Complete pages to start from.
SaaS landing page
TemplateProA motion-rich marketing page with an animated hero, live feature bento, and stats.
Beacon launch site
TemplateFreeA four-page developer-tool site built entirely from Pro blocks: a hero with floating deploy cards, live stats and a scrolling product tour, plans with a yearly switch and a full comparison, a release timeline and a validated contact form.
Northwind B2B SaaS site
TemplateFreeA warm, editorial five-page site for a finance product: serif headlines on cream paper, an interactive product tour with numbered pins, pricing with a billing toggle, customer stories, an about page and a validated demo request form.
Pricing page
TemplateProThree-tier pricing with a monthly/annual toggle and a featured plan.
Guidance
One idea per section
Give each section a single heading and a single action. If a section needs two buttons, it is probably two sections.
Keep the hero fast
The hero is your largest paint. Use a static image or a light effect above the fold and lazy-load heavy motion and 3D below it.
Motion with a reason
Animate to draw the eye to what changed, and stop everything for people who ask for reduced motion. Every animated component here already does.