Resource Card

import { Badge, ResourceCard, ResourceGrid, StatusLine, type LinkComponent } from 'ferry-ui'
import { BookOpen, Globe, LayoutDashboard, Smartphone } from 'lucide-react'

// In an app, the link component of your router opens the page. This one stays on the page.
const DemoLink: LinkComponent = ({ href, onClick, ...props }) => (
  <a
    href={href}
    {...props}
    onClick={(event) => {
      onClick?.(event)
      event.preventDefault()
    }}
  />
)

const PROJECTS = [
  { id: 'web-app', name: 'Web app', icon: <LayoutDashboard />, owner: 'Maya Chen', plan: 'pro' },
  { id: 'mobile-app', name: 'Mobile app', icon: <Smartphone />, owner: 'Jonas Weber', plan: 'pro' },
  { id: 'website', name: 'Website', icon: <Globe />, owner: 'Priya Patel', plan: 'free' },
  { id: 'docs-portal', name: 'Docs portal', icon: <BookOpen />, owner: 'Maya Chen', plan: 'free' },
]

export default function ResourceCardHero() {
  return (
    <ResourceGrid aria-label="Projects">
      {PROJECTS.map((project) => (
        <ResourceCard
          key={project.id}
          name={project.name}
          href={`#${project.id}`}
          linkComponent={DemoLink}
          icon={project.icon}
          subtitle={`Owner: ${project.owner}`}
          badges={
            <Badge font="mono" shape="square">
              {project.plan}
            </Badge>
          }
          footer={<StatusLine tone="success">Project is active</StatusLine>}
        />
      ))}
    </ResourceGrid>
  )
}

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  ResourceCard,
  ResourceGrid,
  toast,
  type LinkComponent,
} from 'ferry-ui'
import { LayoutDashboard, MoreVertical, Smartphone } from 'lucide-react'

// In an app, the link component of your router opens the page. This one stays on the page.
const DemoLink: LinkComponent = ({ href, onClick, ...props }) => (
  <a
    href={href}
    {...props}
    onClick={(event) => {
      onClick?.(event)
      event.preventDefault()
    }}
  />
)

const PROJECTS = [
  { id: 'web-app', name: 'Web app', icon: <LayoutDashboard />, owner: 'Maya Chen' },
  { id: 'mobile-app', name: 'Mobile app', icon: <Smartphone />, owner: 'Jonas Weber' },
]

export default function ResourceCardMenu() {
  return (
    <ResourceGrid aria-label="Projects">
      {PROJECTS.map(({ id, name, icon, owner }) => (
        <ResourceCard
          key={id}
          name={name}
          href={`#${id}`}
          linkComponent={DemoLink}
          icon={icon}
          subtitle={`Owner: ${owner}`}
          menu={
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon-tiny" icon={<MoreVertical />} aria-label={`Actions for ${name}`} />
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-44">
                <DropdownMenuItem onSelect={() => toast(`Renamed: ${name}`)}>Rename</DropdownMenuItem>
                <DropdownMenuItem onSelect={() => toast(`Archived: ${name}`)}>Archive</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          }
        />
      ))}
    </ResourceGrid>
  )
}

import { Button, ResourceCard, ResourceGrid, StatusLine, toast, type LinkComponent } from 'ferry-ui'
import { LayoutDashboard, Smartphone, Users } from 'lucide-react'

// In an app, the link component of your router opens the page. This one stays on the page.
const DemoLink: LinkComponent = ({ href, onClick, ...props }) => (
  <a
    href={href}
    {...props}
    onClick={(event) => {
      onClick?.(event)
      event.preventDefault()
    }}
  />
)

export default function ResourceCardFooter() {
  return (
    <ResourceGrid aria-label="Projects">
      <ResourceCard
        name="Web app"
        href="#web-app"
        linkComponent={DemoLink}
        icon={<LayoutDashboard />}
        footer={
          <>
            <span className="inline-flex items-center gap-1.5 text-[13px] text-foreground-lighter">
              <Users className="size-3.5" aria-hidden="true" />
              12 members
            </span>
            <StatusLine tone="success">Project is active</StatusLine>
          </>
        }
      />
      <ResourceCard
        name="Mobile app"
        href="#mobile-app"
        linkComponent={DemoLink}
        icon={<Smartphone />}
        footer={
          <div className="flex items-center justify-between gap-3">
            <StatusLine tone="destructive">Import failed</StatusLine>
            {/* `relative z-10` puts the button above the link of the card. */}
            <Button size="tiny" className="relative z-10" onClick={() => toast('The import starts again')}>
              Retry
            </Button>
          </div>
        }
      />
    </ResourceGrid>
  )
}

