Single Item Detail
Content & Data Views · 7 checks · 52 resources
The full record view for one object, carrying its status, attributes, history and destructive actions.
Before you ship
- 01Clear title or identifier — the name, ID or primary label shown prominently at the top
- 02Status indicator — a clear signal of the item's current state (active, pending, completed, archived), not conveyed by colour alone
- 03Key details section — the most important attributes surfaced prominently, with secondary details below or in a sidebar
- 04Edit action — a clear way to modify the item's details, either inline or via an edit mode
- 05Related items or activity — associated records, linked content, or a history of who changed what and when
- 06Breadcrumb or back navigation — a way to return to the list or parent context
- 07Destructive actions — delete or archive options, kept visually separate from the primary actions
Resources that help you build this
- Ark UI · 49 headless components with one API across React, Vue, Solid and SvelteComponent LibrariesS
- Astryx · Meta's open-source React + StyleX design system, 150+ components and 42 templatesComponent LibrariesS
- Chakra UI · 114 accessible React components with a token-driven styling systemComponent LibrariesS
- Kumo · Cloudflare's production React library: 44 components on Base UI + Tailwind v4, MITComponent LibrariesS
- HeroUI Pro · Paid React + React Native components, 6 templates, MCP server and agent skillsComponent LibrariesS
- Kibo UI · shadcn registry of 41 complex components: Gantt, Kanban, editor, sandbox, cropperComponent LibrariesS
- mapcn · Theme-aware MapLibre map components installed through the shadcn CLIComponent LibrariesS
- Material Design 3 · Google's open design system: 39 components, tokens, and Compose/Web codeDesign Systems & Brand GuidelinesS
- Mobbin · Searchable library of real mobile and web app screens, organized into user flowsInspiration GalleriesS
- MUI · React component suite: Material UI, MUI X data grid, charts and date pickersComponent LibrariesS
- Plate · Slate-based rich-text editor framework with 86 shadcn-installable editor componentsComponent LibrariesS
- ReUI · 1,052 free shadcn components, 502 pro blocks, 10 templates, hosted MCPComponent LibrariesS
- shadcn/ui · 64 copy-in React components on Radix + Tailwind, installed by CLIComponent LibrariesS
- shadcn/ui (GitHub) · Source monorepo for shadcn/ui: components, CLI, registry schema, skillsComponent LibrariesS
- ToyFight · Manchester design studio; 47 case studies for Twitch, KFC, GSAPStudios & PortfoliosS
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP serverComponent LibrariesS
- Ant Design · 73-component React library and design language for enterprise back-office appsComponent LibrariesA
- Are.na · Fifteen years of channel-based research collection, with a documented v3 API and a public OpenAPI specInspiration GalleriesA
- Atlassian Design System · Atlaskit: 59 Apache-2.0 React components behind Jira, Confluence and BitbucketDesign Systems & Brand GuidelinesA
- BMW DESIGN.md · A 544-line DESIGN.md token spec of bmw.com you drop in for a coding agent to followAgent Design ToolingA
- Carbon Design System · IBM's open-source design system: 44 documented components across five frameworksDesign Systems & Brand GuidelinesA
- Chema Mendez (mendezmendez) · Portfolio of a Spain-based collage artist compositing old paintings, 3D and AI outputArtists & CreatorsA
- Effective HTML · Six agent skills plus 32 worked HTML artifacts for wireframes, prototypes, and plansAgent Design ToolingA
- Extend UI · shadcn registry of PDF, DOCX, XLSX and CSV viewers with bounding-box citationsComponent LibrariesA
- Fluent 2 · Microsoft's design system: 47 web components plus Windows, iOS and Android kitsDesign Systems & Brand GuidelinesA
- gluestack-ui · CLI-installed React Native component library built on NativeWind and Tailwind v4Component LibrariesA
- GoodUI · 75 UI ideas and 141 patterns backed by 639 replicated A/B testsDesign Systems & Brand GuidelinesA
- Hover States · A written archive of web interaction detail, one entry at a time, running without a break since 2012Inspiration GalleriesA
- Kibo UI · shadcn registry of 41 hard components shadcn/ui does not ship, plus 28 blocksComponent LibrariesA
- Pierre Diffs · React diff renderer on Shiki with split/unified layouts, inline edits and commentsComponent LibrariesA
- shadcn Studio · 800+ shadcn blocks, 16 templates, themes, MCP server and Figma-to-codeBlocks, Templates & ThemesA
- Shadcnblocks · 1,837 paid shadcn blocks and 19 Next.js and Astro templates, lifetime licenseBlocks, Templates & ThemesA
- shadcncraft · Paid shadcn/ui registry plus a 1:1 Figma kit, 8 styles across Radix and Base UIComponent LibrariesA
- Shark UI · 86 shadcn-style components built on Ark UI, installed through the shadcn CLIComponent LibrariesA
- Shopify Polaris · Shopify's admin design system, now shipped as framework-agnostic web componentsComponent LibrariesA
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and nativeComponent LibrariesA
- tldraw · A collaborative whiteboard and the SDK behind it, at 50,000 stars, with a 21 KB llms.txt covering every featureComponent LibrariesA
- Watermelon UI Dashboards · Nine full React admin dashboards installed through the shadcn CLI from a public registryBlocks, Templates & ThemesA
- ColorHub · 150 six-colour palettes previewed on real layouts, plus 7 paid Next.js kitsColorB
- Homely Real Estate Template · $29 Next.js 15 + shadcn real estate site with listings and detail pagesBlocks, Templates & ThemesB
- Kanbaaan · Kargul Studio's Next.js 16 kanban dashboard sourceBlocks, Templates & ThemesB
- loadmo.re · A mobile-only web design archive of alternative sites, cut by about 25 tags from Brutalist to Net.ArtInspiration GalleriesB
- Manifest UI · 39 MIT shadcn blocks sized for ChatGPT Apps and MCP app surfacesAI Interface KitsB
- Page Flows · Screen recordings of real user flows from shipped iOS, Android, web, and email appsInspiration GalleriesB
- Park UI · 59 styled Ark UI components delivered by CLI, themed with Panda CSSComponent LibrariesB
- Preline UI · Free Tailwind library with 640+ examples, 204 blocks and documented plugin wiringComponent LibrariesB
- Primer · GitHub's design system: 62 React components, Octicons and design tokensDesign Systems & Brand GuidelinesB
- Savee · Ad-free visual bookmarking for designers, with extensions, a Figma plugin and boardsInspiration GalleriesB
- useLayouts · 64 free animated React components with source installation through the shadcn registryMotion & InteractionB
- Behance · Adobe's portfolio platform: long-form creative case studies, no public API since shutdownInspiration GalleriesC
- Dribbble · The shot feed: cropped UI and branding visuals, browsable but unreadable and unlicensedInspiration GalleriesC
- Shadix UI · 14 motion-heavy shadcn add-ons: signature pad, datetime picker, reorder listComponent LibrariesC