Post Card

A minimal, elegant social post composer card with dark mode support and media action controls.

Post Card

The PostCard component is a compact, polished post-creation card designed for social platforms, community feeds, or creator dashboards. It presents a clean composer interface with user identity, a text input area, and a row of media action buttons — all wrapped in a refined card shell with full dark mode support.

Profile-image

Zlata Dorbrik

@zlata.xoxo

Key Features

  1. User Identity Header: Displays a circular avatar alongside the user's display name and handle, giving the card an immediately personal and contextual feel.
  2. Minimal Composer Input: A borderless, distraction-free text input with a subtle divider below it — keeping the focus on content creation without visual noise.
  3. Media Action Bar: A horizontally laid-out row of action icons — microphone, video, attachment, and overflow menu — for attaching rich media to a post, with smooth hover transitions.
  4. Publish Button: A high-contrast "Publish" pill button anchored to the right of the action bar, providing a clear and deliberate call-to-action.
  5. Dark Mode Support: Every element — card background, borders, text, icons, and the input — is styled for both light and dark themes using Tailwind's dark: variants.
  6. Accessible Close Control: An X button in the top-right corner allows users to dismiss the composer without disrupting their workflow.