shadcncraft
AnnouncementannouncementA lightweight announcement component for highlighting updates, releases, or important notices without interrupting the main flow. Uses a compact label and title pairing to surface timely information, with optional linking for deeper context. Works well inline or in banners and scales from subtle status updates to more prominent callouts.
Avatar Stackavatar-stackA compact, visually appealing component for displaying multiple user avatars in an overlapping stack. Perfect for showing participants in a group chat, team members, or active collaborators. Supports customizable size, max visible avatars, border styling, and optional '+n' indicator for overflow. Renders gracefully from 1 to dozens of users while maintaining a small footprint.
BadgebadgeDisplays a badge or a component that looks like a badge.
Blog Blockquoteblog-blockquoteA component that highlights a key excerpt or quote from an article. This component draws attention to important passages and breaks up long text blocks.
Blog Imageblog-imageA component that displays an inline or full-width image with an optional caption. This component makes blog articles more engaging and visually appealing.
ChipchipA component that combines small text with an icon for quick callouts. This component highlights key values such as benefits, attributes, or job details.
Data Table Paginationdata-table-paginationA pagination footer for TanStack Table data tables. Combines a summary line, a rows-per-page select, a page indicator, and first, previous, next and last navigation buttons. Renders a sensible default layout from a single table prop, and every part is exported so blocks can recompose the footer, swap the summary copy, or drop the edge buttons without duplicating the markup.
Feature Stackfeature-stackA component that arranges an icon, header, body text, and CTA in different layout styles. This component makes features clear and actionable.
Featured Iconfeatured-iconA component that places an icon inside a styled square or circle frame for extra prominence. This component makes supporting visuals stand out in marketing layouts.
Image Zoomimage-zoomImage zoom is a component that allows you to zoom in on an image.
Inline Hintinline-hintAn Inline Hint is a lightweight, non-intrusive UI pattern that provides helpful guidance, clarification, or best-practice advice directly within or immediately adjacent to a form field, input, or interactive element, without requiring the user to leave the current context.
Job Listingjob-listingA component that displays open roles in a card format with a badge, title, short body, and feature chips. This component brings structure and clarity to careers pages.
MarqueemarqueeA smooth, endlessly looping scroller ideal for showcasing logos, testimonials, images, or sponsor lists. Features auto-play with customizable speed, pause-on-hover, reverse direction, and seamless loop behavior.
MessagingmessagingA flexible messaging component for displaying conversational threads. Supports sent and received messages, timestamps, reactions, and file attachments. Built to handle short exchanges or longer conversations while keeping message hierarchy and sender context clear.
MetricmetricA component that displays large stats with a sub-label for context. This component is designed to highlight performance or usage data.
Mobile Navigation Menumobile-navigation-menuA Mobile Navigation Menu component that provides expandable menus for small screens. Built based on shadcn/ui Navigation Menu component, but optimized for small screens and touch navigation.
Page Headingpage-headingA component that acts as the text-focused version of a hero banner. This component combines a pre-heading label, an H1 heading, supporting description text, and call-to-action buttons.
Placeholder Logoplaceholder-logoA component for that can be replaced with your brand's main logo. This component ensures layouts stay consistent before brand assets are applied.
Profile Cardprofile-cardAn extension of the avatar component with more details on the individual. Good for blog posts etc.
Rich Separatorrich-separatorA horizontal divider with optional inline content like labels, tabs, or actions. Used to separate sections while keeping context visible, not just a visual break. Works well in dense layouts like settings pages, docs, and dashboards where structure matters without adding noise.
Section Headingsection-headingA component that standardizes heading typography and spacing. This component includes a pre-heading label, main heading, and body text in different layout variants.
Star Ratingstar-ratingA component that displays ratings with stars and an optional label. This component builds trust with visual feedback.
Sub Featuresub-featureA component that presents a smaller feature layout for a dialled-back look. This component balances detail with simplicity.
TaglinetaglineA component that displays a tagline with different variants.
TagstagsA multi-select tag picker for filtering or categorizing content. Supports search, selected-state chips, and a clear active state. Simple, compact, and meant to disappear once a choice is made. Good for forms, filters, and lightweight metadata input.
TickertickerA compact, inline ticker for live or near-real-time values. Shows an identifier, current value, and delta with clear up or down signaling. Designed to sit quietly in headers, dashboards, or feeds without pulling focus. Good for stocks, metrics, or any rolling signal.
UI Showcaseui-showcaseA Placeholder that displays content in a device-style frame. This component helps showcase product UI.