export const title = "Illustration components"
export const description = "Free and open-source React illustration components built for modern applications and websites. These illustrations are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/blob/main/components/shared-assets/illustrations/index.tsx",
}

import { Illustration } from "@/components/shared-assets/illustrations";

<PreviewAndCode title="Illustration example">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="cloud" size="lg" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="cloud" size="lg" />
        ```
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this illustrations 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 illustrations
        ```
    </TabPanel>

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

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

<Divider />

## Illustration examples

Below are examples and variations of this illustration component:

### Box sm {{ tocOnly:true }}

<PreviewAndCode title="Box sm">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="box" size="sm" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="box" size="sm" />
        ```
    </TabPanel>
</PreviewAndCode>

### Box md {{ tocOnly:true }}

<PreviewAndCode title="Box md">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="box" size="md" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="box" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>

### Box lg {{ tocOnly:true }}

<PreviewAndCode title="Box lg">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="box" size="lg" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="box" size="lg" />
        ```
    </TabPanel>
</PreviewAndCode>

### Cloud sm {{ tocOnly:true }}

<PreviewAndCode title="Cloud sm">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="cloud" size="sm" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="cloud" size="sm" />
        ```
    </TabPanel>
</PreviewAndCode>

### Cloud md {{ tocOnly:true }}

<PreviewAndCode title="Cloud md">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="cloud" size="md" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="cloud" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>

### Cloud lg {{ tocOnly:true }}

<PreviewAndCode title="Cloud lg">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="cloud" size="lg" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="cloud" size="lg" />
        ```
    </TabPanel>
</PreviewAndCode>

### Credit card sm {{ tocOnly:true }}

<PreviewAndCode title="Credit card sm">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="credit-card" size="sm" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="credit-card" size="sm" />
        ```
    </TabPanel>
</PreviewAndCode>

### Credit card md {{ tocOnly:true }}

<PreviewAndCode title="Credit card md">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="credit-card" size="md" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="credit-card" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>

### Credit card lg {{ tocOnly:true }}

<PreviewAndCode title="Credit card lg">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="credit-card" size="lg" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="credit-card" size="lg" />
        ```
    </TabPanel>
</PreviewAndCode>

### Documents sm {{ tocOnly:true }}

<PreviewAndCode title="Documents sm">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="documents" size="sm" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="documents" size="sm" />
        ```
    </TabPanel>
</PreviewAndCode>

### Documents md {{ tocOnly:true }}

<PreviewAndCode title="Documents md">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="documents" size="md" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="documents" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>

### Documents lg {{ tocOnly:true }}

<PreviewAndCode title="Documents lg">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <Illustration type="documents" size="lg" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { Illustration } from "@/components/shared-assets/illustrations";

        <Illustration type="documents" size="lg" />
        ```
    </TabPanel>
</PreviewAndCode>