How do I install the Cover component?

You can install the Cover component using the shadcn CLI: npx shadcn@latest add "https://ui.nyxhora.com/r/cover.json". Alternatively, copy the component code directly from the documentation.

Is the Cover component accessible?

Yes, the Cover component is built with accessibility in mind using Radix UI primitives. It supports keyboard navigation, screen readers, and follows WCAG guidelines.

Can I customize the Cover component?

Absolutely! The Cover component is fully customizable using Tailwind CSS classes. You can modify colors, sizes, animations, and more by editing the component code or passing custom className props.

Does the Cover component work with Next.js?

Yes, all Nyxhora UI components including Cover are fully compatible with Next.js 14+ (including Next.js 15), supporting both the App Router and Pages Router.

Cover

A flexible cover component for displaying featured images with optional action buttons for changing or removing the cover.

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/cover.json

Usage

tsx

15 lines

import { Cover } from "@/components/ui/cover"

export default function MyComponent() {
  const [coverUrl, setCoverUrl] = useState<string | undefined>(
    "https://images.unsplash.com/..."
  );

  return (
    <Cover
      url={coverUrl}
      onChange={() => console.log("Change cover")}
      onRemove={() => setCoverUrl(undefined)}
    />
  )
}

Sizes

Default (35vh)

Small (12vh)

Large (50vh)

No Image (Placeholder)

No cover image

With Children

Hero Title

Subtitle or description text

Props

Prop	Type	Default	Description
`url`	`string`	`undefined`	The URL of the cover image
`size`	`'default' \| 'sm' \| 'lg' \| 'full'`	`default`	The height of the cover
`preview`	`boolean`	`false`	If true, hides action buttons (view-only mode)
`onChange`	`() => void`	`undefined`	Callback when 'Change cover' button is clicked
`onRemove`	`() => void`	`undefined`	Callback when 'Remove' button is clicked
`children`	`ReactNode`	`undefined`	Content to render inside the cover (e.g., overlays)
`className`	`string`	`undefined`	Additional CSS classes