Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React User Profile View Sheet
Sheet component displaying user profile information with avatar, username, contact details, and messaging action for social platforms built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Clicking usernames shouldn't navigate away—users want quick profile previews while staying in context. This React Sheet slides in user profiles with avatar, username, email, location, and join date from shadcn/ui. Built with Radix UI Dialog primitives, the sheet provides at-a-glance user information without disrupting current activity. Perfect for social feeds, team directories, comment sections, collaboration tools, or any interface where users interact with multiple profiles requiring quick context without full page navigation.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Product Details Sheet
Sheet displaying product information
Notification List Sheet
Sheet showing notification feed
Avatar
User avatar component
Dialog
Modal dialog component
Card
Card container for user profiles
Button
Standard button component
Questions you might have
React Product Details Sheet
Sheet component displaying product details with image, pricing, stock badge, feature list, and add to cart action for e-commerce interfaces built with shadcn/ui
React Order Details Sheet
Sheet component displaying order summary with status badge, item list, pricing breakdown with separators, and tracking action for e-commerce platforms built with shadcn/ui