Contentlayer

Click me!

slug: click-me

Accordion

Google Maps

About Accordion

About-Index

About-Index

Add the following animations to your tailwind.config.js file:

Accordion

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" }
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" }
        }
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out"
      }
    }
  }
};

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from "@/components/ui/accordion";
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Change me!

When you change a source file, Contentlayer automatically updates the content cache, which prompts Next.js to reload the content on screen.

example

Click me!

Blog posts have their own pages. The content source is a markdown file, parsed to HTML by Contentlayer.

Home!

Home

What is Contentlayer?

Contentlayer makes working with content easy. It is a content preprocessor that validates and transforms your content into type-safe JSON you can easily import into your application.

Blog posts have their own pages. The content source is a markdown file, parsed to HTML by Contentlayer.