shadimage
designali
exampleaccordion-06source: ok · hit

Accordion 06

Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations.

npx shadcn add "https://designali.com/r/accordion-06.json"
free

Where it goes

faq

Interaction

accordion

Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.

Files1 · source cached 10/9/2026, 10:19:53 PM

registry/designali/examples/accordion/accordion-06.tsx
"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@workspace/ui/components/accordion"

export default function FAQs() {
  const faqItems = [
    {
      id: "item-1",
      question: "How fast will I receive my designs?",
      answer:
        "Most design requests are completed within 24–48 hours. Larger or more complex requests may take longer, but I provide daily progress updates so you always know what’s happening.",
    },
    {
      id: "item-2",
      question: "Who will be working on my designs?",
      answer:
        "You’ll work directly with me, Ali — the founder and sole designer. I don’t outsource or use a team, so every design is personally crafted with full attention.",
    },
    {
      id: "item-3",
      question: "What type of design work do you offer?",
      answer:
        "I work across all kinds of design, including branding, UI/UX, social media creatives, marketing designs, and website visuals.",
    },
    {
      id: "item-4",
      question: "Is there a limit to how many requests I can make?",
      answer:
        "There’s no limit on total requests. Depending on your plan, I work on a fixed number of active requests at a time. Once one is done, the next begins.",
    },
    {
      id: "item-5",
      question: "Do you offer unlimited revisions?",
      answer:
        "Yes. Unlimited revisions are included. I’ll keep refining the design until you’re fully satisfied.",
    },
    {
      id: "item-6",
      question: "How do you handle large or complex projects?",
      answer:
        "Large projects are broken into smaller tasks or phases to ensure quality, clarity, and timely delivery.",
    },
    {
      id: "item-7",
      question: "How will I receive updates on my work?",
      answer:
        "I share daily updates on what was completed that day, so you’re always aware of progress.",
    },
    {
      id: "item-8",
      question: "How do we communicate?",
      answer:
        "For smooth and fast communication, I’m available on WhatsApp. Other tools can also be used if preferred.",
    },
    {
      id: "item-9",
      question: "How do I submit design requests?",
      answer:
        "You can submit requests through WhatsApp, Figma, Google Docs, Notion, Trello, or Loom — whatever is easiest for you.",
    },
    {
      id: "item-10",
      question: "What if I don’t like the design?",
      answer:
        "That’s completely fine. We’ll revise it until it matches your vision. Feedback is a core part of the process.",
    },
  ]

  return (
    <div className="border">
      <Accordion defaultValue={["item-7"]} className="-mb-1 w-sm md:w-xl">
        {faqItems.map((item) => (
          <AccordionItem
            key={item.id}
            value={item.id}
            className="space-y-1 border-none"
          >
            <AccordionTrigger className="group flex w-full justify-end py-0 hover:no-underline [&_svg]:hidden">
              <div className="max-w-[80%] cursor-pointer bg-primary px-4 py-3 text-left text-base text-primary-foreground transition">
                {item.question}
              </div>
            </AccordionTrigger>

            <AccordionContent className="flex justify-start">
              <div className="max-w-[80%] bg-muted px-4 py-3 text-base text-muted-foreground">
                {item.answer}
              </div>
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

More from designali

Browse all components in this library →