Magazine template
An editorial magazine template with featured stories, a visual index, and an issue archive.
Loading component source...
Installation
pnpm dlx shadcn@latest add mox/mox-ui/magazine-templateRun this command from your project directory to add the component and its dependencies.
- 1
Install the packages
pnpm add motion lucide-react clsx tailwind-merge - 2
Add the utility file
lib/utils.tsimport { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs));} - 3
Copy and paste the code into your project
Loading source… - 4
Update the import paths to match your project
Point
@/lib/utilsto your utility file if your path aliases differ.
Usage
app/page.tsx
import MagazineTemplate from "@/components/ui/magazine-template";
export default function Page() { return <MagazineTemplate />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
onSubscribe | (email: string) => void | Promise<void> | Default: - | Submits an email to your newsletter provider. Omit to keep submission disabled. |
className | string | Default: - | Extra classes merged onto the root element. |
Hover or focus a story to reveal a floating preview. Search by title or category. Use the navigation links to jump between sections, or open the menu on narrow screens.
Credits and license
Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.
- Free to use and modify in both personal and commercial projects.
- Attribution to Mox UI is appreciated when using a component.
- Please don't resell the components as your own kit.