import { Badge, ResourceCard, ResourceGrid, StatusLine } from 'ferry-ui'
import { Archive, FolderKanban } from 'lucide-react'

export default function ResourceCardStatic() {
  return (
    <ResourceGrid aria-label="Archived projects">
      <ResourceCard
        name="Billing portal"
        icon={<FolderKanban />}
        subtitle="Owner: Maya Chen"
        badges={
          <Badge font="mono" shape="square">
            pro
          </Badge>
        }
        footer={<StatusLine tone="neutral">Archived on Mar 4, 2026</StatusLine>}
      />
      <ResourceCard name="Internal wiki" icon={<Archive />} subtitle="Owner: Jonas Weber" />
    </ResourceGrid>
  )
}

import * as React from 'react'
import { Label, ResourceCard, ResourceCardSkeleton, ResourceGrid, StatusLine, Switch } from 'ferry-ui'
import { LayoutDashboard, Smartphone } from 'lucide-react'

export default function ResourceCardLoading() {
  // In an app, `loading` comes from the request that loads the list.
  const [loading, setLoading] = React.useState(true)

  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Switch id="projects-loading" checked={loading} onCheckedChange={setLoading} />
        <Label htmlFor="projects-loading">Loading</Label>
      </div>
      <ResourceGrid aria-label="Projects" aria-busy={loading}>
        {loading ? (
          <>
            <ResourceCardSkeleton />
            <ResourceCardSkeleton />
          </>
        ) : (
          <>
            <ResourceCard
              name="Web app"
              icon={<LayoutDashboard />}
              subtitle="Owner: Maya Chen"
              footer={<StatusLine tone="success">Project is active</StatusLine>}
            />
            <ResourceCard
              name="Mobile app"
              icon={<Smartphone />}
              subtitle="Owner: Jonas Weber"
              footer={<StatusLine tone="success">Project is active</StatusLine>}
            />
          </>
        )}
      </ResourceGrid>
    </div>
  )
}

import { ResourceCard, ResourceGrid, StatusLine } from 'ferry-ui'
import { Calendar, CreditCard, HardDrive, Mail, MessageSquare, Webhook } from 'lucide-react'

const INTEGRATIONS = [
  { name: 'Email', icon: <Mail />, connected: true },
  { name: 'Calendar', icon: <Calendar />, connected: true },
  { name: 'Webhooks', icon: <Webhook />, connected: true },
  { name: 'Payments', icon: <CreditCard />, connected: false },
  { name: 'Storage', icon: <HardDrive />, connected: true },
  { name: 'Chat', icon: <MessageSquare />, connected: false },
]

export default function ResourceCardMinWidth() {
  return (
    <ResourceGrid aria-label="Integrations" minItemWidth={160}>
      {INTEGRATIONS.map((integration) => (
        <ResourceCard
          key={integration.name}
          name={integration.name}
          icon={integration.icon}
          footer={
            <StatusLine tone={integration.connected ? 'success' : 'neutral'}>
              {integration.connected ? 'Connected' : 'Not connected'}
            </StatusLine>
          }
        />
      ))}
    </ResourceGrid>
  )
}

import { Badge, ResourceCard, StatusLine, type LinkComponent } from 'ferry-ui'
import { LayoutDashboard } from 'lucide-react'

// In an app, the link component of your router opens the page. This one stays on the page.
const DemoLink: LinkComponent = ({ href, onClick, ...props }) => (
  <a
    href={href}
    {...props}
    onClick={(event) => {
      onClick?.(event)
      event.preventDefault()
    }}
  />
)

export default function ResourceCardStandalone() {
  return (
    <ResourceCard
      as="div"
      className="w-full max-w-xs"
      name="Web app"
      href="#web-app"
      linkComponent={DemoLink}
      icon={<LayoutDashboard />}
      subtitle="Owner: Maya Chen"
      badges={
        <Badge font="mono" shape="square">
          pro
        </Badge>
      }
      footer={<StatusLine tone="success">Project is active</StatusLine>}
    />
  )
}