How do I install Slider Illustration?

Run npx shadcn@latest add @aceternity/slider-illustration 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 Slider Illustration 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?

Slider Illustration 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.

Illustrations

2 / 22

Slider Illustration

Short pricing copy with an inline brand chip, soft text highlights, and an interactive slider that shows a floating image preview while you drag across segments.

Select your plan based on the number of seats or tokens used per person

We know that can be expensive, that's why we are here.

Drop it beside a plan or usage explainer when you want the control to feel concrete: people read the line, nudge the track, and the preview swaps to match the tier without leaving the paragraph.

Works in light and dark; optional segment images let you mirror real product shots or personas.

More from Illustrations

Included with All-Access

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

Get All-Access

Explore more

Inline Icon Illustration Flipping Images With Bar Text Highlight Illustration Illustrations

About this block

Drop it beside a plan or usage explainer when you want the control to feel concrete: people read the line, nudge the track, and the preview swaps to match the tier without leaving the paragraph.

Works in light and dark; optional segment images let you mirror real product shots or personas.