How do I install Ribbon Gradient Shader?

Run npx shadcn@latest add @aceternity/ribbon-gradient-shader in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Ribbon Gradient Shader responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Ribbon Gradient Shader is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Aceternity UI

Shaders

1 / 4

Ribbon Gradient Shader

A hero with an animated WebGL ribbon gradient that sweeps behind a collapsible issue table. Works in light and dark mode.

NewPull request status on every issue

Plan the work. Watch it ship.

Loopwell keeps issues, pull requests, and due dates in one list. Your team sees what moves without a status meeting.

Start free for 30 days Watch a 2-min tour

Mobile/Cycle 14

Sync drafts across devicesPull request#1482, openSync3 pointsOct 9Assigned to Ana Ruiz, Theo Park
Crash when uploading files over 2 GBPull request#1490, draftBug2 pointsOct 6Assigned to Kenji Mori
Offline mode for shared docsFeature5 pointsOct 17Assigned to Lena Fischer, Omar Haddad, Ana Ruiz

Keyboard shortcuts for the command barPull request#1471, openEditor1 pointOct 8Assigned to Theo Park
Cut Android cold start by 40%Pull request#1476, mergedPerformance3 pointsOct 7Assigned to Kenji Mori, Lena Fischer

Export reports as CSVFeature2 pointsOct 21
Check color contrast in the dark themeDesign1 pointOct 23Assigned to Omar Haddad

Used by 1,200 product teams, from two-person startups to 400-engineer orgs.

A band of slow-moving color cuts across the page behind a product preview. The preview is an issue table with groups you can open and close, so the hero shows real work moving instead of a static screenshot.

More from Shaders

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Lines Gradient Shader Dot Distortion Shader Spotlight Shader Hero With Fluid Gradient And Planner Shaders Backgrounds Hero Sections

About this block

Aceternity UI

Access an ever-growing collection of premium, meticulously crafted templates and Component Blocks.

A product by Aceternity

Building in public at @mannupaaji