export const title = "Credit card components"
export const description = "Free and open-source React credit card components built for modern applications and websites. These credit cards are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/shared-assets/credit-card",
}

import * as Demos from "@/components/shared-assets/credit-card/credit-card.demo.tsx";

<PreviewAndCode title="Credit card example">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardExample />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard
            type="brand-dark"
            company="Untitled."
            cardNumber="1234 1234 1234 1234"
            cardHolder="OLIVIA RHYE"
            cardExpiration="06/28"
        />
        ```
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this credit card component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add credit-card
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="shared-assets/credit-card" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the credit card components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Customization 

The credit card component has props like `type`, `company`, `cardNumber`, `cardHolder`, and `cardExpiration` that can be used to customize the card.

<PreviewAndCode title="Customization example">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[500px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardCustomization />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard
            type="brand-dark"
            company="BREX"
            cardNumber="5678 9012 3456 7890"
            cardHolder="PEDRO FRANCESCHI"
            cardExpiration="12/28"
        />

        <CreditCard
            type="gradient-strip"
            company="Apple Inc."
            cardNumber="0987 6543 2109 8765"
            cardHolder="TIM COOK"
            cardExpiration="03/29"
        />
        ```
    </TabPanel>
</PreviewAndCode>

<Divider />

## Sizes 

The credit card component has a `width` prop that can be used to set the width of the card. Based on the width, the height will be automatically adjusted to maintain the aspect ratio.

<PreviewAndCode title="Sizes example">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardSizes />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="brand-dark" width={240} />
        <CreditCard type="brand-dark" width={316} />
        <CreditCard type="brand-dark" width={400} />
        ```
    </TabPanel>
</PreviewAndCode>

<Divider />

## Credit card types

Below are examples and variations of the credit card component:

### Transparent {{ tocOnly:true }}

<PreviewAndCode title="Transparent">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardTransparent />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="transparent" />
        ```
    </TabPanel>
</PreviewAndCode>

### Transparent gradient {{ tocOnly:true }}

<PreviewAndCode title="Transparent gradient">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardTransparentGradient />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="transparent-gradient" />
        ```
    </TabPanel>
</PreviewAndCode>

### Brand dark {{ tocOnly:true }}

<PreviewAndCode title="Brand dark">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardBrandDark />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="brand-dark" />
        ```
    </TabPanel>
</PreviewAndCode>

### Brand light {{ tocOnly:true }}

<PreviewAndCode title="Brand light">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardBrandLight />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="brand-light" />
        ```
    </TabPanel>
</PreviewAndCode>

### Gray dark {{ tocOnly:true }}

<PreviewAndCode title="Gray dark">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardGrayDark />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="gray-dark" />
        ```
    </TabPanel>
</PreviewAndCode>

### Gray light {{ tocOnly:true }}

<PreviewAndCode title="Gray light">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardGrayLight />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="gray-light" />
        ```
    </TabPanel>
</PreviewAndCode>

### Transparent strip {{ tocOnly:true }}

<PreviewAndCode title="Transparent strip">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardTransparentStrip />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="transparent-strip" />
        ```
    </TabPanel>
</PreviewAndCode>

### Gray strip {{ tocOnly:true }}

<PreviewAndCode title="Gray strip">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardGrayStrip />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="gray-strip" />
        ```
    </TabPanel>
</PreviewAndCode>

### Gradient strip {{ tocOnly:true }}

<PreviewAndCode title="Gradient strip">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardGradientStrip />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="gradient-strip" />
        ```
    </TabPanel>
</PreviewAndCode>

### Salmon strip {{ tocOnly:true }}

<PreviewAndCode title="Salmon strip">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardSalmonStrip />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="salmon-strip" />
        ```
    </TabPanel>
</PreviewAndCode>

### Gray strip vertical {{ tocOnly:true }}

<PreviewAndCode title="Gray strip vertical">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardGrayStripVertical />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="gray-strip-vertical" />
        ```
    </TabPanel>
</PreviewAndCode>

### Gradient strip vertical {{ tocOnly:true }}

<PreviewAndCode title="Gradient strip vertical">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardGradientStripVertical />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="gradient-strip-vertical" />
        ```
    </TabPanel>
</PreviewAndCode>

### Salmon strip vertical {{ tocOnly:true }}

<PreviewAndCode title="Salmon strip vertical">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CreditCardSalmonStripVertical />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import CreditCard from '@/components/shared-assets/credit-card/credit-card';

        <CreditCard type="salmon-strip-vertical" />
        ```
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "How do I customize the card information?",
            answer: "You can customize card information using props: `company` for the company name, `cardNumber` for the card number, `cardHolder` for the cardholder name, and `cardExpiration` for the expiration date. All props have sensible defaults if not provided.",
        },
        {
            question: "How do I resize the credit card?",
            answer: "You can resize the card using the `width` prop. The component automatically calculates the appropriate height to maintain the correct aspect ratio. The original dimensions are 316px × 190px.",
        },
        {
            question: "Can I change the card network logo?",
            answer: "Currently, the component displays Mastercard logos by default. The logo color automatically adjusts based on the card type - colored logos for light backgrounds and white logos for dark backgrounds.",
        }
    ]}
/>