RadCN
Displayreadycomponentready

Empty

A centered empty-state layout for missing content, onboarding prompts, search misses, and recovery actions.

Importimport { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'radcn/empty'
Preview

Live package example

Compose default actions, icon grids, avatar media, stacked avatars, input-group search, outline surfaces, and muted background states with package primitives.

Example Parity

Compose default actions, icon grids, avatar media, stacked avatars, input-group search, outline surfaces, and muted background states with package primitives.

Preview
+
No projects yet
Create a project or import an existing workspace to populate this dashboard.
Learn More
M
No messages
Messages from collaborators appear here.
S
No favorites
Save pages to revisit them quickly.
H
No likes
Liked releases will show up here.
M
No bookmarks
Bookmark components as you review them.
Riley ChenRC
Riley is offline
Leave a message and Riley will see it when they return.
ADGHLP
+2
Invite your team
Start collaborating by inviting teammates into this workspace.
?
Page not found
Search the docs or contact support.
S
/
C
No files uploaded
Upload files to make this cloud workspace useful.
!
No notifications
Refresh to check for new deployment alerts.
import { Avatar, AvatarFallback, AvatarGroup } from 'radcn/avatar'
import { Button } from 'radcn/button'
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'radcn/empty'
import { InputGroup, InputGroupAddon, InputGroupInput } from 'radcn/input-group'
import { Kbd } from 'radcn/kbd'

export function EmptyPreview() {
  return (
    <div class="empty-preview">
      <Empty>
        <EmptyHeader>
          <EmptyMedia variant="icon">+</EmptyMedia>
          <EmptyTitle>No projects yet</EmptyTitle>
          <EmptyDescription>Create a project or import an existing workspace.</EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button size="sm">Create Project</Button>
          <Button size="sm" variant="outline">Import Project</Button>
          <Button href="/docs/components/empty" size="sm" variant="link">Learn More</Button>
        </EmptyContent>
      </Empty>

      <Empty>
        <EmptyMedia><Avatar><AvatarFallback>RC</AvatarFallback></Avatar></EmptyMedia>
        <EmptyHeader><EmptyTitle>User offline</EmptyTitle></EmptyHeader>
      </Empty>

      <Empty>
        <EmptyMedia><AvatarGroup><Avatar><AvatarFallback>AD</AvatarFallback></Avatar></AvatarGroup></EmptyMedia>
        <EmptyHeader><EmptyTitle>Invite your team</EmptyTitle></EmptyHeader>
      </Empty>

      <Empty>
        <EmptyHeader>
          <EmptyMedia variant="icon">?</EmptyMedia>
          <EmptyTitle>Page not found</EmptyTitle>
          <EmptyDescription>Search docs or contact support.</EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <InputGroup ariaLabel="Search docs"><InputGroupInput name="q" placeholder="Search documentation" /><InputGroupAddon align="inline-end"><Kbd>/</Kbd></InputGroupAddon></InputGroup>
        </EmptyContent>
      </Empty>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'radcn/empty'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Empty renders server-first layout markup and lets headings, descriptions, links, inputs, and buttons keep their native semantics.
  • Use EmptyTitle and EmptyDescription for the visible message, then put actions or controls in EmptyContent.
  • Avatar, AvatarGroup, Button, InputGroup, Kbd, and links keep their own accessible behavior when composed inside Empty.
  • Icon media remains decorative unless the surrounding title and description need a more specific accessible label.

Customization

  • Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent expose public RadCN classes and data hooks.
  • Use class, style, and CSS variables to tune width, height, border, background, spacing, and icon presentation.
  • Outline, dashed, muted, and background examples are styling over the same Empty parts rather than separate state APIs.
  • Media can be text, inline SVG, Avatar, AvatarGroup, Spinner, or app-owned imagery.

Remix 3 Notes

  • shadcn/ui asChild maps to explicit RadCN Button href or native anchor composition, preserving link semantics without Radix Slot.
  • Lucide and Tabler icons are presentation choices; RadCN examples use package-owned markup or app-owned glyphs instead of icon package dependencies.
  • Tailwind utility classes map to RadCN public classes, inline styles, or CSS variables.
  • Remote GitHub avatar images are content choices. Use local/static assets, app-owned images, data URIs, or AvatarFallback for deterministic examples.
  • Empty remains a layout/content primitive and does not own Avatar, AvatarGroup, Button, InputGroup, Kbd, icon-package, image-loading, route, form, or support-link state.