AccordionInCard() — ui Function Reference

Architecture documentation for the AccordionInCard() function in accordion-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ AccordionInCard() — ui Function Reference

Dependency Diagram

graph TD
  1ff69f73_c6ed_4055_1e66_e175ea13d1fa["AccordionInCard()"]
  aeea2cc4_46f4_ba87_3e70_fbf4ce4112e9["accordion-example.tsx"]
  1ff69f73_c6ed_4055_1e66_e175ea13d1fa -->|defined in| aeea2cc4_46f4_ba87_3e70_fbf4ce4112e9
  style 1ff69f73_c6ed_4055_1e66_e175ea13d1fa fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/accordion-example.tsx lines 159–293

function AccordionInCard() {
  const items = [
    {
      value: "plans",
      trigger: "What subscription plans do you offer?",
      content: (
        <>
          <p>
            We offer three subscription tiers: Starter ($9/month), Professional
            ($29/month), and Enterprise ($99/month). Each plan includes
            increasing storage limits, API access, priority support, and team
            collaboration features.
          </p>
          <p>
            <a href="#">Annual billing is available</a> with a 20% discount. All
            plans include a 14-day free trial with no credit card required.
          </p>
          <Button size="sm">
            View plans
            <IconPlaceholder
              lucide="ArrowUpRightIcon"
              tabler="IconArrowUpRight"
              hugeicons="ArrowUpRight01Icon"
              phosphor="ArrowUpRightIcon"
              remixicon="RiArrowRightUpLine"
            />
          </Button>
        </>
      ),
    },
    {
      value: "billing",
      trigger: "How does billing work?",
      content: (
        <>
          <p>
            Billing occurs automatically at the start of each billing cycle. We
            accept all major credit cards, PayPal, and ACH transfers for
            enterprise customers.
          </p>
          <p>
            You&apos;ll receive an invoice via email after each payment. You can
            update your payment method or billing information anytime in your
            account settings. Failed payments will trigger automated retry
            attempts and email notifications.
          </p>
        </>
      ),
    },
    {
      value: "upgrade",
      trigger: "Can I upgrade or downgrade my plan?",
      content: (
        <>
          <p>
            Yes, you can change your plan at any time. When upgrading,
            you&apos;ll be charged a prorated amount for the remainder of your
            billing cycle and immediately gain access to new features.
          </p>
          <p>
            When downgrading, the change takes effect at the end of your current
            billing period, and you&apos;ll retain access to premium features
            until then. No refunds are provided for downgrades.
          </p>
        </>
      ),
    },
    {
      value: "cancel",
      trigger: "How do I cancel my subscription?",
      content: (
        <>
          <p>
            You can cancel your subscription anytime from your account settings.
            There are no cancellation fees or penalties. Your access will
            continue until the end of your current billing period.
          </p>
          <p>
            After cancellation, your data is retained for 30 days in case you
            want to reactivate. You can export all your data before or after
            canceling. We&apos;d love to hear your feedback about why