export const title = "Featured icon components"
export const description = "Free and open-source React featured icon components built for modern applications and websites. These featured icons are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/foundations/featured-icon",
}

import * as Demos from "@/components/foundations/featured-icon/featured-icon.demo.tsx";

<PreviewAndCode title="Featured icon example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DefaultDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { CheckCircle } from "@untitledui/icons";
        import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";

        <FeaturedIcon color="brand" icon={CheckCircle} theme="light" size="lg" />
        <FeaturedIcon color="brand" icon={CheckCircle} theme="gradient" size="lg" />
        <FeaturedIcon color="brand" icon={CheckCircle} theme="dark" size="lg" />
        <FeaturedIcon color="gray" icon={CheckCircle} theme="modern" size="lg" />
        <FeaturedIcon color="gray" icon={CheckCircle} theme="modern-neue" size="lg" />
        <FeaturedIcon color="brand" icon={CheckCircle} theme="outline" size="lg" />
        ```
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

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

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

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

<Divider />

## Featured icon examples

Below are examples and variations of this featured icon component:

### Light {{ tocOnly:true }}

<PreviewAndCode title="Light">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.LightDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { CheckCircle } from "@untitledui/icons";
        import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";

        <FeaturedIcon color="brand" icon={CheckCircle} theme="light" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>

### Gradient {{ tocOnly:true }}

<PreviewAndCode title="Gradient">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.GradientDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { CheckCircle } from "@untitledui/icons";
        import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";

        <FeaturedIcon color="brand" icon={CheckCircle} theme="gradient" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>

### Dark {{ tocOnly:true }}

<PreviewAndCode title="Dark">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DarkDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { CheckCircle } from "@untitledui/icons";
        import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";

        <FeaturedIcon color="brand" icon={CheckCircle} theme="dark" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>

### Outline {{ tocOnly:true }}

<PreviewAndCode title="Outline">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.OutlineDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { CheckCircle } from "@untitledui/icons";
        import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";

        <FeaturedIcon color="brand" icon={CheckCircle} theme="outline" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>

### Modern {{ tocOnly:true }}

<PreviewAndCode title="Modern">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ModernDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { CheckCircle } from "@untitledui/icons";
        import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";

        <FeaturedIcon color="brand" icon={CheckCircle} theme="modern" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>

### Modern neue {{ tocOnly:true }}

<PreviewAndCode title="Modern neue">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ModernNeueDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { CheckCircle } from "@untitledui/icons";
        import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";

        <FeaturedIcon color="brand" icon={CheckCircle} theme="modern-neue" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>