Entity

A scannable identity: media, title, description, and optional actions.

Default

Media, a title and a supporting line. EntityAside holds metadata or related actions on the right.

Devansh Pawan

Workspace admin

Active 1h ago

import {
  Avatar,
  AvatarFallback,
  Entity,
  EntityAside,
  EntityContent,
  EntityMedia,
} from "@smallest-inc/ui";

export default function EntityDefault() {
  return (
    <div className="w-full max-w-md">
      <Entity>
        <EntityMedia>
          <Avatar size="lg">
            <AvatarFallback>DP</AvatarFallback>
          </Avatar>
        </EntityMedia>
        <EntityContent title="Devansh Pawan" description="Workspace admin" />
        <EntityAside>
          <span className="text-sm text-fg-secondary">Active 1h ago</span>
        </EntityAside>
      </Entity>
    </div>
  );
}

Single line

Title only, with 20px media. This is the block used in compact list rows and table cells.

Nova Sales Assistant

Media

Empty EntityMedia is a neutral placeholder: md is 40px and sm is 20px. Pass an Avatar or an icon as children to replace it.

Pulse Support Agent

Placeholder, 40×40

Riley Gupta

Avatar

+1 (415) 555-0198

Icon

Placeholder, 20×20

import {
  Avatar,
  AvatarFallback,
  Entity,
  EntityContent,
  EntityMedia,
  Icon,
} from "@smallest-inc/ui";

export default function EntityMediaExample() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Entity>
        <EntityMedia />
        <EntityContent title="Pulse Support Agent" description="Placeholder, 40×40" />
      </Entity>
      <Entity>
        <EntityMedia>
          <Avatar size="lg">
            <AvatarFallback>RG</AvatarFallback>
          </Avatar>
        </EntityMedia>
        <EntityContent title="Riley Gupta" description="Avatar" />
      </Entity>
      <Entity>
        <EntityMedia className="size-10 bg-neutral-100">
          <Icon name="IconPhoneDynamicIsland" className="size-4 text-fg-secondary" />
        </EntityMedia>
        <EntityContent title="+1 (415) 555-0198" description="Icon" />
      </Entity>
      <Entity>
        <EntityMedia size="sm" />
        <EntityContent title="Placeholder, 20×20" />
      </Entity>
    </div>
  );
}

Title weight

Titles are regular by default. Set weight="medium" when the entity is the heading of its surface.

Zephyr Lead Qualifier

Regular title

Zephyr Lead Qualifier

Medium title

import { Entity, EntityContent, EntityMedia } from "@smallest-inc/ui";

export default function EntityWeight() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Entity>
        <EntityMedia />
        <EntityContent title="Zephyr Lead Qualifier" description="Regular title" />
      </Entity>
      <Entity>
        <EntityMedia />
        <EntityContent weight="medium" title="Zephyr Lead Qualifier" description="Medium title" />
      </Entity>
    </div>
  );
}

Composed content

Use EntityTitle and EntityDescription as children when you need to style or wrap them. Both truncate to one line.

Owner

Full, unrestricted access to workspace settings, billing and telephony.

import {
  Entity,
  EntityContent,
  EntityDescription,
  EntityMedia,
  EntityTitle,
} from "@smallest-inc/ui";

export default function EntityComposed() {
  return (
    <div className="w-full max-w-md">
      <Entity>
        <EntityMedia />
        <EntityContent>
          <EntityTitle weight="medium">Owner</EntityTitle>
          <EntityDescription>Full, unrestricted access to workspace settings, billing and telephony.</EntityDescription>
        </EntityContent>
      </Entity>
    </div>
  );
}

Actions

Keep one visible action in the aside and move the rest into a more menu.

Atlas Onboarding Guide

Draft · edited 2h ago

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  Entity,
  EntityAside,
  EntityContent,
  EntityMedia,
  MoreVerticalIcon,
} from "@smallest-inc/ui";

export default function EntityActions() {
  return (
    <div className="w-full max-w-md">
      <Entity>
        <EntityMedia />
        <EntityContent title="Atlas Onboarding Guide" description="Draft · edited 2h ago" />
        <EntityAside>
          <Button variant="secondary" size="sm">
            Deploy
          </Button>
          <DropdownMenu>
            <DropdownMenuTrigger
              render={
                <Button iconOnly variant="transparent" size="sm" aria-label="More actions for Atlas Onboarding Guide" />
              }
            >
              <MoreVerticalIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-44">
              <DropdownMenuItem>Duplicate</DropdownMenuItem>
              <DropdownMenuItem>Rename</DropdownMenuItem>
              <DropdownMenuItem variant="danger">Delete</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </EntityAside>
      </Entity>
    </div>
  );
}

In a list

Entity is the identity of a list row. Set actions on the ListItem when the aside holds controls.

Chrome on MacBook Pro
Active now
Safari on iPhone 16
Last used 10 min ago
Firefox on Ubuntu 24.04
Last used 3 days ago

import {
  Button,
  Entity,
  EntityAside,
  EntityContent,
  List,
  ListItem,
} from "@smallest-inc/ui";

const sessions = [
  { device: "Chrome on MacBook Pro", lastUsed: "Active now" },
  { device: "Safari on iPhone 16", lastUsed: "Last used 10 min ago" },
  { device: "Firefox on Ubuntu 24.04", lastUsed: "Last used 3 days ago" },
];

export default function EntityInList() {
  return (
    <div className="w-full">
      <List>
        {sessions.map((session) => (
          <ListItem key={session.device} actions>
            <Entity>
              <EntityContent title={session.device} description={session.lastUsed} />
              <EntityAside>
                <Button variant="secondary" size="sm">
                  Sign out
                </Button>
              </EntityAside>
            </Entity>
          </ListItem>
        ))}
      </List>
    </div>
  );
}

Best practices

When to use

Use for an identifiable thing (person, agent, phone number, device) shown as media, a title, supporting text and up to two related controls.
Use it as the identity cell of a List row or a Table cell (variant="agent").

Behavior

Use EntityMedia size="sm" (20px) for single-line rows and the default md (40px) for double-line rows. Pass an Avatar or an icon as children to replace the placeholder.
EntityContent takes title and description props. Use EntityTitle and EntityDescription as children only when you need custom content. Both truncate to one line.
Keep one visible action in EntityAside and move the rest into a more menu.
Use weight="medium" only when the entity is the heading of its surface.

Content

The title is the name people search for ("Nova Sales Assistant"); the description is the one fact that tells rows apart ("Inbound sales", "Last used 10 min ago").

Accessibility

Aside buttons need labels that include the entity name when the visible label is generic ("Sign out Safari on iPhone 16").

PreviousDropdown NextField