accordion-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-example",
  "title": "Accordion",
  "registryDependencies": [
    "accordion",
    "button",
    "card",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-maia/examples/accordion-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-maia/ui/accordion\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}