Command Palette

Search for a command to run...

Docs
Feature Slideshow

Feature Slideshow

These components are used to build the features section of the website.

Open in New Tab
Recommended

Individual License - Lifetime Access

$199

one-time payment

Beautifully crafted React + Tailwind CSS + Framer Motion components and templates for your next web project.

What's included:

  • Over 50+ sections — Everything you need to build beautiful landing pages
  • 5+ templates — Templates built with React, Next.js, and TailwindCSS
  • Commercial Use — Use the templates for commercial projects. Re-selling of code is NOT allowed.
  • Perpetual license — You own the templates, forever
  • Lifetime access — Get access to everything available today, plus everything added in the future
  • Lifetime updates — Get access to all future updates for the original purchase price
Open in New Tab
Recommended

Individual License - Lifetime Access

$199

one-time payment

Beautifully crafted React + Tailwind CSS + Framer Motion components and templates for your next web project.

What's included:

  • Over 50+ sections — Everything you need to build beautiful landing pages
  • 5+ templates — Templates built with React, Next.js, and TailwindCSS
  • Commercial Use — Use the templates for commercial projects. Re-selling of code is NOT allowed.
  • Perpetual license — You own the templates, forever
  • Lifetime access — Get access to everything available today, plus everything added in the future
  • Lifetime updates — Get access to all future updates for the original purchase price

Installation

You need to first install the @radix-ui/react-accordion package to get started.

npm install @radix-ui/react-accordion

Tailwind Configuration

Then copy paste the following code into your tailwind.config.ts file.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        "slide-down": "slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1)",
        "slide-up": "slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1)",
      },
      keyframes: {
        "slide-down": {
          from: { height: "0px" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "slide-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0px" },
        },
      },
    },
  },
}

Copy the component into your project