shadcncraft
Activity Feed Item 1activity-feed-item-1A flexible feed item for displaying recent activity in a clear, scannable format. Combines an avatar, primary action text, optional supporting text, and contextual metadata such as timestamps or attachments. Designed to stack cleanly in lists, adapt to different densities, and support both lightweight updates and richer activity states without visual noise.
Avatar Upload 1avatar-upload-1A focused component for adding or updating a user profile image. Handles empty, uploaded, and removable states with clear affordances, including file requirements and inline actions. Designed to feel lightweight and direct, so users can quickly set or change their avatar without breaking flow.
Avatar Upload 2avatar-upload-2A focused component for adding or updating a user profile image. Handles empty, uploaded, and removable states with clear affordances, including file requirements and inline actions. Designed to feel lightweight and direct, so users can quickly set or change their avatar without breaking flow.
Balance 1balance-1A data-rich component for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators and a chart to help users quickly understand current state and recent movement without digging into detailed reports.
Balance 2balance-2A data-rich component for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators, a chart, and optional actions to help users quickly understand current state and recent movement without digging into detailed reports.
Balance 3balance-3A data-rich component for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary and a chart to help users quickly understand current state and recent movement without digging into detailed reports.
Blog Listing Card 1blog-listing-card-1A component that displays a blog listing card in a vertical or horizontal orientation.
Blog Listing Card 2blog-listing-card-2A component that displays a blog listing card in a card format in a vertical or horizontal orientation.
Blog Listing Featured Card 1blog-listing-featured-card-1A large featured blog card intended for featuring a blog post. With a floating overlay on the bottom left side of the card.
Blog Listing Featured Card 2blog-listing-featured-card-2A large featured blog card intended for featuring a blog post. It has a progressive gradient and blur effect stacked horizontally on the bottom side of the card.
Blog Listing Featured Card 3blog-listing-featured-card-3A large featured blog card intended for featuring a blog post. It has a progressive gradient and blur effect, stacked vertically on the left side of the card.
Cart Item 1cart-item-1TBD
Code Snippet 2code-snippet-2A command or a short file, shown so it can be taken. Comes as an inline chip for code inside a sentence and as a block for code that stands on its own, with an optional filename header. Copying is one click and reports itself, and the block holds its shape whether the copy button rides in the header or beside the code.
Expenses 1expenses-1A compact data visualization component for showing spending by category over a selected time range. Uses simple bars and inline values to make comparisons easy at a glance, with support for hover details and quick period switching. Suitable for dashboards, reports, and financial overviews.
File Part 1file-part-1The file a message was sent with, drawn as a card rather than left as a link. An image previews in place, anything else falls back to an icon beside its name and type. Takes an AI SDK file part.
File Upload Area 1file-upload-area-1A dedicated drop zone for selecting files via drag-and-drop or manual browsing. Communicates accepted file types and size limits up front, with clear hover and focus states to guide interaction. Designed to pair with upload lists or cards, making the start of the upload flow obvious and low-friction.
File Upload Card 1file-upload-card-1A self-contained upload item that shows the status of an individual file during and after upload. Supports clear states for uploading, completed, and failed files, with inline progress, file metadata, and quick actions like cancel or remove. Designed to be stacked into lists for multi-file uploads while keeping each file’s state easy to scan.
Message Card 1message-card-1A compact summary component for individual messages or threads. Shows sender, subject, timestamp, and a short preview of the content. Designed for inboxes, notifications, and lists where users need to scan and prioritize messages quickly without opening the full conversation.
Metric Card 1metric-card-1A compact summary block for highlighting a single key metric. Combines a label, primary value, and supporting context like trend direction or time range. Designed to be used alone or in grids to give quick, scannable insight without needing a full chart.
Metric Card 2metric-card-2A compact summary block for highlighting a single key metric. Combines a label, primary value, and supporting context like trend direction or time range. Designed to be used alone or in grids to give quick, scannable insight without needing a full chart.
Pricing Card 1pricing-card-1A component for Figma that compares plans with layout variants, including a 'Most Popular' highlight. This component makes pricing clear and actionable.
Product Card 1product-card-1TBD
Product Card 2product-card-2TBD
Product Category Card 1product-category-card-1TBD
Progress Item 1progress-item-1A single step within a progress sequence used to show order, status, and context. Combines a step indicator with a title and optional description, supporting active, pending, and completed states. Designed to stack vertically for onboarding flows, checklists, and multi-step processes where clarity and scanability matter.
Questionnaire Part 1questionnaire-part-1The agent asking before it commits to expensive work: a multi-step form rendered inside the message, with choices, multi-select, a freeform field, validation and keyboard shortcuts. A tool rather than a data part, so the answers return as that tool call's output and survive a reload. Answered, it collapses to a summary of what was chosen.
Reasoning Part 1reasoning-part-1A model's thinking, folded away behind a disclosure so it never competes with the answer. The trigger shimmers while tokens are still arriving and settles once the step closes. Takes an AI SDK reasoning part.
Sources Part 1sources-part-1The citation list under an answer, collapsed to a count until asked for. Citations reach a chat by two different routes, streamed by the provider or buried inside a search tool's output, and this gathers both into one list with the duplicates dropped.
Spending Balance 1spending-balance-1A summary card that shows total spend for a period, with a clear visual cue and a simple category breakdown. Good for dashboards where you want one quick read before details. It answers “how much did I spend and where did it go” at a glance.
Stock Market 1stock-market-1A market snapshot card that shows current value, change over time, and basic context. The chart is the focus, with quick filters for time range and a couple of supporting stats. Good for dashboards where you want trend first, details second.
Team Card 1team-card-1A component that displays a user's image alongside their name, a supporting detail such as role or date and social links. This component is useful for adding identity and context to content.
Team Card 2team-card-2A component that displays a user's image alongside their name, a description and social links. This component is useful for adding identity and context to content in a vertically stacked format.
Text Part 1text-part-1A message's text. An answer is parsed as markdown by Streamdown, which copes with the half-finished syntax a stream produces and gives code blocks their own header and controls. A question is rendered literally, because its asterisks are asterisks. Takes an AI SDK text part.
Tool Part 1tool-part-1One tool call, through all four of its states: running, done, failed and refused. A denied call reads differently from one that simply errored, and expanding either prints what went in or came back, as a code block you can copy in one click. Takes an AI SDK tool part, whichever tool it is.
Transactions 1transactions-1A compact transaction list for recent activity. Shows status filters, clear labels, amounts, and dates at a glance. Works well in dashboards where users need quick confirmation of money in or out, with a simple path to view the full history.
Web Search Part 1web-search-part-1The line saying a search happened: objective and a spinner while it runs, a warning when it fails. What it found is not rendered here, because the citations under the answer already carry it; without this row the slowest step of a turn happens in silence.