# Beste UI > Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade. Markdown rendition of https://ui.beste.co/block/blog50. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`. Last updated: 2026-07-31 Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json --- 1. / 2. [Blocks](/blocks) 3. / 4. [Blog](/blocks/blog) 5. / 6. Magazine Mosaic # Magazine Mosaic[PRO](/pricing) A six-slot magazine mosaic with a parenthetical eyebrow and a large heading, pairing a dominant two-by-two tile with a tall tile, wide tiles, and unit tiles that each caption their photo over a graded scrim. ViewCodeDocs Base UI ![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/blog50` ## Blog50: Magazine Mosaic A blog listing section that lays articles into a fixed magazine mosaic of six tiles: a dominant two-by-two tile, a tall tile, two wide tiles, and two unit tiles, each captioning its own photo over a graded scrim. The tile shape belongs to the position in the grid, so the mosaic keeps its rhythm whatever the copy length. Upgrade to Pro Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first. [Upgrade NowUpgrade Now](/pricing) ### Installation Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account). **Radix flavor** bashCopy ``` npx shadcn add "https://ui.beste.co/r/blog50?email=YOUR_EMAIL&license_key=YOUR_KEY" ``` **Base UI flavor** bashCopy ``` npx shadcn add "https://ui.beste.co/r-base/blog50?email=YOUR_EMAIL&license_key=YOUR_KEY" ``` This installs the block to `components/beste/block/blog50.tsx` and its dependencies, including the `Badge7` component it renders. ### Quick start The installed file exports `blog50Demo` alongside the block: the exact props behind the preview above. Spread it to get a working mosaic in one line. tsxCopy ``` import { Blog50, blog50Demo } from "@/components/beste/block/blog50"; export default function Page() { return ; } ``` Then replace the demo with your own props. Written out, a trimmed setup looks like this: tsxCopy ``` import { Blog50 } from "@/components/beste/block/blog50"; export default function Page() { return ( ); } ``` ### Props | Prop | Type | Default | Description | | ----------- | ----------- | ------- | --------------------------------------------------- | | badge | Badge | – | Badge7 parenthetical eyebrow above the heading | | heading | string | – | Section heading | | description | string | – | Muted supporting paragraph under the heading | | items | Article\[\] | \[\] | Articles placed into the mosaic tiles, in order | | className | string | – | Extra classes merged onto the outer section element | tsCopy ``` type Badge = { label: string; }; type Article = { image: ArticleImage; category: string; title: string; date: string; author: Author; href: string; }; type ArticleImage = { src: string; alt: string; }; type Author = { name: string; title?: string; avatar?: { src: string; alt: string }; href?: string; }; ``` Only `author.name` is rendered, in the tile byline. The optional title, avatar, and href fields on the author exist for shape parity with the other blog blocks and are not displayed here. ### Behavior notes * Tile shape is driven by position, not by data: item 0 gets a `col-span-2 row-span-2` dominant tile with the largest title, items 1, 4, and 5 get wide `col-span-2` tiles, and items 2 and 3 get single cells. The six spans tile a four-column, three-row grid exactly (4 + 2 + 1 + 1 + 2 + 2 = 12 cells), so the mosaic never leaves a gap at the end of the last row. * Six items is the intended count. A seventh and beyond fall back to a single-cell tile, which still lays out but breaks the exact tiling, and fewer than six leaves the trailing cells empty. * Titles are clamped per position so a long headline cannot overflow its tile: three lines on the dominant and unit tiles, two on the wide ones. The caption's kicker and byline are single truncated lines. * The grid is two columns on mobile and four from `md` up, with fixed `11rem` rows growing to `13rem`. Captions sit over a top-to-bottom scrim rather than a flat wash, so the type stays readable against a bright photo without dulling the image. * Every tile is a Next.js `Link` wrapping the whole tile, with a visible focus ring. There is no state, no timer, and no click handler; photos carry no hover treatment, so the block renders identically on the server and the client. ## More Blog blocks [View all Blog](/blocks/blog) [](/block/blog56) PRO blog56 ### Category Mosaic A six-slot photo mosaic under a parenthetical eyebrow and a large heading, where every tile is bound to one newsroom category so the grid doubles as a section map, with a ruled legend naming the sections above it. [](/block/blog51) PRO blog51 ### Mixed Tile Mosaic A six-slot mosaic under a parenthetical eyebrow and a large heading, mixing full-bleed photo tiles with flat text tiles on muted and inverted surfaces, where the treatment belongs to the slot and every tile advances one story through a larger article pool on a timer, staggered 100 milliseconds apart so the refresh reads as a wave running left to right, pausing on hover, focus, tabs, and reduced motion. [](/block/blog43) PRO blog43 ### Editorial Article Grid A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a category label, a title, an excerpt, and byline. [](/block/blog27) PRO blog27 ### Newspaper Editorial Style Classic newspaper layout with serif fonts and bordered headline. Large main story on left, stacked secondary stories on right with dividers. [](/block/blog62) PRO blog62 ### Newsletter Panel With Back Issues A blog section splitting a bordered container between the newsletter pitch with a cadence line on a hairline and an image tile holding a working subscribe row, over three linked back issues. [](/block/blog52) PRO blog52 ### Newsroom Masonry A CSS-columns masonry of linked newsroom cards under a parenthetical eyebrow and a large heading, where the image aspect ratio cycles by position so the wall keeps an uneven, magazine-like rhythm. ## Ship the interface, keep the code. New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight. [Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing) ### Library * [Blocks](/blocks) * [Pages](/pages) * [Pieces](/pieces) * [Components](/components) * [Search](/search) ### Learn * [Docs](/docs) * [AI & MCP](/docs/mcp) * [Blog](/blog) * [Free tools](/tools) * [What's new?](/changelog) * [Website Builder](https://beste.co) ### More * [Pricing](/pricing) * [Referrals](/referrals) * [License](/license) * [GitHub](https://github.com/beste-co/beste-ui) ### Shadcn Blocks * [Shadcn Hero Blocks](/blocks/hero) * [Shadcn Feature Blocks](/blocks/feature) * [Shadcn Pricing Blocks](/blocks/pricing) * [Shadcn CTA Blocks](/blocks/cta) * [Shadcn FAQ Blocks](/blocks/faq) * [Shadcn About Blocks](/blocks/about) * [Shadcn Stats Blocks](/blocks/stats) * [Shadcn Footer Blocks](/blocks/footer) * [Shadcn Navigation Blocks](/blocks/navigation) * [Shadcn Auth Blocks](/blocks/auth) * [Shadcn Ecommerce Blocks](/blocks/ecommerce) * [Shadcn Portfolio Blocks](/blocks/portfolio) * [Shadcn Showcase Blocks](/blocks/showcase) * [Shadcn Careers Blocks](/blocks/careers) * [Shadcn Onboarding Blocks](/blocks/onboarding) * [Shadcn Coming Soon Blocks](/blocks/coming-soon) * [Shadcn Post Blocks](/blocks/post) * [Shadcn Legal Blocks](/blocks/legal) * [Shadcn Workflow Blocks](/blocks/workflow) * [Shadcn News Blocks](/blocks/news) © 2026, [Beste](https://beste.co). All rights reserved.