shadcn blocks — Shadcn UI Kit | registry.directory

Shadcn UI Kit/blocks

Ai chatai-chat1Chat home with a sidebar of grouped chat history, a header model menu with copy link and share buttons, a composer with research, image and reasoning toggles, a connect tools row and three starter cards.

Ai chatai-chat10Recruiting assistant with a searchable sidebar, a welcome composer with Attach, Upload images and tone select, four feature cards and a Conversations column with rename and delete menus on wide screens.

Ai chatai-chat11Finance assistant with a workspace menu, sidebar navigation with a Budget badge, a trial card, a model banner above the composer, attach, image and receipt buttons and three prompt cards that a Refresh button swaps.

Ai chatai-chat12Image generator with three stacked cover images, a greeting, recent prompt buttons, a dismissible upgrade banner, ratio and style selects and generated image thumbnails that appear after a shimmering Generating status.

Ai chatai-chat13Centered composer with a segmented research, image and ideas toggle, a model dropdown, web search, attach and voice buttons, a connected tools popover with switches per app and three starter cards.

Ai chatai-chat14Conversation screen with a folder sidebar, collapsible assistant replies with clickable style and font choices, a Thinking shimmer, a prompt library menu, an Improve prompt button and a creativity and web access drawer.

Ai chatai-chat15Group chat window with member avatars, a video call button group, bubbles with a shared file card and heart reaction, a New divider, a Polish with AI button and a split Send button.

Ai chatai-chat16Left aligned chat home with a recents sidebar, a version dropdown, a New chat button, a composer with Attach, Upload images and writing style select, and four ready made prompt cards.

Ai chatai-chat17Minimal start screen with a header model menu, four starter rows that send immediately, three resumable chats, a single line pill composer with Instant and Thinking select, switching to a conversation with simulated replies.

Ai chatai-chat18Assistant side panel beside a placeholder page with a thread menu, a reply with source chips, follow up suggestions, a keyboard navigable list of related questions, a model menu and an Improve prompt button.

Ai chatai-chat19Assistant side panel that asks three scoping questions with a progress bar, checkbox and radio cards with A to D shortcuts, Back and Next buttons, a brief summary and a sources menu.

Ai chatai-chat2Minimal chat home with a sidebar search field, pinned and dated chats, a greeting, a composer with an add content menu, dictation and voice buttons, an incognito toggle and a model and effort picker.

Ai chatai-chat20Floating chat widget over a placeholder dashboard with new chat, history, expand, minimize and close buttons, five suggested questions, simulated replies with a shimmer and a round launcher button when closed.

Ai chatai-chat21Chat workspace with an icon rail, a chat list with search, saved assistants and collapsible history, an assistant card, task list, suggested prompt card, quick action chips, a source select and a configuration drawer.

Ai chatai-chat3Assistant workspace with tool navigation, collapsible Recent and Favorites groups, a Research Pro card, breadcrumbs, a dotted canvas of four selectable template cards and a composer with Fix bug, Research and Deep research toggles.

Ai chatai-chat4Sales assistant home with a workspace switcher, Sequencing navigation, an onboarding progress card, a lead search bar, a composer with a model select, four quick action chips and three lead and connect cards.

Ai chatai-chat5Single centered composer with a two tone heading, an Attach button, a web search toggle, a writing style select, a voice input toggle and removable file chips, without sidebar or header.

Ai chatai-chat6Legal assistant start page with four task cards that fill the prompt, a composer with a Research, Review and Draft select, and a tray below it for choosing the client, analyzing documents and setting jurisdiction.

Ai chatai-chat7Logged out chat landing page with a language menu, Log in button, composer with model select, web search toggle and attach button, four dashed example prompts and a footer with social icons and links.

Ai chatai-chat8Composer with a model popover opened by default: searchable list with provider logos, Auto and Multiple models switches, a More models page, a disabled Soon entry, a Temporary chat switch and a preattached meeting file.

Ai chatai-chat9Chat home with a six item sidebar, a waving greeting, three idea cards that fill the prompt, a composer with an upload and image creation menu, a voice button and five quick prompt chips.

Authenticationauthentication-form1Login and signup forms with Google/GitHub options, email/password fields, and primary submit. Ready-to-use shadcn/ui auth patterns.

Authenticationauthentication-form2Login and signup forms with Google/GitHub options, email/password fields, and primary submit. Ready-to-use shadcn/ui auth patterns.

Authenticationauthentication-form3Login and signup forms with Google/GitHub options, email/password fields, and primary submit. Ready-to-use shadcn/ui auth patterns.

Authenticationauthentication-form4Authentication built with shadcn/ui.

Authenticationauthentication-form5Authentication built with shadcn/ui.

Authenticationauthentication-form6Authentication built with shadcn/ui.

Blogblog-card1Reusable card layouts for articles and blog posts, with header image, title, excerpt, author, and read-more actions. Built with shadcn/ui so you can drop them into grids or lists on landing pages and dashboards.

Blogblog-card2Reusable card layouts for articles and blog posts, with header image, title, excerpt, author, and read-more actions. Built with shadcn/ui so you can drop them into grids or lists on landing pages and dashboards.

Blogblog-card3Reusable card layouts for articles and blog posts, with header image, title, excerpt, author, and read-more actions. Built with shadcn/ui so you can drop them into grids or lists on landing pages and dashboards.

Blogblog-card4Blog built with shadcn/ui.

Changelog pagechangelog1Changelog with a sticky sidebar holding the title, search input and Follow and Subscribe buttons, next to a vertical timeline of dated entries with Read More links and author avatars.

Changelog pagechangelog2Changelog header with intro text and Twitter, RSS and email icon buttons, above a timeline with dates in a left column, entry titles, an optional image and bulleted change lists.

Changelog pagechangelog3Release notes with breadcrumb and title, grouped by version and date into New Features, Bug Fixes and Breaking Changes, each with a colored icon and commit hash and issue links.

Changelog pagechangelog4Changelog card feed with colored type badges, dates, descriptions, highlight lists and three reaction buttons, plus a sidebar with search, label list with counts and a Subscribe to updates button.

Chartschart1Total revenue card with rounded side by side bars for desktop and mobile per month, a boxed desktop and mobile totals summary in the header and a dashed hover tooltip.

Chartschart10Achievement by year card with three thin horizontal bars for 2024, 2023 and 2022, each labeled inside the bar and topped by a large project count.

Chartschart11Project efficiency donut with a month select whose items show color swatches, an enlarged active slice with an outer ring, and the selected month value in the center.

Chartschart12Revenue chart card with clickable desktop and mobile total tiles in the header that switch a single daily bar series over the last 28 days with formatted date tooltips.

Chartschart13Leads by source donut with the total leads in the center, an Export dropdown and a row of social, email, call and others counts with colored dots below.

Chartschart14Earning reports card with a gradient weekly bar chart, a total with green badge and three side panels for earnings, profit and expense, each with an icon, amount and progress bar.

Chartschart15Support tickets donut showing 88% completed in the center with new and open segments, plus a footer row of new tickets, open tickets and response time with round icons.

Chartschart16Total earning card with a percentage headline, change badge, stacked revenue and sales bars by month, and two transaction rows for client payment and refund with signed amounts.

Chartschart17Monthly file transfer card with stacked desktop and mobile bars per month, horizontal grid lines, a hover tooltip and a chart legend under the bars.

Chartschart18Balance summary card with three muted tiles for BTC received, sent and withdrawn, an Export dropdown and a three line monthly chart using matching chart colors.

Chartschart19Summary donut card for browser share with a total in the center, a date range description, an arrow icon button and a two column grid of percentage tiles below.

Chartschart2Exercise minutes card with two monotone lines for average and today, larger active dots on hover, a custom two column tooltip and an Export dropdown offering Excel or PDF.

Chartschart20Patients by department pie chart with value labels on each slice and a wrapping legend for cardiology, neurology, oncology and pediatrics.

Chartschart21Recurring revenue by plan line chart with a 7D, 30D or 90D toggle, change summary, and a plan table where hovering highlights a line and toggles hide plans.

Chartschart22Collapsible service card for an edge gateway with latency, rate limit and uptime stats, an operational badge, and stacked served and rate limited daily bars with month navigation.

Chartschart23Revenue streams card with stacked monthly bars for subscriptions, services and licensing, a 2025 or 2026 toggle, and a side list of togglable streams with totals and year over year change.

Chartschart24Release roadmap with a scrollable month timeline of pill shaped task bars per person, a today marker with badge, tooltips per task and a side list of projects with progress bars.

Chartschart25Year over year bar chart with this year above the axis and last year mirrored below, a metric select, a segmented radial goal meter and two year to date tiles.

Chartschart26Revenue overview card with four KPI tiles, a dropdown combining period and comparison year radio groups, and a two year area chart with series toggles and a change tooltip.

Chartschart27Activation funnel with five SVG trapezoid stages, a Total or Step percentage toggle, a hover details panel for accounts and drop off, and a footer naming the biggest leak.

Chartschart28Contribution calendar heatmap with five color levels, year toggle, arrow key navigation between days, an open tooltip on the active cell and active day and streak stats below.

Chartschart29Platform status card with 90 daily status bars per service, uptime percentages, current status badges, arrow key inspection, a recent incidents list and a color legend footer.

Chartschart3Returning rate card showing $42,379 with a green +2.5% badge, an Export dropdown and a two line chart over months where the second series is drawn at reduced opacity.

Chartschart30Earnings summary card with a this week or last week toggle, three selectable metric rows with totals and change, and a daily bar chart that highlights the best or hovered day.

Chartschart31Net cash flow card with money in bars above and money out bars below a zero line, a weekly or monthly toggle, and hover driven inflow and outflow item rows.

Chartschart32Signup anomaly card with daily signup bars, a dashed forecast line, the spike bar highlighted, a hover readout of deviation from forecast and an Investigate spike button.

Chartschart33Weekly revenue card with rounded target bars, an actual revenue line with dots, a hover and click day detail box, a week dropdown and an attainment percentage footer.

Chartschart34Today's revenue card with hourly bars, a stepped line for the same day last week, channel rows that filter the chart and a footer naming the busiest hour.

Chartschart35Cash flow card with rounded monthly incoming bars labeled on top, click to select a month, a side month summary with incoming and outgoing tiles and a net retained progress bar.

Chartschart36Department spend card with stacked monthly bars, a dashed monthly budget line, a department toggle group, an annual budget progress bar and a tooltip showing over or under budget.

Chartschart37Revenue mix card with a segmented share bar for four customer tiers, a revenue or accounts toggle, hoverable tier tiles, upcoming renewals list and a past due invoice notice.

Chartschart38Publication insights card with tabbed followers and page views totals, a 30 day area chart, and two ranked bar lists for top posts and top sources that expand to show all.

Chartschart39Service uptime card listing three services with 90 day status bars, uptime percentages and incident counts, click or arrow key day selection and a live detail panel.

Chartschart4Store visits by source donut with a 10.2K visitors center label, five colored segments for direct, social, email, referrals and other, a wrapping legend and an Export dropdown.

Chartschart40Uptime monitor card for a single endpoint with a pulsing status badge, 30D, 60D or 90D toggle, four stat cells, tooltip day bars and a hover linked event log.

Chartschart41Portfolio holdings card with total value and unrealized gain, a 6M or 1Y area chart, and Stocks and Funds tabs listing holdings with ticker, weight, value and change.

Chartschart42Deal outcomes card with won and lost area series over 6 or 12 months, togglable KPI tiles with change versus the prior period and a win rate tile.

Chartschart43Newsletter performance card with Delivery and Engagement tabs, an area plus dashed line chart on two y axes, hoverable metric totals and a rate badge.

Chartschart44Signups by source card with Search, Paid ads and Partners tabs, stacked monthly bars for activated, trialing and lost, and a togglable stage list with share and totals.

Chartschart45Data platform spend card with workload tabs showing totals and change, a daily cost bar chart with a dashed daily average line, hover dimming and a peak day footer.

Chartschart46Weekly active members card with an OS or browser toggle, a segmented share bar and a ranked list of horizontal bars that reveal weekly change on hover or focus.

Chartschart47Help desk outcomes card with stacked monthly bars switchable between volume and share, hover preview and click to pin a month, and a side breakdown with progress bars.

Chartschart48Pipeline activity card with a branch select, runs, failures or duration toggle, monthly bars with a dashed average line, a detailed tooltip and summary stats in the footer.

Chartschart49API spend card with cumulative 2025, 2026 and dashed forecast lines, a spend cap select drawn as a reference line, three KPI tiles and series toggles.

Chartschart5Exchange rates card with two currency selects, 1D to 1Y period buttons that slice a 90 day line chart, a refresh button, last updated time and Convert and Rate Alerts buttons.

Chartschart50Payment volume card with card and bank transfer lines, a 7D, 30D or 90D toggle, legend toggles that exclude a method and a settlement summary grid with changes.

Chartschart51Wellness week card plotting up to four tracked goals as percent of daily target lines, a week toggle, daily average rows with remove buttons and an add metric dropdown.

Chartschart52Subscription growth card with three metric tabs showing period totals and change, a date range select and an area chart compared against a dashed previous period line.

Chartschart53Cloud cost allocation donut with tabs for service, environment and region, a center total that follows the hovered slice, a budget progress bar and an amount and share list.

Chartschart54Onboarding health card with a semicircle gauge split into on schedule, slipping and stalled, a segment select, healthy rate change and hoverable status rows with weekly deltas.

Chartschart55Brokerage account card with a 1D, 1W or 1M toggle, Holdings and Watchlist tabs and asset rows with a hoverable sparkline that swaps the price and time readout.

Chartschart56Course enrollments card with a week or month toggle, a total with change, a donut showing the hovered or leading track share in the center and a track list with icons.

Chartschart57Sponsorship revenue card with a weekly total and change badge, daily bars selectable by click or weekday toggles, and a breakdown of gross, payouts and net with progress bars.

Chartschart58Pipeline duration card with a pipeline select, average run time with change, a labeled stacked stage bar and a stage table showing average time, change and share.

Chartschart59Deal velocity bubble chart plotting deal size against days to close per sales channel, with bubble size for deal count, dashed average lines, a Q2 or Q3 toggle and channel tiles.

Chartschart6Reservations donut with a total count in the center, a legend for confirmed, checked in and checked out that sits beside the chart on desktop, and a total sales figure below.

Chartschart60Software spend donut with a monthly or annual toggle, a center total that follows the hovered category and a category list showing seats, cost per seat, share and amount.

Chartschart61Review score card with a large rating, partial star display, change badge, a monthly line chart against a togglable 2025 line and stats for reviews and five star share.

Chartschart62Asset price card with price, market cap and volume tabs, five time ranges, zoom in and out buttons, an area or bar chart on a right axis and four stat cells.

Chartschart63Cash position card with four togglable balance tiles, a stacked monthly bar chart with click to select, and a chart or table view switch showing the same balances.

Chartschart64Month to date volume card with a metric select, cumulative lines for this month and last month, a dashed projection to month end, a today marker and projected total.

Chartschart65Support peak hours heatmap with a 7 by 12 grid of two hour cells, All, Live chat or Email toggle, focusable cells with counts and a less to more legend.

Chartschart66Watch time by device card with a semicircle donut, a 30D or 90D toggle, total hours with change and device rows that select the share shown under the arc.

Chartschart67ETF price card with six range toggles from 1M to Max, a line or area view switch with tooltip, hover driven price and change readout, and open, high and low stats.

Chartschart68Growth targets card for signups, upgrades and demo calls with a Jul, Aug or Sep toggle, change badges, progress bars with gap tooltips and an overall attainment score.

Chartschart69Team learning card listing courses with icons, lesson counts and progress bars, an All, In progress or Completed filter, a sort dropdown and due date tooltips.

Chartschart7Campaign overview card with a date range select, a download icon button, booked and visited totals, a performance change line and a two line chart that reloads per range.

Chartschart70Revenue by channel card comparing direct and reseller share side by side with a vs divider, a 7D, 30D or 90D toggle, a split bar and average order values.

Chartschart8Revenue stat card with a weekly, monthly or yearly select, a currency total with trend, and stacked bars pairing solid revenue with diagonal striped projected values on a formatted y axis.

Chartschart9Projects overview stacked area chart with gradient fills, a toggle group for 3 months, 30 days or 7 days on wide cards and a select fallback on narrow containers.

Chat bubblechat-bubble1Conversation-style message bubbles for support widgets and chat UIs. Includes sender alignment, avatars, timestamps, and input areas, all using shadcn/ui for consistent styling.

Chat bubblechat-bubble2Conversation-style message bubbles for support widgets and chat UIs. Includes sender alignment, avatars, timestamps, and input areas, all using shadcn/ui for consistent styling.

Chat bubblechat-bubble3Conversation-style message bubbles for support widgets and chat UIs. Includes sender alignment, avatars, timestamps, and input areas, all using shadcn/ui for consistent styling.

Chat bubblechat-bubble4Chat bubble built with shadcn/ui.

Chat UIchat-ui1Two pane messenger with a searchable chat list showing unread badges and read checks, and a thread of text, video, file, voice and photo gallery messages with per message actions and a composer.

Chat UIchat-ui10Omnichannel CRM chat with channel badges on avatars, tag chips with unread and starred filters, assignee, status and transfer menus, a composer that sends products, and a contact panel with notes.

Chat UIchat-ui2Three column messenger with your profile and online friends on the left, a searchable conversation with emoji reactions in the middle, and a contact panel listing shared files and links.

Chat UIchat-ui3Team messenger with chats grouped into Team and Personal, a top tab bar, grouped message bubbles with avatars, an emoji picker and a profile panel with About and Files tabs.

Chat UIchat-ui4Shared inbox with view and team inbox navigation, toggles for tasks and discussions, a timeline of linked emails, tag and assignment events, and an internal comment composer.

Chat UIchat-ui5Support desk with an icon rail, collapsible inbox views by team and teammate, a ticket thread with a reply or internal note composer, quick replies and a collapsible details panel.

Chat UIchat-ui6AI agent inbox with a workspace switcher, Open and Closed lists filtered by priority, an email draft card with an Approve and send button, and a details panel for contact and thread.

Chat UIchat-ui7Video meeting with a speaker stage, a scrollable participant strip, camera, mic and screen share controls, a session notes tab, and a side panel with meeting chat and searchable participants.

Chat UIchat-ui8Group messenger with a folder rail, pinned chats, mention highlights, photo and voice messages with transcripts, reaction chips showing who reacted, and a details panel with media, files and links.

Chat UIchat-ui9Video call with a running timer, a pinned speaker above three video tiles, emoji reactions, call controls, a copyable meeting code, and a side panel with settings switches, AI summary and participants.

Checkout pagecheckout1Single page checkout with shipping address, free or express shipping cards and masked card fields on the left, plus a sticky cart with quantity steppers, discount code, taxes and total.

Checkout pagecheckout2Order review page listing products with color tags and fast or free delivery options, beside a payment card with email, card or virtual account choice, card fields and a Pay button showing the total.

Checkout pagecheckout3Delivery form in one card with general information, address with country select and payment sections, next to a large total, collapsible discount field and product list with quantity controls.

Checkout pagecheckout4Three step checkout with a stepper for information, shipping and payment, delivery or pickup choice, Google Pay and PayPal buttons, and an order summary whose button label follows the step.

Checkout pagecheckout5Checkout in two dialogs: a cart with quantity controls, promotion code and delivery cost tooltip, then a payment step with saved card radios, auto formatted card inputs and a Pay Now button.

Contact uscontact1Contact Us badge, heading and text above a world map with country markers, tooltips and flag popups, next to three cards for booking online, calling and visiting, each with an outline action button.

Contact uscontact10Minimal three row layout separated by dividers for Let's Talk, Location and Contact, each listing labelled emails, address, directions link, social links or phone numbers in columns.

Contact uscontact11Large faded Contact Us wordmark above a Reach Out heading with three checked service promises and round social buttons, a name, email and message form, and three contact info cards below.

Contact uscontact12Rounded panel on a darkened background photo with heading, location, socials, email and phone on the left and a card form with name, country, phone, email, pill inquiry types, message and opt-in checkbox.

Contact uscontact13Centered badge and heading above a non zooming globe map with office markers and address tooltips, followed by four cards for chatting to sales, chatting to support, visiting and calling.

Contact uscontact2Sales contact section with a badge, large heading, text and three client logos on the left and a card form with labelled name, email, company and message fields validated by zod on the right.

Contact uscontact3Three columns: heading with a Contact Us link, a card form with underline style name, email, industry, subject and message fields and a rounded Submit button, and sales, address and phone details.

Contact uscontact4Full width background photo with a floating white card holding a heading, underline style name, email, phone and message fields, a required privacy policy checkbox and a Send message button.

Contact uscontact5Form free contact layout with a large heading, two columns of general, collaboration, careers and address details, a row of text social links and a wide studio photo below.

Contact uscontact6Split layout with a tall office photo on one side and a heading, small world map with office markers and a form with first name, last name, email and message fields on the other.

Contact uscontact7Heading with address and phone details, a wide world map with markers and zoom controls, then a labelled form with name, email, phone, a reason for contact select and a message field.

Contact uscontact8Badge and heading above a card form with labelled name, email, company, subject and message fields, next to phone, email and hours lines and a map with an overlaid office address card.

Contact uscontact9Centered heading with an italic accent word above three cards for chat, email and phone, each with a colored round icon, a short subtitle and a Start chat button or contact value.

Cta sectionscta1Single row CTA with a headline and short contact line on the left and a Get Started button with arrow icon on the right, over a radial gradient background.

Cta sectionscta10Contact CTA with an outline badge, headline, mailto link and three columns for email support, office address and phone, each with a round icon.

Cta sectionscta11Two column agency CTA: headline with an inline avatar group, paragraph and Book a Call button on the left, two linked service cards with arrow icons on the right.

Cta sectionscta12Integrations CTA with brand logos placed on concentric half rings that fade out, a centered headline, supporting text and an Explore integrations button.

Cta sectionscta2Centered CTA with headline, one line of text, a Get Started button and a Learn more link button, over a dashed grid pattern that fades out toward the bottom.

Cta sectionscta3Bordered card split into two columns: headline, paragraph, Start Free Trial and Learn More buttons on one side and a wide image on the other, stacking image first on mobile.

Cta sectionscta4Two column CTA without a background: a large headline on the left and a paragraph with Start Free Trial and outline Learn More buttons on the right.

Cta sectionscta5Muted card with a course headline, paragraph and Start Learning button, plus a learner count line and five overlapping avatars, placed next to a square photo of students.

Cta sectionscta6Centered headline, subtext and Get in touch button above a full width row of seven portrait images with alternating widths and vertical offsets.

Cta sectionscta7Muted rounded panel with headline, paragraph, Start Free Trial and Schedule a Demo buttons on the left and a product image aligned to the bottom right.

Cta sectionscta8Centered Get Started badge, headline with an italic serif accent, subtext and rounded Get Started button with send icon, followed by three tall property photos in a grid.

Cta sectionscta9Rounded banner with a background photo, a discount headline and subtext in dark text, and Get Started and secondary Contact buttons below.

Customer reviewscustomer-reviews1Two-column section with a headline, intro text and View More button beside three alternating speech bubble reviews, each with an avatar, name, five stars and a pastel background that lifts on hover.

Customer reviewscustomer-reviews2Compact card showing a 4.4 average with partially filled stars, the global rating count, a Write a review button and five per-star progress bars with percentages.

Customer reviewscustomer-reviews3Review list with average score, product thumbnails, Sort by select, review entries with thumbs up and down counts, more menus, pagination and a Write a Review dialog with star picker and form fields.

Customer reviewscustomer-reviews4Review list with live search, Date Posted and Rating filter dropdowns, titled review entries, an empty state and pagination, next to a 4.3 rating summary with labelled count bars.

Customer reviewscustomer-reviews5Single review card with author avatar, more menu, star rating, title, body, date, Verified Purchase label, three photo thumbnails and Helpful and Unhelpful vote buttons with live counts.

Customer reviewscustomer-reviews6Seller-side reviews view with total reviews and growth badge, average rating and star distribution bars, followed by reviews showing buyer spend, review count, Public Comment, Direct Message and a like toggle.

Customer reviewscustomer-reviews7Customer Stories carousel on a muted background with heading, previous and next arrows and review cards showing avatar, name, Verified Customer role, star rating and text, one to three per view.

Customer reviewscustomer-reviews8Muted sidebar with a 4.50 score, star percentage bars and What Customers Like vote badges, beside a review list with avatars, dates, stars, Reply and Share buttons and a thumbs up toggle.

Customer reviewscustomer-reviews9Review summary with recommendation rate and rating bars, an eight photo customer grid that opens a full-screen lightbox carousel, and a comment carousel with custom arrows and star ratings.

Dropdown componentsdashboard-dropdown1Avatar account menu with name and email header, a Light, Dark and System segmented theme control, store, docs, referral and settings items with shortcut hints, and a red log out item.

Dropdown componentsdashboard-dropdown10Columns popover with a locked Name column, checkboxes to show or hide eight columns, drag handles for mouse and keyboard reordering, Reset and Show all buttons, and a live one row table preview.

Dropdown componentsdashboard-dropdown2Bell popover with Inbox and General tabs and unread counts, rows with quotes, PDF attachments and accept or decline buttons, dismiss and unread dots, delivery settings, mark all as read and an empty state.

Dropdown componentsdashboard-dropdown3Messages popover with search, All, Unread and Groups tabs, single or stacked group avatars, online badges, a typing indicator, unread count badges that clear on click, and Open inbox and New message buttons.

Dropdown componentsdashboard-dropdown4Heart popover listing saved products with photo, brand, sale and original price, discount badge and stock warning, offering remove and move to cart with an undo notice, clear all and an empty state.

Dropdown componentsdashboard-dropdown5Cart popover with product photo, variant, remove button and quantity stepper per item, line totals, a live subtotal with checkout note, View cart and Checkout buttons, and an empty state.

Dropdown componentsdashboard-dropdown6Avatar account menu with status submenu, profile and help links, an icon theme toggle, plan usage text and progress bar with an Upgrade button that switches plans, and a sign out item.

Dropdown componentsdashboard-dropdown7Workspace switcher popover with search, initials marks, plan, role and member count per workspace, a check on the active one, and an add workspace dialog with name validation.

Dropdown componentsdashboard-dropdown8Language menu with an Auto-detect option based on the browser, eight languages showing code tile, native and English names, a greeting in the active language and a Help us translate link.

Dropdown componentsdashboard-dropdown9Sample chat message with an actions menu for reply, pin, save, mark unread and email share with letter shortcuts, a More submenu to copy or report, and badges, replies and status text as feedback.

Modal dialogsdashboard-modal1Login dialog with a logo, workspace heading, validated email and password fields, a trouble logging in link beside the password label, a submit button and a free trial link.

Modal dialogsdashboard-modal10Membership dialog with monthly and yearly plan cards showing price, free trial badge and billing note, a radio style indicator on the selected card and a Proceed to Payment button.

Modal dialogsdashboard-modal11Feedback dialog with a topic select, a validated message textarea, up to two attached image previews with remove buttons, a camera attach button and a Send it button.

Modal dialogsdashboard-modal12Confirmation dialog without a close icon showing a receipt icon in a circle, a Transfer Slip Uploaded title, a short explanation and a single rounded button that closes it.

Modal dialogsdashboard-modal13Small alert dialog with a trash icon, a Remove This File title, a warning that the file cannot be restored and Go Back and destructive Remove buttons.

Modal dialogsdashboard-modal14Report dialog with a flag icon, three reason radios and a textarea that appears only for Something else and must be filled in, plus Dismiss and Submit buttons.

Modal dialogsdashboard-modal15Alert preferences dialog with three radio options, each with a label and a description of which response alerts are sent, and Discard and Apply buttons in the footer.

Modal dialogsdashboard-modal16Command palette dialog with a search field, three groups of actions with icon boxes, context text and shortcut keys, and a footer with arrow key hints and a Compose message button.

Modal dialogsdashboard-modal17Team members dialog with a search field that filters by name or email, an Add user button and a member list with avatars, verified badge, Creator label and permission selects.

Modal dialogsdashboard-modal18Create project dialog with a kickoff date picker in a popover calendar, urgency, owner and channel selects, Anyone or Invite only radios and Discard and Continue buttons.

Modal dialogsdashboard-modal19Edit profile dialog with avatar upload and delete buttons, a file format note, first and last name fields, a validated email and a phone field with a country code select.

Modal dialogsdashboard-modal2Share board dialog with a title, a line about view access and a read-only link field with an inline copy icon button and a tooltip that confirms when the link is copied.

Modal dialogsdashboard-modal20Updates dialog with Newest, Boards and Docs tabs, a status filter dropdown, an activity list with avatars, status dots and times, an unread count and footer actions.

Modal dialogsdashboard-modal21Upgrade dialog with a billing name, credit card or bank debit choice, card fields, country select and postal code, monthly or yearly radio cards, an AI add-on checkbox and a live total.

Modal dialogsdashboard-modal22Company setup dialog with a logo preview, a click or drag and drop upload zone, business name, site address, handle with URL prefix, an about textarea and a terms checkbox.

Modal dialogsdashboard-modal23Quiz builder dialog with topic select, prompt field, drag and drop image upload, a list of answer fields with Correct and delete buttons, a New Option button and a status select.

Modal dialogsdashboard-modal24Integration consent dialog with two app icons, a connect title, a copyable link field, a checklist of requested permissions, a privacy note and Not now and Grant access buttons.

Modal dialogsdashboard-modal25Two-column sign up dialog with a cover image hidden on mobile, Google and second provider buttons, a validated underline email field, a Get started button and a terms link.

Modal dialogsdashboard-modal26Verification dialog with an icon header, the target email with an edit link, four large OTP slots validated for four digits, a resend link and Confirm and Dismiss buttons.

Modal dialogsdashboard-modal27Account creation dialog with email, phone and password fields with icons, a show password toggle, a five-step strength meter, a terms checkbox that enables submit and a sign in link.

Modal dialogsdashboard-modal28Two-factor setup dialog with a QR code generated from an otpauth URL, a Continue button and a read-only setup key field with a copy button that confirms the copy.

Modal dialogsdashboard-modal3Start a chat dialog with a searchable command list of contacts with avatars and check marks, a footer of stacked selected avatars and a Create chat button that needs two people.

Modal dialogsdashboard-modal4Sharing settings dialog with an add by email form and role select, a member list with Editor or Viewer selects and the owner marked, and a link access select with a Get link button.

Modal dialogsdashboard-modal5Switch profile dialog with four selectable account rows showing avatar, name, email and a round check indicator on the active one, plus a New profile button at the bottom.

Modal dialogsdashboard-modal6Four-step onboarding dialog with a step counter, name and email fields, team size radios, a US checkbox, goal checkboxes and a teammate invite field, with back and next buttons.

Modal dialogsdashboard-modal7Mood survey dialog with an icon header, a heading, five emoji buttons where the selected one grows and shows its label, a note textarea and a Send Answer button.

Modal dialogsdashboard-modal8Service rating dialog without a close icon, showing five emoji rating tiles in a responsive grid with the selected tile outlined, and Not now and Send buttons.

Modal dialogsdashboard-modal9Feedback dialog with five emoji rating buttons, a validated comment textarea with a remaining character counter, a contact consent checkbox and Dismiss and Send response buttons.

Page layoutsdashboard-page-layout1App frame with an inset sidebar holding a brand button, Platform links and a Projects list, plus a header with sidebar toggle and breadcrumb above an empty rounded content area.

Page layoutsdashboard-page-layout2Top navigation layout with logo, dropdown menus for Get Started, Apps and Pages, mail and bell buttons with a numbered badge and an avatar menu, switching to a sidebar on phones.

Page layoutsdashboard-page-layout3Top navigation layout with logo, dropdown menus and an underline on the active menu, a sun and moon toggle, mail and bell buttons with dot indicators and an avatar menu, using a sidebar on phones.

Dashboard shelldashboard-shell1Sidebar shell with main links, a collapsible Active Projects list with progress rings and item menus, bottom links, and a header with breadcrumb, command search, message and notification popovers and an avatar menu.

Dashboard shelldashboard-shell2Double sidebar shell with an icon rail of tooltipped links and avatar menu beside a panel holding a workspace switcher and grouped settings links, plus a header with title and Documentation button.

Dashboard shelldashboard-shell3Narrow rail shell with a framed logo, stacked icon and label links, Support and Apps shortcuts and an avatar menu, plus a header with sidebar toggle, page title and right aligned breadcrumb.

Dashboard shelldashboard-shell4Slim rail shell with round icon links and an avatar menu, a tall muted header with title, subtitle, product search and round notification, profile, theme and settings buttons, and content cards overlapping the header.

Dashboard shelldashboard-shell5Top navbar shell with mega menu dropdowns, icon actions and avatar inside a tall muted header with a Dashboard title, Filter and Create buttons, overlapping content cards and a collapsible sidebar on phones.

Dashboard shelldashboard-shell6Sticky top navbar with logo, page links, icon actions and a greeting avatar, above a static sidebar of Public, My Activity and Categories groups showing count badges, with a sheet version on phones.

Dashboard shelldashboard-shell7Floating sidebar with logo, avatar menu, goal progress with budget and spent figures, a grid of service tiles and an upgrade card, beside a top bar with dropdown menus, command search, messages and notifications.

Dashboard shelldashboard-shell8Floating sidebar that collapses to icons, with a Quick Create button, inbox button, main links and a Documents list with item menus, plus a floating header with breadcrumb, command search, popovers and avatar menu.

Dashboard shelldashboard-shell9Top navigation shell with logo, dropdown menus with an active underline, theme toggle, mail and bell buttons and avatar menu, that renders the same links in a sidebar sheet only on phones.

Use casesdate-picker-example1Calendar and date-range pickers with presets like today, last 7 days, this month. Copy these shadcn/ui patterns for filters and booking flows.

Use casesdate-picker-example2Calendar and date-range pickers with presets like today, last 7 days, this month. Copy these shadcn/ui patterns for filters and booking flows.

Use casesdate-picker-example3Calendar and date-range pickers with presets like today, last 7 days, this month. Copy these shadcn/ui patterns for filters and booking flows.

Use casesdate-picker-example4Use cases built with shadcn/ui.

Ecommerceecommerce-chart1Charts for store visits, sales, and revenue, donut, bar, and trend views. Drop them into dashboards and reports with shadcn/ui for consistent styling.

Ecommerceecommerce-chart2Charts for store visits, sales, and revenue, donut, bar, and trend views. Drop them into dashboards and reports with shadcn/ui for consistent styling.

Ecommerceecommerce-chart3Charts for store visits, sales, and revenue, donut, bar, and trend views. Drop them into dashboards and reports with shadcn/ui for consistent styling.

Ecommerceecommerce-chart4Ecommerce built with shadcn/ui.

Empty stateempty-state1Survey responses card with title and description, containing a centered empty state with a round chart icon, a no responses message and an outline Create survey button.

Empty stateempty-state10AI agents first run state with three skeleton agent cards, the side cards faded and hidden on mobile, a Build your AI workforce title, description and an Add agent button.

Empty stateempty-state11No files found state on a faded grid background with three tilted file cards labeled DOC, PDF and XLS, a message naming the search term and a Clear filters button.

Empty stateempty-state12Domains first run state on a grid background with two skeleton domain rows, a no domains yet title, a short benefit message, and Add domain and See tutorial buttons.

Empty stateempty-state13Waitlist empty state with two stacked placeholder member rows showing decline and approve slots, a no one is waiting title, an explanation and a View Products button.

Empty stateempty-state14Command style search card with a prefilled search input and shortcut keys, a dotted no tools found area with Browse all tools button, and two footer actions with keyboard shortcuts.

Empty stateempty-state15Compact no projects state with a folder code icon, a short workspace message and small Create project and Import project buttons side by side.

Empty stateempty-state16First project state with a title and description, three linked template rows for marketing, engineering and event planning with icons and chevrons, and a Create blank project link button.

Empty stateempty-state17Restricted page state with a blurred browser window mockup behind a red lock badge, an admin only message, and Go back and Contact support buttons.

Empty stateempty-state18Offline state with a wifi off icon, a connection message and a Try again button that shows a spinner and Reconnecting text for a moment before returning.

Empty stateempty-state19Feature card with a site scan tile, a pulsing sparkle icon and a report tile with CSV badge joined by dashed connectors on faded rings, above an automated audits title and description.

Empty stateempty-state2No search results state under a soft radial glow, showing three overlapping avatars, a no engineers found title, the searched name with an invite link, and a Clear search button that shows a toast.

Empty stateempty-state20Feature card with chat, mail, design and docs icons linked by curved lines to a central Services pill on soft arcs and a dotted background, above a left aligned title and description.

Empty stateempty-state21Growth card with a title and description above a seven month recharts bar chart where every bar is faded except one highlighted gradient bar.

Empty stateempty-state22Get started list of three cards for exploring datasets, writing SQL and building a dashboard, each with a title, description, outline action button and a small illustration on a dashed grid.

Empty stateempty-state3All files view with type tabs, a search field and Filters button above a bordered empty state with orbiting file icons on rings, a message that follows the search, Clear search and New document buttons.

Empty stateempty-state4Contact import progress state with three skeleton contact cards, floating avatars on concentric rings, an importing message, and Notify me and Refresh page buttons that show toasts.

Empty stateempty-state5Orders header with Filters, Export and Add order buttons over a table column row, followed by a folder and search illustration, a no orders match message and a Search again button.

Empty stateempty-state6Centered no data state with a dashed square database icon, a two line message, and Learn more and Add new item buttons that stack full width on mobile.

Empty stateempty-state7Access denied state with a red lock icon inside two rings, a billing workspace permission message, a Back to dashboard button and a Request access button that switches to a disabled Request sent state.

Empty stateempty-state8Account setup prompt with a badge icon, a verification message and a Complete registration button, followed by a muted card listing three numbered activation steps.

Empty stateempty-state9Minimal reports state with two tilted document outlines in a muted circle and a two line message explaining that reports appear after the first billing cycle closes, with no buttons.

Event calendarevent-calendar1Event calendar with month, week, day and agenda views, keyboard view shortcuts, drag to reschedule in quarter hours, current time line, more events popover and an event dialog with colors.

Event calendarevent-calendar2Month calendar with collapsible sidebar holding user menu, date picker and grouped calendar checkboxes that hide events, a six week grid with event chips and a new calendar dialog.

Event calendarevent-calendar3Day planner with icon rail, greeting, mini month with event dots and weekend shading, hourly timeline from 8 AM to 10 PM with side by side overlaps, time line and create dialog.

Event calendarevent-calendar4Minimal calendar with month dropdown, large selected date, to-do list with time badges, next two upcoming events, month grid with colored day markers and an add to-do dialog.

Faqsfaq1Centered FAQ label, heading and intro above a single column accordion of six questions. Only one answer opens at a time and the second question starts expanded.

Faqsfaq10Muted section with one card holding a badge, heading, still have a question note and avatar group on the left and a stacked, joined border accordion of five questions on the right.

Faqsfaq2Two column layout with a label, heading and text on the left and six questions as separate rounded cards on the right, with the chevron before the text and a muted background when open.

Faqsfaq3Centered badge and heading above a category sidebar (General, Workouts, Membership, Technical) and an accordion with plus icons, followed by a Still have questions banner with a Contact support button.

Faqsfaq4Two column section with a heading, short text and Contact Sales button on the left and a five question accordion on the right using plus and minus circle icons.

Faqsfaq5Badge, heading and text above six questions with their answers always visible in a three column grid, and a Still have questions banner with a Contact Us button at the bottom.

Faqsfaq6Narrow centered column with a heading, full width tabs for General, Features and Security, an accordion of rounded question cards for the active tab and a Book a free call box.

Faqsfaq7Short intro text opposite a large italic serif FAQ's heading with an arrow, above a full width accordion with large uppercase questions and answers placed in the right half.

Faqsfaq8Narrow left column with a FAQs label, heading, support avatar and Book a Free Call button, next to a wide six question accordion whose plus icon turns into a minus.

Faqsfaq9Two column layout with a heading and five question accordion with leading chevrons on the left and a tall rounded image on the right that is hidden below the large breakpoint.

Feature sectionsfeature1Centered header with an Our Features badge above a grid of eight feature cards, each with a colored icon tile, title and description, in one, two or four columns.

Feature sectionsfeature10Shop By Categories header with an Explore More button above a two by two grid of photo tiles with dark gradients, white titles, descriptions and Explore Now buttons.

Feature sectionsfeature11Autoplaying image carousel beside a list of three clickable features. The active item fills with a progress bar that tracks the time until the next slide.

Feature sectionsfeature12Centered Features badge, heading and paragraph above a description list of four features in two columns, each with a square primary icon tile beside the text.

Feature sectionsfeature13Centered Features badge, heading and paragraph above six numbered features in two columns, each with a round bordered step number from 01 to 06, title and description.

Feature sectionsfeature2Two column layout with a Complete Solution label, headline, intro text and Get Started button on the left and four colored icon features in a two column grid on the right.

Feature sectionsfeature3Headline with a gradient word next to intro text and a Try ContentAI button, above four cards with round primary icons, descriptions and Learn more links.

Feature sectionsfeature4Centered heading above a square image placed in the middle, with three icon features stacked in a column on each side of it on large screens.

Feature sectionsfeature5Badge and centered headline above a two column layout: a list of four features with small icon tiles beside text on the left and a square image on the right.

Feature sectionsfeature6Left aligned headline and paragraph above a five column grid that puts four bordered icon features in a two by two grid next to a square image.

Feature sectionsfeature7Cloud Infrastructure badge, headline, paragraph and Let’s talk button above a wide video ratio image and a grid of six feature cards with round icons.

Feature sectionsfeature8Centered heading above four tabs. Each tab shows an image beside a paragraph and four muted cards with feature titles and descriptions. Tabs stack vertically on mobile.

Feature sectionsfeature9Two alternating rows, each pairing a 4:3 image with a small dot label, large heading, paragraph and outline button. The second row flips the image to the right on desktop.

Footersfooter1Five column footer with the logo in the first column and four link lists for Products, Resources, Learn and About Us. On phones the logo spans the top and the lists form two columns.

Footersfooter10Call to action footer on a purple radial gradient with an availability badge, large Are you ready headline, Book a Call and See Plans buttons, and a bottom link bar with a logo credit.

Footersfooter11Photo panel with a Let's Connect title beside Visit, Write and Call rows, then a centered newsletter with round send button, uppercase navigation links, the logo and a copyright line.

Footersfooter12Headline with an outline Get started button above a separator, then the logo, tagline and four labelled social icons beside Company, Pages and Services link columns.

Footersfooter2Compact footer with the logo, five text links and five social icons in one row on large screens, then a separator, a dynamic copyright year and privacy, terms and cookie links.

Footersfooter3Newsletter row with heading, text, email input and Subscribe button, then the logo with Company, Products, Resources and Support link columns and a bottom bar with copyright, legal links and social icons.

Footersfooter4Footer with the logo, newsletter text, email input, outline Subscribe button and privacy consent note on the left, Company, Products and Follow us columns with labelled social links, and a legal bar.

Footersfooter5Rounded top card on a muted background with logo, description and five social icons, Products, Resources and Company columns with a Hiring tag, a copyright row and a large outlined Shadcn wordmark.

Footersfooter6Muted footer with a centered newsletter card holding a rounded email input and Subscribe button, then the logo, round social icons, three link columns and a copyright bar with a back to top button.

Footersfooter7Three column footer with the logo and an Explore Components button, a Contact column with email and X, GitHub and Discord icons, a two column quick links list and a legal bottom bar.

Footersfooter8Muted area with a centered heading, text and rounded free trial button above a card holding the logo, description, two social icons and Pages and Information link lists, plus a credit line.

Footersfooter9Three column footer with the logo and description, a list of large bold page links and a stack of social links with arrow icons, followed by a copyright and licences bar.

Form layoutsform-layout1Account settings page with three titled sections: avatar upload, handle and bio with counter, contact and address fields, email digest checkboxes and push mode cards, plus a sticky save bar with discard.

Form layoutsform-layout10Sign-up card with email, username availability icon, password toggle with rules checklist and five segment strength meter, region and role selects, terms checkbox and a confirm your email success view.

Form layoutsform-layout11Space creation card with square cover image dropzone, name with hashtag handle and counter, purpose textarea, visibility and topic selects, and a multi-select invite combobox that accepts directory people or guest emails.

Form layoutsform-layout12Campaign form with Draft with AI button, name, date range picker, brand select with inline new brand, owner select, budget and impressions with CPM line, brief, attachment, channel toggles and status cards.

Form layoutsform-layout13Five tab product form with progress: title and category suggestions, size and color variant table with stock and price, pricing panel, image uploads with cover, markdown description, keyword chips and shipping options.

Form layoutsform-layout14Public page editor with cover banner and overlapping avatar, display name, debounced username availability check, website prefix, photo upload, bio formatting toolbar with counter, role checkbox and booking email.

Form layoutsform-layout15Workspace settings page with vertical tabs that become a select on mobile: organization name, slug, tagline and logo upload, member invites with role selects and seat count, and a billing contact form.

Form layoutsform-layout16Storefront settings with scrollable tabs: store name, subdomain, tagline and logo previews on light and dark, social handles, checkout switches and options, return window, restocking fee and policy text, plus sticky save bar.

Form layoutsform-layout17Flower delivery checkout in five numbered sections: sender, recipient address, delivery date and time window cards, gift note with counter and add-ons, payment method with card fields, and a sticky total bar.

Form layoutsform-layout18Event card form with title, date picker, start and end time comboboxes showing duration, all day checkbox, guest chips, location combobox with online meeting link, description counter and calendar select.

Form layoutsform-layout19Account settings card with vertical tabs for profile and photo, locale selects with live preview, password change with strength meter, security switches, email and push notification groups, and a typed DELETE confirmation dialog.

Form layoutsform-layout2Workspace creation card with owner name, email, birth year and locked role, workspace name with live subdomain, access select, note counter, three plan radio cards, team alert checkboxes and success summary.

Form layoutsform-layout20Three step onboarding wizard with horizontal stepper: account fields with password toggles and timezone, company details selects, then billing cycle toggle, three plan cards, summary panel and terms checkbox.

Form layoutsform-layout21Four step product listing wizard with a vertical step rail: category cards, brand and condition, title, description, SKU and tags, price with compare-at discount and inventory switches, then a review step with edit buttons.

Form layoutsform-layout22Profile card with Personal, Account and Social tabs: names, country, language, birth date and phone, username, email, timezone, account type cards and privacy switches, then website and four social handles.

Form layoutsform-layout3Mentor profile card with label-left rows: photo upload, name, birth date and slot pickers, time inputs, expertise tag input with suggestions, visibility select, status switch and a live completion percentage badge.

Form layoutsform-layout4Staff account page with a profile card for photo, name, email, phone, role and clinic selects, and a password card with show toggles, four segment strength bar, rules checklist and sign-out checkbox.

Form layoutsform-layout5Workshop feedback form with answered progress bar, name and email fields, five face rating cards, session checkbox cards, highlight textarea with counter, 0 to 10 scale, follow-up switch and thank-you summary.

Form layoutsform-layout6Two column checkout with payment method cards, auto-formatted card number with brand badge, expiry and CVC, country based billing address, renewal checkbox and a sticky summary with promo code, tax and pay button.

Form layoutsform-layout7Freelancer settings in two cards that save separately: personal details with photo dropzone, and public profile with availability switch revealing rate and start date, handle availability icon, website prefix and bio counter.

Form layoutsform-layout8Wholesale order form with order type, copyable order number, date picker, PO and customer selects that set currency, amount with converted USD base, warehouse and project selects, note counter and invoice confirmation.

Form layoutsform-layout9Client project form with label-left rows: name, portal slug filled from the name, engagement radio cards, budget, kickoff and template selects, stakeholder chip input, digest switch, brief counter and summary footer.

Gantt chartgantt-chart1Product roadmap timeline grouped by team with a team filter, Daily, Monthly and Quarterly scales, zoom, release markers, draggable feature bars and a side sheet for editing status, owner, dates and progress.

Gantt chartgantt-chart2Construction schedule grouped by phase with overall progress, overdue counts, task search, assignee filter, scale and zoom controls, draggable task bars, milestones, an add task dialog and an edit sheet.

Gantt chartgantt-chart3Team resource planner with one lane per person grouped by department, monthly load badges, client filter, project and time off bars with hours per day, an assignment popover and an Assign work dialog.

Hero sectionshero1Centered hero with a bordered funding announcement pill and Read more link, a large headline, a short paragraph, and Get started and ghost Learn more buttons side by side.

Hero sectionshero10SaaS hero with navbar and Sheet mobile menu, linked outline badge, headline with a primary colored phrase, paragraph, single Start Free Trial button, and a wide dashboard photo cropped at the bottom.

Hero sectionshero11Dark purple gradient hero with a frosted glass navbar, linked badge, white headline, Get Started and Learn More buttons, and a horizontally scrolling strip of team photos with faded edges.

Hero sectionshero12Store hero with navbar, shopper avatars and five star rating, headline with a primary highlight, Shop Now and Watch our story buttons opening a video dialog, and five grayscale brand logos.

Hero sectionshero13Full-viewport dental clinic photo hero darkened from the left, frosted pill navigation, Call Now button, dropdown mobile menu, and headline, paragraph and Book Appointment button anchored bottom left.

Hero sectionshero14Two-column store hero with a linked badge, headline, Browse products and Explore collections buttons and an avatar order count, beside two vertical product photo marquees moving in opposite directions.

Hero sectionshero15Split integrations hero with a logo navbar, pill Log in and Get started group, headline, highlighted paragraph, rounded CTA and team avatars, beside a central logo tile circled by app icons moving along two tilted orbits with depth.

Hero sectionshero16Rounded primary card hero with a floating pill navbar, student avatars, serif headline, Find your tutor and outline buttons and counting stats, beside two tutor photo card columns scrolling in opposite directions.

Hero sectionshero17Full-bleed photo hero in a rounded frame with a centered logo navbar and a right Drawer menu, check note, large headline, white and frosted buttons, and three divided highlights along the bottom.

Hero sectionshero18Centered SaaS hero with a logo navbar, outlined badge flanked by fading lines, large headline, Start free trial button and a glowing framed dashboard preview with an icon rail, hours card and capacity bar chart.

Hero sectionshero19Full-height photo hero with a dark announcement bar, bordered navbar with mono uppercase links, a square-marked label and uppercase headline bottom left, and a paragraph, arrow links and Book now button bottom right.

Hero sectionshero2Centered hero with a linked New badge announcement, headline, paragraph, Get started and Learn more buttons, then four overlapping reviewer avatars beside five stars, a 5.0 score and a review count.

Hero sectionshero20Editorial split hero with a Menu button opening a left Drawer, centered two-line serif logo and Contact button, uppercase eyebrow and serif headline beside a paragraph and CTA, above a full-width photo.

Hero sectionshero21Centered app hero with logo navbar, bold headline, short paragraph and Get started button above a phone mockup showing a profile and action list, with a streak card and a tilted task card floating beside it.

Hero sectionshero22Primary color hero with a pill navbar, large centered serif headline, volunteer and outline buttons, and three fanned photo cards that spread apart on hover.

Hero sectionshero23Dark SaaS hero with animated light rays, a central beam and a glowing horizon arc behind a dashboard preview showing uptime, live deployments and a requests area chart.

Hero sectionshero24Rounded primary panel hero with a soft grid pattern and stepped side blocks, centered headline and CTA, and three shipping cards for active parcels, weekly deliveries chart and a live route.

Hero sectionshero25Full-height landscape photo hero fading into the background at the top, with a two-tone serif headline, secondary and arrow CTA buttons and a five star rating line.

Hero sectionshero26Centered community hero with split navigation around the logo, serif and bold two-line headline, CTA, a row of portraits curved in 3D perspective and three divided feature columns.

Hero sectionshero3Centered hero with a version announcement pill, headline with one word on a skewed purple highlight, Get started button, and a Watch video button that opens a YouTube embed in a dialog.

Hero sectionshero4Full-height AI hero on a radial purple gradient with logo navbar and Sheet mobile menu, a prompt textarea with Add and Send icon buttons, four suggestion links and a terms note.

Hero sectionshero5Navbar with Sheet mobile menu above a two-column hero: version badge with spinning sun icon, headline, two rounded buttons, and a card grid with a photo, two stats and member avatars.

Hero sectionshero6Navbar with Login and Get Started above a two-column hero: badge, headline, paragraph, two buttons and a three-number stats row on the left, a staggered two-column product photo grid on the right.

Hero sectionshero7Rounded pill navbar above a two-column hero with a trial badge, headline, inline email field with Subscribe now button and avatar rating row, beside tech logos rotating on two orbit rings.

Hero sectionshero8Muted hero with a rounded navbar, pulsing member count badge, centered headline, Get Started and Book a demo buttons, a gradient divider line and four white stat cards in a grid.

Hero sectionshero9Hotel hero with dropdown navbar and accordion mobile menu, a rounded photo banner with serif headline, glass booking bar with check in and check out calendars, guest select and three stats.

How it workshow-it-works1Centered badge, heading and subtitle above three steps with icons in dashed circles joined by dashed curved connectors on desktop. On phones the steps become a vertical timeline with a dashed line.

How it workshow-it-works10Small uppercase label and centered heading above three bordered cards, each with a top image, a title, a short description and a Learn more link with an arrow.

How it workshow-it-works11Centered heading and paragraph above three step cards, each with a step label, a large fading number in the corner, a title and a short description.

How it workshow-it-works2Three column layout with a heading and text on the left, a tall rounded building photo in the middle and four numbered steps with titles and descriptions on the right.

How it workshow-it-works3Two column section with a rounded product image on one side and a How it works badge, heading and three numbered steps separated by dividers on the other.

How it workshow-it-works4Narrow centered column with a heading and subtitle above three steps separated by dividers, each with a small #1 style number tag, a bold title and a longer paragraph.

How it workshow-it-works5Three column grid where a muted card holds the heading and subtitle and five bordered cards show numbered steps with a small number badge, title and description.

How it workshow-it-works6Two tone How we Work heading above four steps in a divided list, each with a rounded Step 01 style pill, a large title and a short description.

How it workshow-it-works7Centered badge, heading and text above three bordered cards with oversized faded step numbers, a title and a description. The number brightens slightly when a card is hovered.

How it workshow-it-works8Image panel next to three clickable steps that auto advance every three seconds. The active step expands its description, shows a progress bar and fades in its matching image.

How it workshow-it-works9Two column grid of four steps without a section heading, each showing a step number, a title, a short description and a bordered image below the text.

1illustration11 built with shadcn/ui.

10illustration1010 built with shadcn/ui.

11illustration1111 built with shadcn/ui.

12illustration1212 built with shadcn/ui.

13illustration1313 built with shadcn/ui.

14illustration1414 built with shadcn/ui.

15illustration1515 built with shadcn/ui.

16illustration1616 built with shadcn/ui.

17illustration1717 built with shadcn/ui.

18illustration1818 built with shadcn/ui.

19illustration1919 built with shadcn/ui.

2illustration22 built with shadcn/ui.

20illustration2020 built with shadcn/ui.

21illustration2121 built with shadcn/ui.

22illustration2222 built with shadcn/ui.

23illustration2323 built with shadcn/ui.

24illustration2424 built with shadcn/ui.

25illustration2525 built with shadcn/ui.

26illustration2626 built with shadcn/ui.

27illustration2727 built with shadcn/ui.

28illustration2828 built with shadcn/ui.

29illustration2929 built with shadcn/ui.

3illustration33 built with shadcn/ui.

30illustration3030 built with shadcn/ui.

31illustration3131 built with shadcn/ui.

32illustration3232 built with shadcn/ui.

33illustration3333 built with shadcn/ui.

34illustration3434 built with shadcn/ui.

35illustration3535 built with shadcn/ui.

36illustration3636 built with shadcn/ui.

4illustration44 built with shadcn/ui.

5illustration55 built with shadcn/ui.

6illustration66 built with shadcn/ui.

7illustration77 built with shadcn/ui.

8illustration88 built with shadcn/ui.

9illustration99 built with shadcn/ui.

Integrationsintegrations1Centered headline above a three column grid of integration cards, each with an app logo, name, one line description and a Learn More link button.

Integrationsintegrations2Header with an App Integration badge, headline and Browse All Apps button, above a three column grid of app cards with logo, name, description and a Connect button.

Integrationsintegrations3Compact centered section with a headline, a row of overlapping round app logos that show each app name in a tooltip, and a See all integration button.

Integrationsintegrations4Two column layout with a headline, short text and Explore Integration button on the left and a grid of logo cards with app names on the right.

Integrationsintegrations5Two column layout with copy and a Browse All Apps button on the left and two columns of logo cards scrolling vertically in opposite directions on the right.

Integrationsintegrations6Headline and Browse All Apps button above two rows of logo cards that scroll horizontally in opposite directions with faded edges.

Integrationsintegrations7Centered integrations heading with a badge and link on a dotted background, surrounded by brand logos that slowly orbit along a large ring.

Kanban boardkanban-board1Sprint board with five draggable columns from Backlog to Done, cards with update time, progress bar, attachment and comment counts and avatars, task search, CSV export and a task dialog.

Kanban boardkanban-board2Project board with Board, List and Table tabs, status icon columns, cards with description, due date, progress ring and links, assignee filter, invite dialog, share link copy and task dialog.

Kanban boardkanban-board3Sales pipeline with four stages summing deal values in dollars, lead cards with channel icon, owner, due date and comments, scope select, channel filter, per stage sorting and a table view.

Kanban boardkanban-board4Team board with a sidebar of members and projects that filter cards, email invite, tag filter, cards with tags, cover images and progress, editable board name, share popover and Members tab.

Kanban boardkanban-board5Project board with Board, Table and Timeline tabs, back and forward view history, cards with priority flag, quarter badge and assignee picker, sort, priority filter, search and automation switches.

Kanban boardkanban-board6Onboarding checklist as collapsible status groups with draggable rows, done checkbox, subtask and attachment counts, tags, owner avatar, due date and priority flag, inline quick add and filters.

Kanban boardkanban-board7AI agent board where prompt cards with model badge and attached files move from Backlog and Planning to Running, show a spinner, then move to Review as completed, with model filter.

Lineline-chart1Line charts for balance, trends, and time-series data. Use these shadcn/ui examples when you need clear trend visualization in dashboards or reports.

Lineline-chart2Line charts for balance, trends, and time-series data. Use these shadcn/ui examples when you need clear trend visualization in dashboards or reports.

Lineline-chart3Line charts for balance, trends, and time-series data. Use these shadcn/ui examples when you need clear trend visualization in dashboards or reports.

Lineline-chart4Line built with shadcn/ui.

Mail appmail-app1Three pane mail client with resizable, collapsible folder navigation, account select, color labels, All and Unread tabs, search, reading pane with snooze, archive and junk actions, reply and compose.

Mail appmail-app2Inbox start page with greeting, live clock and three counters, day grouped inbox with priority badges, filter and sort, task checklist, comment feed and a message sheet with reply.

Mail appmail-app3Mail app with workspace rail, sidebar holding account menu, Cmd+K search, compose, nested folders and storage meter, tabbed list with attachment chips and reading pane with attachments and undo.

Mail appmail-app4Sales inbox with tabbed lead conversations, thread with AI summary showing intent, sentiment and next step, drafted and scheduled replies, meeting booking and contact panel with activity and campaigns.

Mail appmail-app5Inbox with workspace switcher, folders and labels you can add inline, starrable message list, newsletter reader with hidden images notice, unsubscribe button, collapsible sender details and reply box.

Mail appmail-app6Inbox with account switcher, core and smart folders, Primary, Promotions, Social and Updates tabs, collapsible day groups with checkboxes, bulk archive, read and delete, and a side reading panel.

Mail appmail-app7Client inbox with top search bar, icon rail, All, Unread, Flagged and Sent tabs, rows with activity line and status badge, and a thread view with flag, inline reply and forward.

Mail appmail-app8Full width inbox with icon rail, search, Ask AI popover that turns prompts into filters, label and unread chips, Inbox, Sent and Newsletters sections and a reader sheet with attachments.

Map viewmap-view1World property map with a floating list panel: search, list or grid view, favorites toggle, type and availability filter popover, and icon markers shaded by availability that fly to each selected listing.

Map viewmap-view10Multi stop route planner with a collapsible numbered stop list, total miles and time, reorder and remove controls, an add destination popover, and numbered map markers joined by a route line.

Map viewmap-view11Country choropleth map shading users by share of the top country, with metric and date range selects, a color legend and a ranked country list with change arrows and a View all toggle.

Map viewmap-view2Chicago apartment search with price, unit type, floor and amenity filter popovers, a sort select, list or grid cards and rent price pill markers that open a photo popup with a save button.

Map viewmap-view3Real estate investment map with country, type and price selects, funding status tabs with counts, a listing panel showing token price, IRR and APR, copy link and watchlist buttons, and status colored markers.

Map viewmap-view4Audience overview map with visitor bubbles sized per city, a 24h, 7d and 30d tab switch, a users card with sparkline and device split, and lists of top pages, referrers, countries and browsers.

Map viewmap-view5Delivery tracking panel with ETA, distance left, progress and an itemized order, a timeline sheet and courier contact popover, plus a map route split into driven and remaining parts with play controls.

Map viewmap-view6Edge network status map with overall state, 30 day uptime and nodes up, All, Healthy, Degraded and Down filters, a location list with latency and status dot markers that open a detail popup.

Map viewmap-view7Store locator with name or address search, an Open now toggle, store cards with hours and phone, pin markers colored by open status and a popup with a Get directions link.

Map viewmap-view8EV charging finder with a session range select, date picker, free ports and session totals, station rows with price per kWh and a time slot booking popover, and charger markers around your location.

Map viewmap-view9Run summary card over a map showing the route with start and finish markers, athlete and date, distance, duration and average pace, plus kilometer splits with pace bars, elevation gain and cadence.

Navbarsnavbar1Bordered top bar with a text logo, Features, Pricing and About links plus a Resources dropdown, Sign In and Get Started buttons, and a right side drawer with the same links on mobile.

Navbarsnavbar10Skin care store header with a Shop mega menu of five link columns, New Arrivals and Skin Quiz links, a centered logo and account, search and a cart popover with items and subtotal.

Navbarsnavbar11Fashion store header with Shop and Collections links, an Accessories mega menu with three link columns and two featured images, a centered logo and search, account, wishlist and cart icons.

Navbarsnavbar12Two level store header with a dark top bar of social icons and utility links, then search, a centered logo with an All Products mega menu and four links, and wishlist, account and cart icons.

Navbarsnavbar13Course platform header with a dismissible announcement bar, a Courses mega menu of icon categories and a promo card, Creatives and Projects links, a search field and Log in and Sign up buttons.

Navbarsnavbar14Agency header with UI Design and Services links, Customers, Resources and About dropdowns listing icon items with descriptions, a promo card in Resources and a Book a call button.

Navbarsnavbar15Studio header with a logo, a pill of social text links and a two line menu button that opens a full screen inverted overlay with large uppercase links, an address and social links.

Navbarsnavbar2Floating rounded bar on a muted background with a text logo, four plain links and Sign In and Get Started buttons. Below the medium breakpoint the links move into a right side drawer.

Navbarsnavbar3Store header with Shop, Categories and Quick Links dropdowns showing descriptions and a New Arrivals image card, a Support link, a cart dropdown with item count badge and a Sign In button.

Navbarsnavbar4Three part header with the logo on the left, four links centered and ghost Sign in and filled Register buttons on the right, collapsing into a right side drawer on mobile.

Navbarsnavbar5App header with the logo and four links, a messages dropdown, a notifications dropdown with an unread dot and an avatar menu with Profile, Settings and Log out, plus a mobile drawer.

Navbarsnavbar6App header with a search field next to the logo, four centered links, messages and notifications dropdowns, an avatar menu and a mobile drawer containing search and links.

Navbarsnavbar7App header with the logo and four links on the left and a search field, messages and notifications dropdowns and an avatar menu grouped on the right, plus a mobile drawer.

Navbarsnavbar8Header with the logo and four links, a compact search field and an avatar trigger showing the user name and a chevron that opens Profile, Settings and Log out, plus a mobile drawer.

Navbarsnavbar9Search focused header with the logo, a wide search field in the middle and messages, notifications and avatar menus on the right. It has no link list or drawer.

Newsletter sectionsnewsletter1Centered heading and intro text above a card titled Subscribe to our Newsletter with a short description, one email input and a full width Subscribe button in the card footer.

Newsletter sectionsnewsletter2Muted card split in two: a Newsletter badge, heading, text and three checked benefits on the left, and a labelled email form with mail icon, privacy hint, Subscribe button and reader count on the right.

Newsletter sectionsnewsletter3Single row sign-up with the heading and a short description on the left and an email input with a Subscribe button on the right. Stacks vertically on small screens.

Newsletter sectionsnewsletter4Bordered panel on a muted background with a centered heading, text, email input and Subscribe button, four round member photos floating around it on desktop and an avatar group with a joined count.

Newsletter sectionsnewsletter5Full width section with a background image, a large white headline, short text and an email input next to a secondary Subscribe button, aligned to the left.

Newsletter sectionsnewsletter6Two column layout with a Subscribe badge, heading, text, stacked email input and full width Subscribe Now button plus three checked topics on the left, and a rounded photo on the right.

Newsletter sectionsnewsletter7Edge to edge split section with a photo filling one half and a heading, text, stacked email input, full width Subscribe button and a privacy note on the other half.

Newsletter sectionsnewsletter8Tall section with a landscape background image, one centered sentence and a translucent email field with the Subscribe button placed inside the input, wrapped in a form.

Onboarding screensonboarding-screen1Card questionnaire asking role, team size, areas to track and workspace name one at a time, with question counter, previous, skip and next actions, and a success state with Start over.

Onboarding screensonboarding-screen10Card wizard with a step label and a vertical timeline of sub tasks that fill in when done and unlock the next, covering project name and template, content source and team invites with a role.

Onboarding screensonboarding-screen2Split card with a dark panel listing four steps as done, active or upcoming beside a questionnaire about goal, referral source, tools to connect and work email, ending in a completion message.

Onboarding screensonboarding-screen3Full page wizard with brand header, step count, skip button and thin progress bar, asking plan, modules, a teammate invite and workspace URL, with number key shortcuts and a keyboard hint row.

Onboarding screensonboarding-screen4Adaptive setup card where the audience answer enables or disables the roles and access policy questions, followed by a launch date, with a footer list showing which steps are asked or skipped.

Onboarding screensonboarding-screen5Cardless questionnaire with a segmented progress bar and counter, questions that fade and slide in, next and submit buttons greyed out until answered, and an animated confirmation with Run it again.

Onboarding screensonboarding-screen6Overview page with three stat cards and a placeholder panel, plus a Personalize dashboard dialog that asks for top widgets, default time range and digest recipient before closing.

Onboarding screensonboarding-screen7Three step brief flow with company type chips and a size slider, selectable service cards with check badges, and a contact form with country phone prefix, ending in a summary with next steps.

Onboarding screensonboarding-screen8Profile checklist with a completion counter and progress bar, where each of five tasks expands an inline editor for display name, photo upload, time zone, phone or role and shows a summary once saved.

Onboarding screensonboarding-screen9Card wizard with a three step numbered stepper: an organisation address form, a searchable list of integrations to connect, and a preview with edit buttons before submitting to a success state.

Payment methodspayment-methods1Checkout-ready patterns for card, PayPal, and wallet options. Use these shadcn/ui examples to build trust and reduce friction at the payment step.

Payment methodspayment-methods2Checkout-ready patterns for card, PayPal, and wallet options. Use these shadcn/ui examples to build trust and reduce friction at the payment step.

Pricing tablespricing1Centered header with two monthly plan cards. The Growth card has a primary ring and Most popular badge. Each card lists checked features, a full width link button and sits above a 14-day trial note.

Pricing tablespricing10Muted section with a Monthly and Annually switch and Save 20% badge. One card holds four plans side by side with large prices, dot bullet features and a Choose button, the popular plan tinted.

Pricing tablespricing11Free and Pro plan cards side by side. The Pro card is filled with the primary color, overlaps the free card on desktop and has a Best for teams badge and trial button.

Pricing tablespricing12Hosting comparison table with four plans, the Business column header and footer filled with the primary color. Rows show storage, SSL, backups and domains, with a sticky feature column on small screens.

Pricing tablespricing13Split card with two selectable plan radio cards and a free trial button whose length and price note follow the selection. The right half lists five included features with short explanations.

Pricing tablespricing14Four subscription cards with Monthly and Annual tabs. Regular cards use dashed borders, the popular card is filled with the primary color and soft chart color glows. Each has a Subscribe button.

Pricing tablespricing15Four plans from Free to Studio with Monthly and Yearly tabs. Cards show yearly discount badges, the billed amount, a Get started button, usage limits with icons and features. The popular plan has a ribbon.

Pricing tablespricing16Heading and text on the left, an accordion of three plans on the right. Each item shows name and price, and a View plan details trigger reveals features and a button.

Pricing tablespricing17Muted card with two product tabs, each showing two one-time plans with Buy now buttons and highlighted feature lists. A bordered Enterprise card beside it shows a discounted price and a Most popular badge.

Pricing tablespricing18Comparison card with eight scrollable category tabs. Each tab shows a table of three plans with price and plan button headers, check or minus values, and tooltips explaining every feature name.

Pricing tablespricing19Two plan comparison table with tinted Standard and Premium columns. Rows show included features, contract length and proposals, then the monthly price and a Get started button per plan.

Pricing tablespricing2Three plan cards with a Monthly and Yearly tab switch showing a -20% badge. Prices and the billing note update per cycle, and excluded features appear struck through with an X icon.

Pricing tablespricing20Free and Pro plan cards inside colored frames, muted for Free and primary for Pro. Each card lists price and features, with a full width arrow link in the frame below.

Pricing tablespricing3Header with Monthly and Annual tabs above three plan cards, followed by a Compare features table of values, checks and dashes. On mobile the table becomes tabs showing one plan at a time.

Pricing tablespricing4Billing tabs above a two column layout: a radio list of four plans with seats and monthly price, and a detail card showing the selected plan's price, features and a Choose or Contact sales button.

Pricing tablespricing5Two column intro with a heading, text and a Book a demo button. Below, two service subscription cards with two column feature lists, the popular one in inverted primary colors.

Pricing tablespricing6Billing tabs and a team size slider from 5 to 50 users in a muted panel. Four plan cards show the total monthly price for that team, the per user rate and a feature checklist.

Pricing tablespricing7License type select in a side card next to three package cards with current price, struck original price and a calculated Save badge. A package comparison table with info tooltips follows below.

Pricing tablespricing8Comparison grid of three plans with prices at the top, nine feature rows of text, check and minus icons, and a Get started button per column. The Team column is raised. Mobile uses plan tabs.

Pricing tablespricing9Three one-time branding package cards with an icon, title, description, price and checklist. The middle package is taller, filled with the primary color and carries a Most popular badge.

Product cardsproduct-card1Product cards with image, price, badges, and primary CTA for category pages and carousels. Copy-paste these shadcn/ui examples to keep listings consistent and conversion-focused.

Product cardsproduct-card2Product cards with image, price, badges, and primary CTA for category pages and carousels. Copy-paste these shadcn/ui examples to keep listings consistent and conversion-focused.

Product cardsproduct-card3Product cards with image, price, badges, and primary CTA for category pages and carousels. Copy-paste these shadcn/ui examples to keep listings consistent and conversion-focused.

Product cardsproduct-card4Product cards built with shadcn/ui.

Product cardsproduct-card5Product cards built with shadcn/ui.

Product cardsproduct-card6Product cards built with shadcn/ui.

Product cardsproduct-card7Product cards built with shadcn/ui.

Product cardsproduct-cards1Furniture product card with a 4:3 linked photo, wishlist heart toggle, title, five star rating with review count, three selectable color swatches, price and an Add to cart button.

Product cardsproduct-cards10Cart item card with a coat thumbnail, name, size, price, save heart toggle and quantity, then an estimated total from price times quantity, a Shop Now button and an account icon button.

Product cardsproduct-cards11Portrait cosmetics card that fades from a packshot to a lifestyle photo on hover and reveals an Add to cart button and two size pills, with wishlist toggle and name, category and price below.

Product cardsproduct-cards2Sneaker card with a Best Seller badge, wishlist toggle and a square photo that slides between three images as the pointer moves across it, with dot indicators, brand, name, price and Buy Now button.

Product cardsproduct-cards3Sale chair card with a 50% Off badge and a stack of wishlist, full screen and cart toggle buttons on the photo, followed by name, single star rating, variant title and struck through original price.

Product cardsproduct-cards4Horizontal sneaker card with the photo on the left, half star rating and review count, name, price beside a Quick View pill button, two line description and four selectable color dots.

Product cardsproduct-cards5Flash sale chair card with discount badge, wishlist, full screen and cart buttons on the photo, a live days, hours, minutes and seconds countdown bar, star score and sale price beside the original price.

Product cardsproduct-cards6Centered skincare card with a photo, uppercase category label, serif product name, italic one line description and a full width uppercase Add to Cart button that includes the price.

Product cardsproduct-cards7Square sofa card where the photo fills the card, with a star score pill and wishlist button on top and the name, price and shopping bag toggle over a bottom gradient.

Product cardsproduct-cards8Property investment card with a 16:9 photo, Active badge, save toggle, name, location, property price, bed, bath, area and parking icons and a row of token price, projected IRR and APR.

Product cardsproduct-cards9Home listing card with a full bleed 4:3 photo and a frosted panel at the bottom showing the price range, address, bed, bath and parking counts, property type and star rating with review count.

Product categoryproduct-category1Collection page header with a breadcrumb, All Product heading and carousel arrows above a draggable slider of tall portrait category images, each linking through with its name centered below.

Product categoryproduct-category2Featured Categories slider with a View All Collection link, small bordered cards showing category name, item count and a round thumbnail, and centered previous and next buttons below.

Product categoryproduct-category3Shop by Category grid of four linked beauty category tiles with portrait photos, a bottom gradient, the category name and an Explore now label, with the image zooming on hover.

Product categoryproduct-category4Shop By Categories section with heading, intro text and an Explore More button above a two by two grid of photo tiles, each with title, one line description and an Explore Now button.

Product categoryproduct-category5Editorial category grid with a large featured Furniture collection tile spanning two rows on the right and two stacked Lighting and Ceramics tiles on the left, all linked with descriptions.

Product categoryproduct-category6Full width living room photo banner with dark gradients, a Stay Close to the Craft headline, membership discount copy and a Find Out More button aligned to the bottom right.

Product categoryproduct-category7Two stacked split panels pairing a furniture photo with a colored text panel holding a small label, two line uppercase heading, description and a Shop Now or Explore Now button, alternating sides.

Product categoryproduct-category8Three column jewelry launch section with model photos on both sides and centered small caps label, Handcrafted Jewelry heading, short announcement text and a Discover Now button.

Product categoryproduct-category9Room Category grid with a See All Category link, alternating linked photo tiles with names on a gradient and bordered text-only tiles for Dining Room, Guest Room and Living Room.

Product detailsproduct-details1Two column product page with a large photo on the left and the title, price, five star rating, reviews link, Add to Cart and wishlist buttons, description paragraph and Key Features list on the right.

Product detailsproduct-details2Apparel product page with a four photo collage, name, price, star rating with reviews link, color and size radio pickers with an out of stock size, Add to Cart button, description and highlights list.

Product detailsproduct-details3T-shirt product page with breadcrumb, main image and clickable thumbnails, price, rating, description, size Select, color buttons, quantity stepper, Add To Cart and Buy Now buttons and collapsible Details, Shipping and Returns rows.

Product detailsproduct-details4Perfume product page with a main image carousel synced to a thumbnail strip, category badge, name, price, intro, volume buttons, Add to Bag and Buy Now buttons and collapsible characteristics, description, delivery and returns.

Product detailsproduct-details5Fragrance product page with breadcrumb, title, rating, description, delivery and gift wrap notes, price, color swatches, Add to cart and Buy now buttons, a notes and volume table and a looping image carousel below.

Product detailsproduct-details6Serum product page with an image carousel and dots, rating, price, volume, quantity stepper, save, wishlist and Buy product buttons, then tabs for ingredient accordion, rating summary with review carousel, benefits and usage.

Product detailsproduct-details7Skincare product page with breadcrumb, image grid, rating, sale price with Save badge, bundle radio cards, quantity stepper, icon accordion sections, a You might also like carousel and Reviews and Q&A tabs with rating bars.

Product featuresproduct-features1Two-column section with a large product photo beside a badge, Crafted with Care headline, intro paragraph and a two by two grid of feature titles with short descriptions.

Product featuresproduct-features2Technical Specifications section with a headline, intro and four tabs for Design, Material, Considerations and Included, each showing text, optional bullet lists and a product image side by side.

Product listproduct-list-card1Structured product lists with icons, names, and metrics like units sold. Ideal for best-sellers, comparison views, and catalog sections using shadcn/ui.

Product listproduct-list1New Season Products shelf with a See all products link and a four column grid of portrait product images, each showing name, color and price, where the whole card is a link.

Product listproduct-list2Featured Products grid of four cards with square images that zoom on hover, a favorite heart toggle, title, price and an Add to Cart button that briefly shows an Adding state.

Product listproduct-list3All Products catalog with a Show by select sorting by new, popular or price and a list or grid toggle. Cards show New badge, sale price, discount, star rating, orders and seller.

Product listproduct-list4Gift product carousel with a headline, Shop now link and portrait cards showing Double Points and tag badges, category, five star reviews, price and a View button, plus previous and next arrows.

Product listproduct-list5Trending now grid with rounded category pills that filter products. Cards show type, name, price and struck original price, and reveal Add to Cart and favorite buttons on hover.

Product listproduct-list6Perfume catalog with underlined category tabs and a Filters button above a three column grid. Each card swaps to a second image on hover and shows a heart button, price and Add to Cart.

Product listproduct-list7Products page with a live result count, category tabs and a search input filtering a three column grid of linked square images, each card ending with name, price and a round plus button.

Product listproduct-list8New Arrival In Fashion carousel with a View all link and compact horizontal cards showing a thumbnail, uppercase category, product name, sale price and struck original price, with round arrow buttons.

Product quickviewsproduct-quickview1Product card with Quick View button that opens a wide two-column dialog with image, title, price, star rating, color swatch radios, eight size tiles, Size guide link, Add to Cart and wishlist.

Product quickviewsproduct-quickview2Product card with Quick View button that opens a compact dialog with wishlist button on the image, sale and original price, rating, description, color and size radios and a quantity stepper with Add to Cart.

Project managementproject-management-chart1Charts for tasks, progress, and achievements, e.g. horizontal bars by year. Integrate with project and portfolio views using shadcn/ui.

Project managementproject-management-chart2Charts for tasks, progress, and achievements, e.g. horizontal bars by year. Integrate with project and portfolio views using shadcn/ui.

Promo sectionspromo-sectionCollection promo with a Summer styles headline, short copy and Shop Collection button beside two columns of product photos scrolling vertically in opposite directions, slowing on hover and fading at the edges.

Reviewreview-card1Rating summaries, star breakdowns, and write-a-review CTAs in compact card layouts. Add social proof to product and landing pages with these shadcn/ui components.

Reviewreview-card10Review built with shadcn/ui.

Reviewreview-card11Review built with shadcn/ui.

Reviewreview-card12Review built with shadcn/ui.

Reviewreview-card13Review built with shadcn/ui.

Reviewreview-card2Rating summaries, star breakdowns, and write-a-review CTAs in compact card layouts. Add social proof to product and landing pages with these shadcn/ui components.

Reviewreview-card3Rating summaries, star breakdowns, and write-a-review CTAs in compact card layouts. Add social proof to product and landing pages with these shadcn/ui components.

Reviewreview-card4Review built with shadcn/ui.

Reviewreview-card5Review built with shadcn/ui.

Reviewreview-card6Review built with shadcn/ui.

Reviewreview-card7Review built with shadcn/ui.

Reviewreview-card8Review built with shadcn/ui.

Reviewreview-card9Review built with shadcn/ui.

Shopping cartshopping-cart1Cart page with selectable lines, select all checkbox, stock badges, quantity steppers and hover remove buttons, plus an order summary card with discount code, shipping and tax tooltips and Checkout.

Shopping cartshopping-cart2Table style cart with Product, Price, Quantity and Total columns, remove buttons, color and size details, stock count badges, a discount code field in the header and Continue and Checkout buttons.

Shopping cartshopping-cart3Cart with a Cart, Address, Payment breadcrumb, large product rows with brand and rounded quantity stepper, and sidebar cards for coupon code, a gift wrap option and itemized price details.

Shopping cartshopping-cart4Shopping bag drawer that slides in from the right, listing items with quantity badges on thumbnails, brand, Remove link, line price and plus and minus buttons, with a subtotal and checkout button.

Sidebar layoutssidebar-layoutFull height sidebar layout with a brand button, scrollable Platform and Projects link groups and a header with a sidebar toggle and Dashboard title, next to an empty content panel.

Sign in formssignin-form1Centered sign-in form with labelled email and password fields, remember me checkbox, forgot password link and submit button, followed by an “or continue with” divider and GitHub, Google and Twitter icon buttons.

Sign in formssignin-form2Split login screen with the form beside a full height cover photo on large screens, including email, password, remember me, forgot password and full width Continue with Google, GitHub and Gitlab buttons.

Sign in formssignin-form3Login card centered over a full screen background photo, with a title, short description, email and password fields, remember me checkbox, forgot password link, sign in button and a row of three social icon buttons.

Social media postsocial-media-post1Feed-style cards with avatar, handle, timestamp, content, and media. Use them for announcements, testimonials, or changelog-style posts with shadcn/ui.

Social media postsocial-media-post2Feed-style cards with avatar, handle, timestamp, content, and media. Use them for announcements, testimonials, or changelog-style posts with shadcn/ui.

Social media postsocial-media-post3Feed-style cards with avatar, handle, timestamp, content, and media. Use them for announcements, testimonials, or changelog-style posts with shadcn/ui.

Social media postsocial-media-post4Social media post built with shadcn/ui.

Statstat-card-example1KPI and pipeline cards with labels, values, and progress bars. Suited for dashboards and reports, built from shadcn/ui for clear metric presentation.

Statstat-card-example2KPI and pipeline cards with labels, values, and progress bars. Suited for dashboards and reports, built from shadcn/ui for clear metric presentation.

Statstat-card-example3KPI and pipeline cards with labels, values, and progress bars. Suited for dashboards and reports, built from shadcn/ui for clear metric presentation.

Statstat-card-example4Stat built with shadcn/ui.

Stat cardsstat-card1Four-column KPI row with order, sales and user totals, an up or down percentage badge, a previous month value in the footer and a dropdown for settings, alerts, pinning, sharing and removal.

Stat cardsstat-card10Outbound shipments card with a 14 or 30 day toggle, a total with change badge, a stacked Recharts bar chart by status and three summary toggles that highlight one series.

Stat cardsstat-card11Hospital operations KPI strip with five metrics in a bordered grid, a week, month or quarter toggle and change badges colored by whether the direction is good, with previous values in tooltips.

Stat cardsstat-card12Survey summary card with an icon, a Collecting or Paused badge, tooltip icon actions, a dropdown menu, three tiles for responses, completion and average time, and a response goal progress bar.

Stat cardsstat-card13Hiring overview with a 7 day, 30 day or quarter toggle and four KPI cards for roles, applicants, offer acceptance and pipelines, each with an icon, trend badge, note and dropdown.

Stat cardsstat-card14Today's transfers card with All, Received and Sent tabs, a list of incoming and outgoing transfers with colored amount badges and a footer total that follows the active tab.

Stat cardsstat-card15Account activity card with a 7, 30 or 90 day select, name and amount sort buttons, a transaction list with icons or initials, status labels and a net flow footer.

Stat cardsstat-card16Cloud spend card with a billing month select, total and change versus the previous month, a five-part segmented bar and a legend list that highlights the matching segment on hover.

Stat cardsstat-card17Travel card limit card showing spend against a limit, a progress bar with an alert marker, a popover form to edit the limit with validation, and daily average, projection and days left.

Stat cardsstat-card18Fulfillment hubs list with icons, regions, on-time rates, 24-tick dock capacity meters with order tooltips and shipped value, a week or month toggle and a dropdown to change sorting.

Stat cardsstat-card19Cluster capacity card with a cluster select, spend and uptime badges and a 40-tick vCPU meter that turns red above 80 percent and shows a value for each hovered tick.

Stat cardsstat-card2Sales pipeline card with a segmented bar of five deal stages that shows tooltips on hover, followed by a stage list with deal counts, dollar values, small progress bars and percentages.

Stat cardsstat-card20Three technician cards with avatar, specialty, status badge, actions menu, jobs today, billed amount, star rating with review count and an assign button that is disabled for off-shift staff.

Stat cardsstat-card21Sales by channel card with a month or quarter toggle, four proportional columns showing amount, share and change on hover on desktop, and a stacked bar with a legend list on mobile.

Stat cardsstat-card22Deploy success rate card with 30 daily bars around a dashed target line, the selected day's rate and gap to the average, an on-target badge and a count of days below target.

Stat cardsstat-card23Appointment show rate card with a 7D, 30D or 1Y toggle, point change, a four-band Poor to Great scale with a sliding marker and tooltip, and booked visits and no-shows.

Stat cardsstat-card24Energy generated card with a 7D, 30D or 90D toggle, total MWh with percentage change, a Recharts area chart with an average line and footer values for daily average and best day.

Stat cardsstat-card25Sprint progress card with a large completion percentage, three status toggles for shipped, in review and to do, a row of one tick per issue and a dropdown of sprint actions.

Stat cardsstat-card26Recovery score card with a 30 day Recharts area chart, a dashed baseline, a headline score that follows the hovered day, a change versus the prior day and a status badge.

Stat cardsstat-card27Three site benchmark cards for energy, water and carbon intensity with a regional or national peer toggle, two comparison bars, an Efficient or Needs attention badge and percentage difference.

Stat cardsstat-card28Learner engagement card with a cohort select and four goal rows for lessons, study time, assignments and mentor sessions, each with a progress bar and tooltip, plus an on-track count footer.

Stat cardsstat-card29API requests card with a region select, weekly total with change badge and a Recharts line chart comparing this week with a dashed last week line, plus a legend and the daily peak.

Stat cardsstat-card3Website analytics card with a conversion rate in the description and a two-column grid of six labeled values: direct, organic, sessions, page views, leads and conversions.

Stat cardsstat-card30Shipping days calendar for three months with one dot per weekday shaded by deploy count, volume filter toggles, totals, a streak badge and a detail box for the hovered or focused day.

Stat cardsstat-card31Customs clearance card with a file row with preview and download buttons, a metadata list and four stage progress tabs that show each step's status, count and badge when selected.

Stat cardsstat-card32Care follow-up card with a 4W or 12W toggle and two side by side metrics, each with a value, a point change colored by outcome and a small Recharts area sparkline with tooltip.

Stat cardsstat-card33Learner funnel card with week, month and year tabs and three proportional columns for enrolled, active and certified learners, with a footer sentence that updates on hover.

Stat cardsstat-card4Sales overview card with a large revenue total, a monthly growth figure, orders and visits percentage chips and a two-color split bar underneath.

Stat cardsstat-card5Three regional revenue cards, each with a large amount and a linked status row showing goals achieved out of five, a colored status icon and a chevron arrow.

Stat cardsstat-card6Two compact usage cards with a Recharts radial ring that shows the percentage in its center, next to the resource name and how many of the allowed items are used.

Stat cardsstat-card7Four usage limit cards for requests, credits, storage and API calls, each with the current value, a progress bar, the percentage used and the plan limit.

Stat cardsstat-card8Three stock ticker cards with company name, symbol, price, change and percentage colored green or red, plus an edge to edge Recharts area sparkline along the bottom of each card.

Stat cardsstat-card9Energy source mix card with a site select, four quarter bars split between solar and grid that filter the totals when clicked, a legend and solar versus grid shares in MWh.

Statsstats1Left aligned label, heading and intro above four counters in a row with dividers on desktop, each with a large count up number, colored suffix, bold label and one line description.

Statsstats10Accent colored bordered panel with a long heading and About Us button on the left and three divided rows on the right, each with a large count up number, label and description.

Statsstats11Primary colored rounded band with four stats in a row separated by thin dividers, starting with a static #1 and followed by count up numbers with labels. Stacks on phones.

Statsstats12Indicator label and heading with a reviewer avatar, 4.9/5 score, five stars and review source on the left, and a bordered two by two grid of centered count up stats on the right.

Statsstats2Muted section with a centered Stats badge and a heading with a primary accent word, above three cards that each show a count up number and a short label.

Statsstats3Centered problem statement heading and text above three cards with an icon badge, a large light count up percentage and a sentence with bold lead text. The middle card is offset lower.

Statsstats4Three columns: a heading with four stats in a two by two grid (three count up, one static 24/7), a tall photo in the middle and two paragraphs with a rounded About Us button.

Statsstats5Why Us badge, heading and text with three decimal count up stats on the left, and a two by two grid of muted tiles with a primary icon, title and short description on the right.

Statsstats6Muted section with a small label, heading, text and three stats (two count up, one static rating) on the left and two bordered feature cards with primary icons on the right.

Statsstats7Two line heading with an italic tagline aligned right, above a two by two grid of accent cards with corner bracket borders, a label and a large primary count up number.

Statsstats8Two column layout with a rounded dashboard screenshot on one side and a badge, large heading, text and two faded count up numbers with labels on the other.

Statsstats9Results label and heading above a bordered card split in two: two count up stats with a recharts bar chart of monthly tasks, and a subheading, text and a large 99.9% stat.

Store navigationstore-navigationEcommerce header with logo, Collections dropdown with featured image card, Accessories dropdown with icon grid, Women and Men links, search, wishlist, cart badge, Sign in and a mobile sheet menu.

Cardsswitch-card1Settings-style cards that pair a label and short description with a switch. Use for toggles in preference panels with shadcn/ui.

Tablestables1Recent invoices card with a status toggle group showing counts, invoice, status, method, issued and sortable amount columns, a row menu to copy the ID or mark paid, and a visible total line.

Tablestables10Support agents card listing 42 agents with search, sortable name, status, role and last active, team badges, edit and shift actions, bulk shift buttons, add or edit dialog and numbered pagination.

Tablestables11Vendor bills card with line tabs and counts, search, owner filter, sortable vendor, received and amount columns, bulk mark paid or review, row menu with duplicate, a details dialog and total footer.

Tablestables12Receivables card with outstanding, overdue and collected tiles, status checkbox filter, search, collected progress bars, due notes, bulk paid, void and delete, CSV export, invoice detail sheet and new invoice dialog.

Tablestables13Paying subscribers card with search and card brand filter, avatars, masked card numbers with expiry warnings, interest badges, sortable click rate bars, bulk copy emails and delete, and an average click rate footer.

Tablestables14Client requests list with status tabs and counts, search, billing and unassigned filters, sort and CSV export menu, request notes, assignee avatars with assign menu, task and comment badges, and bulk status actions.

Tablestables15Aligner cases card with stage toggle group or mobile select, search, row numbers, sortable patient, created and days in stage, stalled badges, move to next stage menu, bulk stage moves and pagination.

Tablestables16Card activity card with money in and out totals, search, date range popover, category filter, transaction, category, card, date and signed amount columns, edit dialog, bulk delete and numbered pagination.

Tablestables17Client projects page with current and archived tabs, search, status filter, sort select, list or grid toggle, project icons, team avatar stacks, progress bars, bulk archive, details sheet and new project dialog.

Tablestables18Pantry inventory card with 45 items, CSV export, add item, search, status filter, sortable item, SKU, department, stock, price and status columns, bulk status menu, edit dialog and page size select.

Tablestables19People directory card with segment toggle chips, search, date added, last touch and status filters, sortable columns, clickable rows that open an add or edit side sheet with validation, and numbered pagination.

Tablestables2Quote card with line items, unit price, quantity stepper buttons that remove an item at one, footer rows for subtotal, annual discount, sales tax and total, an annual billing switch and reset button.

Tablestables20Wholesale orders card with status toggle group, expandable rows showing line items, shipping and totals, sortable placed date and total, row menu to ship, deliver or cancel, and an expand all button.

Tablestables21Contact record card showing one person as a two column table with Contact, Account and Activity sections, mailto and tel links, copy buttons, stage badge, tags, and an edit mode with inputs and validation.

Tablestables22Billing activity card with status toggle, payment, status, customer, date, amount and net after fee columns, bulk mark paid, receipt download and delete, a payment detail sheet and five row pagination.

Tablestables23Sprint tasks card grouping rows by status, priority or team with collapsible group headers, search, priority filter, due date picker per task, assignee stacks, list or board view and a new task dialog.

Tablestables24Property listings card with a wide table and pinned property and actions columns, search, status select, type and bedroom filters, demand bars, grid view with sort presets, detail sheet and add or edit dialog.

Tablestables25Product stock card with a fixed height scrolling table and sticky header, search, in-stock-only switch, sortable SKU, item, type, stock and price columns, channel badges and a stock value footer.

Tablestables3Launch checklist with All, Open and Done tabs, a progress bar, done checkboxes that strike through tasks, owner avatars, due dates and a status dropdown with four states per row.

Tablestables4Storefront products card with a search field, product icon, name and SKU, category, inventory and price columns with sorting, and a row menu to copy SKU, duplicate, archive or delete.

Tablestables5Workspace members card with search and role filter, avatars with presence dots, role pill dropdown with descriptions, status and last active columns, and a selection bar to set roles or remove members.

Tablestables6Platform tickets card with status tabs and counts, sortable key and priority, owner avatars, label badges, a status pill dropdown per row, a columns visibility menu and five row pagination.

Tablestables7Expense claims card with row checkboxes, employee, payout method, date, status and amount columns, a total footer, and a selection bar to approve, reimburse or delete claims with confirmation.

Tablestables8Content calendar card with publish progress, row checkboxes, author, status, priority, date and notes columns, start, pause and publish icon buttons with spinners, bulk actions menu and a details side sheet.

Tablestables9Community members card with search, status toggle, sortable member, reputation and last seen columns, role badges, channel icons, featured switches, row menus, rows per page select, numbered pages, profile and add member dialogs.

Tasktask-card1Task rows with checkbox, title, and status or due date. Use these shadcn/ui examples for kanban boards, backlogs, and productivity views.

Tasktask-card2Task rows with checkbox, title, and status or due date. Use these shadcn/ui examples for kanban boards, backlogs, and productivity views.

Team sectionsteam1Heading and intro paragraph above a four column grid of bordered cards, each with a tall cover photo, the person's name and job title. Collapses to two columns and then one on smaller screens.

Team sectionsteam10Large centered heading over four tall photo cards fanned along an arc with name and title on a gradient. The hovered card lifts up. Phones get a two column grid instead of the fan.

Team sectionsteam11Two column section on a muted background with a large heading, short text and a Join our team button next to a three column, staggered collage of six rounded team photos.

Team sectionsteam12Centered icon tile and heading above pill shaped cards with round grayscale avatars, name and title. Two founders sit in the top row and six team members wrap in the row below.

Team sectionsteam2Header with a We're Hiring badge, heading, text and About Us and Job Openings buttons, followed by four people with round avatars, name, role, a short bio and X, Facebook and LinkedIn links.

Team sectionsteam3Team split into two labelled rows, founders and designers, each with a serif group title and three portrait cards. Photos are grayscale until hovered and carry a LinkedIn button in the corner.

Team sectionsteam4Two column layout with heading, text and a Join Our Team button on the left and three bordered portrait cards on the right, each showing name, role and Twitter, Instagram and Facebook links.

Team sectionsteam5Centered heading and text above six large round grayscale portraits in a wrapping row, each with name, job title and Twitter, Instagram and Facebook icon links underneath.

Team sectionsteam6Numbered heading with intro text and an outline Read more button, above a two to four column grid of tall rounded portraits with small name and title captions.

Team sectionsteam7Centered heading above a row of four pill shaped photo panels on pastel backgrounds. Hovering a panel widens it, squares its corners and fades in the name and role over a dark gradient.

Team sectionsteam8Leadership grid with a small Our team link, heading and Join us button, then six bordered cells in three columns, each holding a name, title, short description and a small square photo.

Team sectionsteam9Three column grid that starts with a primary colored card containing the heading, text and a Join the team button, followed by five photo cards with name, role and Twitter and Instagram links.

Testimonialstestimonial1Centered heading above a looping carousel of five bordered quote cards, each with the quote, a large avatar, name and title, showing one, two or three cards per view with previous and next arrows.

Testimonialstestimonial10Centered badge, heading and text above three round avatar buttons, where the selected avatar is enlarged with a ring and a pointer tail toward a white card showing its quote and author.

Testimonialstestimonial11Badge with a colored dot, heading and subtitle above a two column grid of four cards, each with an avatar, name and role above a longer quote.

Testimonialstestimonial12Two column layout with a badge and large heading on the left and a grid on the right holding a featured quote card, a photo and two smaller quote cards.

Testimonialstestimonial13Full width looping carousel showing one centered quote at a time with a bolded highlight phrase, author name, position and avatar below, and round dot buttons to switch slides.

Testimonialstestimonial14Heading above six tilted, pastel colored quote cards scattered in a container, each with a quote icon, quote, avatar, name and position, which visitors can drag around and stack.

Testimonialstestimonial15Two column section with a heading, intro text and View All Testimonials button on the left and a fading quote with avatar, name and position plus previous and next buttons on the right.

Testimonialstestimonial2Single large quote that fades and blurs between three entries, with a row of overlapping grayscale avatar buttons that select a quote and an animated name and role beside them.

Testimonialstestimonial3Badge, heading and subtitle above up to three columns of quote cards that scroll upward in endless loops at different speeds, with faded top and bottom edges.

Testimonialstestimonial4Two column section with a Community badge, heading, paragraph and Read more testimonials button on the left and two endlessly scrolling vertical columns of quote cards on the right.

Testimonialstestimonial5Community heading, paragraph and button above a full width row of quote cards that scrolls horizontally with faded edges, each card showing a star rating, quote, avatar, name and role.

Testimonialstestimonial6Bento grid of four quote cards with quote icons: a tall card with a 6X metric on the left, a wide card and two smaller cards on the right, one filled with the primary color.

Testimonialstestimonial7Heading with a Learn More button above two wide cards, each with a large avatar, five stars, quote, name, role, tag badges and a metric box such as 97% match rate.

Testimonialstestimonial8Editorial slider with a large faded slide number beside one big quote, avatar, name and company, plus line indicators, a 01 / 03 counter and previous and next icon buttons.

Testimonialstestimonial9Autoplaying looping carousel of dark cards with a large portrait, name and role over a gradient, five stars and a short quote below, plus clickable dot indicators under the slides.

Theme switchertheme-switcher1Light/dark theme toggles in several layouts, icon-only, with label, or in a small control group. Built with shadcn/ui for consistent theming.

Theme switchertheme-switcher2Light/dark theme toggles in several layouts, icon-only, with label, or in a small control group. Built with shadcn/ui for consistent theming.

Theme switchertheme-switcher3Light/dark theme toggles in several layouts, icon-only, with label, or in a small control group. Built with shadcn/ui for consistent theming.

Todo apptodo-app1Single column todo list with an add task input, checkbox rows that strike through completed items, a delete button on each row, a remaining task counter and a short motivational quote.

Todo apptodo-app2Task manager with status tabs and counts, search, an assignee, priority and starred filter menu, list or grid views with drag to reorder, and drawers for creating and reviewing tasks.

Todo apptodo-app3Client project tracker inside an app sidebar with a breadcrumb, team avatars, an invite search, a priority filter and collapsible status tables with row selection, inline adding and bulk move or delete.

Todo apptodo-app4Standalone client project tracker with a logo header, team avatars, an invite search, a priority filter and collapsible status tables supporting row selection, inline adding and bulk move or delete.

Todo apptodo-app5Sprint task table grouped by status or priority with task codes, inline priority and due date editing, column visibility, density and sort controls, an assignee filter and a new task drawer.

Todo apptodo-app6Right side task drawer with category and urgency badges, a five step status tracker, attachment buttons, a timestamped progress timeline with collapsible notes, and a note composer at the bottom.

User menususer-dropdown-01Profile dropdowns with upgrade, account, billing, notifications, and sign out. Use these shadcn/ui examples for header user menus.

User menususer-dropdown-02Profile dropdowns with upgrade, account, billing, notifications, and sign out. Use these shadcn/ui examples for header user menus.

Welcomewelcome-card1Onboarding and empty-state cards with headline, short copy, and primary action. Greet users and guide next steps using shadcn/ui layouts.

Welcomewelcome-card2Onboarding and empty-state cards with headline, short copy, and primary action. Greet users and guide next steps using shadcn/ui layouts.

Welcomewelcome-card3Onboarding and empty-state cards with headline, short copy, and primary action. Greet users and guide next steps using shadcn/ui layouts.

Ai chatai-chat15Group chat window with member avatars, a video call button group, bubbles with a shared file card and heart reaction, a New divider, a Polish with AI button and a split Send button.

Ai chatai-chat16Left aligned chat home with a recents sidebar, a version dropdown, a New chat button, a composer with Attach, Upload images and writing style select, and four ready made prompt cards.

Ai chatai-chat19Assistant side panel that asks three scoping questions with a progress bar, checkbox and radio cards with A to D shortcuts, Back and Next buttons, a brief summary and a sources menu.

Authenticationauthentication-form1Login and signup forms with Google/GitHub options, email/password fields, and primary submit. Ready-to-use shadcn/ui auth patterns.

Authenticationauthentication-form2Login and signup forms with Google/GitHub options, email/password fields, and primary submit. Ready-to-use shadcn/ui auth patterns.

Authenticationauthentication-form3Login and signup forms with Google/GitHub options, email/password fields, and primary submit. Ready-to-use shadcn/ui auth patterns.

Authenticationauthentication-form4Authentication built with shadcn/ui.

Authenticationauthentication-form5Authentication built with shadcn/ui.

Authenticationauthentication-form6Authentication built with shadcn/ui.

Blogblog-card4Blog built with shadcn/ui.

Chartschart1Total revenue card with rounded side by side bars for desktop and mobile per month, a boxed desktop and mobile totals summary in the header and a dashed hover tooltip.

Chartschart10Achievement by year card with three thin horizontal bars for 2024, 2023 and 2022, each labeled inside the bar and topped by a large project count.

Chartschart11Project efficiency donut with a month select whose items show color swatches, an enlarged active slice with an outer ring, and the selected month value in the center.

Chartschart12Revenue chart card with clickable desktop and mobile total tiles in the header that switch a single daily bar series over the last 28 days with formatted date tooltips.

Chartschart13Leads by source donut with the total leads in the center, an Export dropdown and a row of social, email, call and others counts with colored dots below.

Chartschart14Earning reports card with a gradient weekly bar chart, a total with green badge and three side panels for earnings, profit and expense, each with an icon, amount and progress bar.

Chartschart15Support tickets donut showing 88% completed in the center with new and open segments, plus a footer row of new tickets, open tickets and response time with round icons.

Chartschart16Total earning card with a percentage headline, change badge, stacked revenue and sales bars by month, and two transaction rows for client payment and refund with signed amounts.

Chartschart17Monthly file transfer card with stacked desktop and mobile bars per month, horizontal grid lines, a hover tooltip and a chart legend under the bars.

Chartschart18Balance summary card with three muted tiles for BTC received, sent and withdrawn, an Export dropdown and a three line monthly chart using matching chart colors.

Chartschart19Summary donut card for browser share with a total in the center, a date range description, an arrow icon button and a two column grid of percentage tiles below.

Chartschart2Exercise minutes card with two monotone lines for average and today, larger active dots on hover, a custom two column tooltip and an Export dropdown offering Excel or PDF.

Chartschart20Patients by department pie chart with value labels on each slice and a wrapping legend for cardiology, neurology, oncology and pediatrics.

Chartschart21Recurring revenue by plan line chart with a 7D, 30D or 90D toggle, change summary, and a plan table where hovering highlights a line and toggles hide plans.

Chartschart22Collapsible service card for an edge gateway with latency, rate limit and uptime stats, an operational badge, and stacked served and rate limited daily bars with month navigation.

Chartschart24Release roadmap with a scrollable month timeline of pill shaped task bars per person, a today marker with badge, tooltips per task and a side list of projects with progress bars.

Chartschart25Year over year bar chart with this year above the axis and last year mirrored below, a metric select, a segmented radial goal meter and two year to date tiles.

Chartschart26Revenue overview card with four KPI tiles, a dropdown combining period and comparison year radio groups, and a two year area chart with series toggles and a change tooltip.

Chartschart27Activation funnel with five SVG trapezoid stages, a Total or Step percentage toggle, a hover details panel for accounts and drop off, and a footer naming the biggest leak.

Chartschart28Contribution calendar heatmap with five color levels, year toggle, arrow key navigation between days, an open tooltip on the active cell and active day and streak stats below.

Chartschart29Platform status card with 90 daily status bars per service, uptime percentages, current status badges, arrow key inspection, a recent incidents list and a color legend footer.

Chartschart3Returning rate card showing $42,379 with a green +2.5% badge, an Export dropdown and a two line chart over months where the second series is drawn at reduced opacity.

Chartschart30Earnings summary card with a this week or last week toggle, three selectable metric rows with totals and change, and a daily bar chart that highlights the best or hovered day.

Chartschart31Net cash flow card with money in bars above and money out bars below a zero line, a weekly or monthly toggle, and hover driven inflow and outflow item rows.

Chartschart32Signup anomaly card with daily signup bars, a dashed forecast line, the spike bar highlighted, a hover readout of deviation from forecast and an Investigate spike button.

Chartschart33Weekly revenue card with rounded target bars, an actual revenue line with dots, a hover and click day detail box, a week dropdown and an attainment percentage footer.

Chartschart34Today's revenue card with hourly bars, a stepped line for the same day last week, channel rows that filter the chart and a footer naming the busiest hour.

Chartschart35Cash flow card with rounded monthly incoming bars labeled on top, click to select a month, a side month summary with incoming and outgoing tiles and a net retained progress bar.

Chartschart36Department spend card with stacked monthly bars, a dashed monthly budget line, a department toggle group, an annual budget progress bar and a tooltip showing over or under budget.

Chartschart37Revenue mix card with a segmented share bar for four customer tiers, a revenue or accounts toggle, hoverable tier tiles, upcoming renewals list and a past due invoice notice.

Chartschart38Publication insights card with tabbed followers and page views totals, a 30 day area chart, and two ranked bar lists for top posts and top sources that expand to show all.

Chartschart39Service uptime card listing three services with 90 day status bars, uptime percentages and incident counts, click or arrow key day selection and a live detail panel.

Chartschart4Store visits by source donut with a 10.2K visitors center label, five colored segments for direct, social, email, referrals and other, a wrapping legend and an Export dropdown.

Chartschart40Uptime monitor card for a single endpoint with a pulsing status badge, 30D, 60D or 90D toggle, four stat cells, tooltip day bars and a hover linked event log.

Chartschart41Portfolio holdings card with total value and unrealized gain, a 6M or 1Y area chart, and Stocks and Funds tabs listing holdings with ticker, weight, value and change.

Chartschart42Deal outcomes card with won and lost area series over 6 or 12 months, togglable KPI tiles with change versus the prior period and a win rate tile.

Chartschart43Newsletter performance card with Delivery and Engagement tabs, an area plus dashed line chart on two y axes, hoverable metric totals and a rate badge.

Chartschart44Signups by source card with Search, Paid ads and Partners tabs, stacked monthly bars for activated, trialing and lost, and a togglable stage list with share and totals.

Chartschart45Data platform spend card with workload tabs showing totals and change, a daily cost bar chart with a dashed daily average line, hover dimming and a peak day footer.

Chartschart46Weekly active members card with an OS or browser toggle, a segmented share bar and a ranked list of horizontal bars that reveal weekly change on hover or focus.

Chartschart47Help desk outcomes card with stacked monthly bars switchable between volume and share, hover preview and click to pin a month, and a side breakdown with progress bars.

Chartschart48Pipeline activity card with a branch select, runs, failures or duration toggle, monthly bars with a dashed average line, a detailed tooltip and summary stats in the footer.

Chartschart49API spend card with cumulative 2025, 2026 and dashed forecast lines, a spend cap select drawn as a reference line, three KPI tiles and series toggles.

Chartschart5Exchange rates card with two currency selects, 1D to 1Y period buttons that slice a 90 day line chart, a refresh button, last updated time and Convert and Rate Alerts buttons.

Chartschart50Payment volume card with card and bank transfer lines, a 7D, 30D or 90D toggle, legend toggles that exclude a method and a settlement summary grid with changes.

Chartschart51Wellness week card plotting up to four tracked goals as percent of daily target lines, a week toggle, daily average rows with remove buttons and an add metric dropdown.

Chartschart52Subscription growth card with three metric tabs showing period totals and change, a date range select and an area chart compared against a dashed previous period line.

Chartschart53Cloud cost allocation donut with tabs for service, environment and region, a center total that follows the hovered slice, a budget progress bar and an amount and share list.

Chartschart54Onboarding health card with a semicircle gauge split into on schedule, slipping and stalled, a segment select, healthy rate change and hoverable status rows with weekly deltas.

Chartschart55Brokerage account card with a 1D, 1W or 1M toggle, Holdings and Watchlist tabs and asset rows with a hoverable sparkline that swaps the price and time readout.

Chartschart56Course enrollments card with a week or month toggle, a total with change, a donut showing the hovered or leading track share in the center and a track list with icons.

Chartschart57Sponsorship revenue card with a weekly total and change badge, daily bars selectable by click or weekday toggles, and a breakdown of gross, payouts and net with progress bars.

Chartschart58Pipeline duration card with a pipeline select, average run time with change, a labeled stacked stage bar and a stage table showing average time, change and share.

Chartschart59Deal velocity bubble chart plotting deal size against days to close per sales channel, with bubble size for deal count, dashed average lines, a Q2 or Q3 toggle and channel tiles.

Chartschart6Reservations donut with a total count in the center, a legend for confirmed, checked in and checked out that sits beside the chart on desktop, and a total sales figure below.

Chartschart60Software spend donut with a monthly or annual toggle, a center total that follows the hovered category and a category list showing seats, cost per seat, share and amount.

Chartschart61Review score card with a large rating, partial star display, change badge, a monthly line chart against a togglable 2025 line and stats for reviews and five star share.

Chartschart62Asset price card with price, market cap and volume tabs, five time ranges, zoom in and out buttons, an area or bar chart on a right axis and four stat cells.

Chartschart63Cash position card with four togglable balance tiles, a stacked monthly bar chart with click to select, and a chart or table view switch showing the same balances.

Chartschart64Month to date volume card with a metric select, cumulative lines for this month and last month, a dashed projection to month end, a today marker and projected total.

Chartschart65Support peak hours heatmap with a 7 by 12 grid of two hour cells, All, Live chat or Email toggle, focusable cells with counts and a less to more legend.

Chartschart66Watch time by device card with a semicircle donut, a 30D or 90D toggle, total hours with change and device rows that select the share shown under the arc.

Chartschart67ETF price card with six range toggles from 1M to Max, a line or area view switch with tooltip, hover driven price and change readout, and open, high and low stats.

Chartschart68Growth targets card for signups, upgrades and demo calls with a Jul, Aug or Sep toggle, change badges, progress bars with gap tooltips and an overall attainment score.

Chartschart69Team learning card listing courses with icons, lesson counts and progress bars, an All, In progress or Completed filter, a sort dropdown and due date tooltips.

Chartschart7Campaign overview card with a date range select, a download icon button, booked and visited totals, a performance change line and a two line chart that reloads per range.

Chartschart70Revenue by channel card comparing direct and reseller share side by side with a vs divider, a 7D, 30D or 90D toggle, a split bar and average order values.

Chartschart9Projects overview stacked area chart with gradient fills, a toggle group for 3 months, 30 days or 7 days on wide cards and a select fallback on narrow containers.

Chat bubblechat-bubble4Chat bubble built with shadcn/ui.

Chat UIchat-ui3Team messenger with chats grouped into Team and Personal, a top tab bar, grouped message bubbles with avatars, an emoji picker and a profile panel with About and Files tabs.

Chat UIchat-ui4Shared inbox with view and team inbox navigation, toggles for tasks and discussions, a timeline of linked emails, tag and assignment events, and an internal comment composer.

Chat UIchat-ui5Support desk with an icon rail, collapsible inbox views by team and teammate, a ticket thread with a reply or internal note composer, quick replies and a collapsible details panel.

Chat UIchat-ui6AI agent inbox with a workspace switcher, Open and Closed lists filtered by priority, an email draft card with an Approve and send button, and a details panel for contact and thread.

Contact uscontact5Form free contact layout with a large heading, two columns of general, collaboration, careers and address details, a row of text social links and a wide studio photo below.

Contact uscontact6Split layout with a tall office photo on one side and a heading, small world map with office markers and a form with first name, last name, email and message fields on the other.

Contact uscontact9Centered heading with an italic accent word above three cards for chat, email and phone, each with a colored round icon, a short subtitle and a Start chat button or contact value.

Cta sectionscta1Single row CTA with a headline and short contact line on the left and a Get Started button with arrow icon on the right, over a radial gradient background.

Cta sectionscta10Contact CTA with an outline badge, headline, mailto link and three columns for email support, office address and phone, each with a round icon.

Cta sectionscta11Two column agency CTA: headline with an inline avatar group, paragraph and Book a Call button on the left, two linked service cards with arrow icons on the right.

Cta sectionscta12Integrations CTA with brand logos placed on concentric half rings that fade out, a centered headline, supporting text and an Explore integrations button.

Cta sectionscta2Centered CTA with headline, one line of text, a Get Started button and a Learn more link button, over a dashed grid pattern that fades out toward the bottom.

Cta sectionscta3Bordered card split into two columns: headline, paragraph, Start Free Trial and Learn More buttons on one side and a wide image on the other, stacking image first on mobile.

Cta sectionscta4Two column CTA without a background: a large headline on the left and a paragraph with Start Free Trial and outline Learn More buttons on the right.

Cta sectionscta5Muted card with a course headline, paragraph and Start Learning button, plus a learner count line and five overlapping avatars, placed next to a square photo of students.

Cta sectionscta6Centered headline, subtext and Get in touch button above a full width row of seven portrait images with alternating widths and vertical offsets.

Cta sectionscta7Muted rounded panel with headline, paragraph, Start Free Trial and Schedule a Demo buttons on the left and a product image aligned to the bottom right.

Cta sectionscta8Centered Get Started badge, headline with an italic serif accent, subtext and rounded Get Started button with send icon, followed by three tall property photos in a grid.

Cta sectionscta9Rounded banner with a background photo, a discount headline and subtext in dark text, and Get Started and secondary Contact buttons below.

Customer reviewscustomer-reviews2Compact card showing a 4.4 average with partially filled stars, the global rating count, a Write a review button and five per-star progress bars with percentages.

Modal dialogsdashboard-modal11Feedback dialog with a topic select, a validated message textarea, up to two attached image previews with remove buttons, a camera attach button and a Send it button.

Modal dialogsdashboard-modal13Small alert dialog with a trash icon, a Remove This File title, a warning that the file cannot be restored and Go Back and destructive Remove buttons.

Modal dialogsdashboard-modal14Report dialog with a flag icon, three reason radios and a textarea that appears only for Something else and must be filled in, plus Dismiss and Submit buttons.

Modal dialogsdashboard-modal15Alert preferences dialog with three radio options, each with a label and a description of which response alerts are sent, and Discard and Apply buttons in the footer.

Modal dialogsdashboard-modal2Share board dialog with a title, a line about view access and a read-only link field with an inline copy icon button and a tooltip that confirms when the link is copied.

Modal dialogsdashboard-modal20Updates dialog with Newest, Boards and Docs tabs, a status filter dropdown, an activity list with avatars, status dots and times, an unread count and footer actions.

Modal dialogsdashboard-modal28Two-factor setup dialog with a QR code generated from an otpauth URL, a Continue button and a read-only setup key field with a copy button that confirms the copy.

Modal dialogsdashboard-modal7Mood survey dialog with an icon header, a heading, five emoji buttons where the selected one grows and shows its label, a note textarea and a Send Answer button.

Modal dialogsdashboard-modal8Service rating dialog without a close icon, showing five emoji rating tiles in a responsive grid with the selected tile outlined, and Not now and Send buttons.

Use casesdate-picker-example1Calendar and date-range pickers with presets like today, last 7 days, this month. Copy these shadcn/ui patterns for filters and booking flows.

Use casesdate-picker-example2Calendar and date-range pickers with presets like today, last 7 days, this month. Copy these shadcn/ui patterns for filters and booking flows.

Use casesdate-picker-example3Calendar and date-range pickers with presets like today, last 7 days, this month. Copy these shadcn/ui patterns for filters and booking flows.

Use casesdate-picker-example4Use cases built with shadcn/ui.

Ecommerceecommerce-chart1Charts for store visits, sales, and revenue, donut, bar, and trend views. Drop them into dashboards and reports with shadcn/ui for consistent styling.

Ecommerceecommerce-chart2Charts for store visits, sales, and revenue, donut, bar, and trend views. Drop them into dashboards and reports with shadcn/ui for consistent styling.

Ecommerceecommerce-chart3Charts for store visits, sales, and revenue, donut, bar, and trend views. Drop them into dashboards and reports with shadcn/ui for consistent styling.

Ecommerceecommerce-chart4Ecommerce built with shadcn/ui.

Empty stateempty-state1Survey responses card with title and description, containing a centered empty state with a round chart icon, a no responses message and an outline Create survey button.

Empty stateempty-state10AI agents first run state with three skeleton agent cards, the side cards faded and hidden on mobile, a Build your AI workforce title, description and an Add agent button.

Empty stateempty-state11No files found state on a faded grid background with three tilted file cards labeled DOC, PDF and XLS, a message naming the search term and a Clear filters button.

Empty stateempty-state12Domains first run state on a grid background with two skeleton domain rows, a no domains yet title, a short benefit message, and Add domain and See tutorial buttons.

Empty stateempty-state13Waitlist empty state with two stacked placeholder member rows showing decline and approve slots, a no one is waiting title, an explanation and a View Products button.

Empty stateempty-state15Compact no projects state with a folder code icon, a short workspace message and small Create project and Import project buttons side by side.

Empty stateempty-state17Restricted page state with a blurred browser window mockup behind a red lock badge, an admin only message, and Go back and Contact support buttons.

Empty stateempty-state18Offline state with a wifi off icon, a connection message and a Try again button that shows a spinner and Reconnecting text for a moment before returning.

Empty stateempty-state21Growth card with a title and description above a seven month recharts bar chart where every bar is faded except one highlighted gradient bar.

Empty stateempty-state6Centered no data state with a dashed square database icon, a two line message, and Learn more and Add new item buttons that stack full width on mobile.

Empty stateempty-state8Account setup prompt with a badge icon, a verification message and a Complete registration button, followed by a muted card listing three numbered activation steps.

Faqsfaq1Centered FAQ label, heading and intro above a single column accordion of six questions. Only one answer opens at a time and the second question starts expanded.

Faqsfaq10Muted section with one card holding a badge, heading, still have a question note and avatar group on the left and a stacked, joined border accordion of five questions on the right.

Faqsfaq2Two column layout with a label, heading and text on the left and six questions as separate rounded cards on the right, with the chevron before the text and a muted background when open.

Faqsfaq4Two column section with a heading, short text and Contact Sales button on the left and a five question accordion on the right using plus and minus circle icons.

Faqsfaq5Badge, heading and text above six questions with their answers always visible in a three column grid, and a Still have questions banner with a Contact Us button at the bottom.

Faqsfaq6Narrow centered column with a heading, full width tabs for General, Features and Security, an accordion of rounded question cards for the active tab and a Book a free call box.

Faqsfaq7Short intro text opposite a large italic serif FAQ's heading with an arrow, above a full width accordion with large uppercase questions and answers placed in the right half.

Faqsfaq8Narrow left column with a FAQs label, heading, support avatar and Book a Free Call button, next to a wide six question accordion whose plus icon turns into a minus.

Faqsfaq9Two column layout with a heading and five question accordion with leading chevrons on the left and a tall rounded image on the right that is hidden below the large breakpoint.

Feature sectionsfeature1Centered header with an Our Features badge above a grid of eight feature cards, each with a colored icon tile, title and description, in one, two or four columns.

Feature sectionsfeature10Shop By Categories header with an Explore More button above a two by two grid of photo tiles with dark gradients, white titles, descriptions and Explore Now buttons.

Feature sectionsfeature11Autoplaying image carousel beside a list of three clickable features. The active item fills with a progress bar that tracks the time until the next slide.

Feature sectionsfeature12Centered Features badge, heading and paragraph above a description list of four features in two columns, each with a square primary icon tile beside the text.

Feature sectionsfeature13Centered Features badge, heading and paragraph above six numbered features in two columns, each with a round bordered step number from 01 to 06, title and description.

Feature sectionsfeature2Two column layout with a Complete Solution label, headline, intro text and Get Started button on the left and four colored icon features in a two column grid on the right.

Feature sectionsfeature3Headline with a gradient word next to intro text and a Try ContentAI button, above four cards with round primary icons, descriptions and Learn more links.

Feature sectionsfeature4Centered heading above a square image placed in the middle, with three icon features stacked in a column on each side of it on large screens.

Feature sectionsfeature5Badge and centered headline above a two column layout: a list of four features with small icon tiles beside text on the left and a square image on the right.

Feature sectionsfeature6Left aligned headline and paragraph above a five column grid that puts four bordered icon features in a two by two grid next to a square image.

Feature sectionsfeature7Cloud Infrastructure badge, headline, paragraph and Let’s talk button above a wide video ratio image and a grid of six feature cards with round icons.

Feature sectionsfeature8Centered heading above four tabs. Each tab shows an image beside a paragraph and four muted cards with feature titles and descriptions. Tabs stack vertically on mobile.

Feature sectionsfeature9Two alternating rows, each pairing a 4:3 image with a small dot label, large heading, paragraph and outline button. The second row flips the image to the right on desktop.

Footersfooter1Five column footer with the logo in the first column and four link lists for Products, Resources, Learn and About Us. On phones the logo spans the top and the lists form two columns.

Footersfooter10Call to action footer on a purple radial gradient with an availability badge, large Are you ready headline, Book a Call and See Plans buttons, and a bottom link bar with a logo credit.

Footersfooter11Photo panel with a Let's Connect title beside Visit, Write and Call rows, then a centered newsletter with round send button, uppercase navigation links, the logo and a copyright line.

Footersfooter12Headline with an outline Get started button above a separator, then the logo, tagline and four labelled social icons beside Company, Pages and Services link columns.

Footersfooter2Compact footer with the logo, five text links and five social icons in one row on large screens, then a separator, a dynamic copyright year and privacy, terms and cookie links.

Footersfooter7Three column footer with the logo and an Explore Components button, a Contact column with email and X, GitHub and Discord icons, a two column quick links list and a legal bottom bar.

Footersfooter9Three column footer with the logo and description, a list of large bold page links and a stack of social links with arrow icons, followed by a copyright and licences bar.

Hero sectionshero1Centered hero with a bordered funding announcement pill and Read more link, a large headline, a short paragraph, and Get started and ghost Learn more buttons side by side.

Hero sectionshero22Primary color hero with a pill navbar, large centered serif headline, volunteer and outline buttons, and three fanned photo cards that spread apart on hover.

Hero sectionshero23Dark SaaS hero with animated light rays, a central beam and a glowing horizon arc behind a dashboard preview showing uptime, live deployments and a requests area chart.

Hero sectionshero25Full-height landscape photo hero fading into the background at the top, with a two-tone serif headline, secondary and arrow CTA buttons and a five star rating line.

Hero sectionshero26Centered community hero with split navigation around the logo, serif and bold two-line headline, CTA, a row of portraits curved in 3D perspective and three divided feature columns.

Hero sectionshero4Full-height AI hero on a radial purple gradient with logo navbar and Sheet mobile menu, a prompt textarea with Add and Send icon buttons, four suggestion links and a terms note.

Hero sectionshero8Muted hero with a rounded navbar, pulsing member count badge, centered headline, Get Started and Book a demo buttons, a gradient divider line and four white stat cards in a grid.

How it workshow-it-works10Small uppercase label and centered heading above three bordered cards, each with a top image, a title, a short description and a Learn more link with an arrow.

How it workshow-it-works11Centered heading and paragraph above three step cards, each with a step label, a large fading number in the corner, a title and a short description.

How it workshow-it-works2Three column layout with a heading and text on the left, a tall rounded building photo in the middle and four numbered steps with titles and descriptions on the right.

How it workshow-it-works3Two column section with a rounded product image on one side and a How it works badge, heading and three numbered steps separated by dividers on the other.

How it workshow-it-works4Narrow centered column with a heading and subtitle above three steps separated by dividers, each with a small #1 style number tag, a bold title and a longer paragraph.

How it workshow-it-works5Three column grid where a muted card holds the heading and subtitle and five bordered cards show numbered steps with a small number badge, title and description.

How it workshow-it-works6Two tone How we Work heading above four steps in a divided list, each with a rounded Step 01 style pill, a large title and a short description.

How it workshow-it-works9Two column grid of four steps without a section heading, each showing a step number, a title, a short description and a bordered image below the text.

1illustration11 built with shadcn/ui.

10illustration1010 built with shadcn/ui.

11illustration1111 built with shadcn/ui.

12illustration1212 built with shadcn/ui.

13illustration1313 built with shadcn/ui.

14illustration1414 built with shadcn/ui.

15illustration1515 built with shadcn/ui.

16illustration1616 built with shadcn/ui.

17illustration1717 built with shadcn/ui.

18illustration1818 built with shadcn/ui.

19illustration1919 built with shadcn/ui.

2illustration22 built with shadcn/ui.

20illustration2020 built with shadcn/ui.

21illustration2121 built with shadcn/ui.

22illustration2222 built with shadcn/ui.

23illustration2323 built with shadcn/ui.

24illustration2424 built with shadcn/ui.

25illustration2525 built with shadcn/ui.

26illustration2626 built with shadcn/ui.

27illustration2727 built with shadcn/ui.

28illustration2828 built with shadcn/ui.

29illustration2929 built with shadcn/ui.

3illustration33 built with shadcn/ui.

30illustration3030 built with shadcn/ui.

31illustration3131 built with shadcn/ui.

32illustration3232 built with shadcn/ui.

33illustration3333 built with shadcn/ui.

34illustration3434 built with shadcn/ui.

35illustration3535 built with shadcn/ui.

36illustration3636 built with shadcn/ui.

4illustration44 built with shadcn/ui.

5illustration55 built with shadcn/ui.

6illustration66 built with shadcn/ui.

7illustration77 built with shadcn/ui.

8illustration88 built with shadcn/ui.

9illustration99 built with shadcn/ui.

Integrationsintegrations1Centered headline above a three column grid of integration cards, each with an app logo, name, one line description and a Learn More link button.

Integrationsintegrations2Header with an App Integration badge, headline and Browse All Apps button, above a three column grid of app cards with logo, name, description and a Connect button.

Integrationsintegrations3Compact centered section with a headline, a row of overlapping round app logos that show each app name in a tooltip, and a See all integration button.

Integrationsintegrations4Two column layout with a headline, short text and Explore Integration button on the left and a grid of logo cards with app names on the right.

Integrationsintegrations5Two column layout with copy and a Browse All Apps button on the left and two columns of logo cards scrolling vertically in opposite directions on the right.

Integrationsintegrations6Headline and Browse All Apps button above two rows of logo cards that scroll horizontally in opposite directions with faded edges.

Integrationsintegrations7Centered integrations heading with a badge and link on a dotted background, surrounded by brand logos that slowly orbit along a large ring.

Lineline-chart1Line charts for balance, trends, and time-series data. Use these shadcn/ui examples when you need clear trend visualization in dashboards or reports.

Lineline-chart2Line charts for balance, trends, and time-series data. Use these shadcn/ui examples when you need clear trend visualization in dashboards or reports.

Lineline-chart3Line charts for balance, trends, and time-series data. Use these shadcn/ui examples when you need clear trend visualization in dashboards or reports.

Lineline-chart4Line built with shadcn/ui.

Mail appmail-app2Inbox start page with greeting, live clock and three counters, day grouped inbox with priority badges, filter and sort, task checklist, comment feed and a message sheet with reply.

Mail appmail-app7Client inbox with top search bar, icon rail, All, Unread, Flagged and Sent tabs, rows with activity line and status badge, and a thread view with flag, inline reply and forward.

Map viewmap-view7Store locator with name or address search, an Open now toggle, store cards with hours and phone, pin markers colored by open status and a popup with a Get directions link.

Navbarsnavbar1Bordered top bar with a text logo, Features, Pricing and About links plus a Resources dropdown, Sign In and Get Started buttons, and a right side drawer with the same links on mobile.

Navbarsnavbar10Skin care store header with a Shop mega menu of five link columns, New Arrivals and Skin Quiz links, a centered logo and account, search and a cart popover with items and subtotal.

Navbarsnavbar14Agency header with UI Design and Services links, Customers, Resources and About dropdowns listing icon items with descriptions, a promo card in Resources and a Book a call button.

Navbarsnavbar15Studio header with a logo, a pill of social text links and a two line menu button that opens a full screen inverted overlay with large uppercase links, an address and social links.

Navbarsnavbar2Floating rounded bar on a muted background with a text logo, four plain links and Sign In and Get Started buttons. Below the medium breakpoint the links move into a right side drawer.

Navbarsnavbar4Three part header with the logo on the left, four links centered and ghost Sign in and filled Register buttons on the right, collapsing into a right side drawer on mobile.

Navbarsnavbar5App header with the logo and four links, a messages dropdown, a notifications dropdown with an unread dot and an avatar menu with Profile, Settings and Log out, plus a mobile drawer.

Navbarsnavbar6App header with a search field next to the logo, four centered links, messages and notifications dropdowns, an avatar menu and a mobile drawer containing search and links.

Navbarsnavbar7App header with the logo and four links on the left and a search field, messages and notifications dropdowns and an avatar menu grouped on the right, plus a mobile drawer.

Navbarsnavbar8Header with the logo and four links, a compact search field and an avatar trigger showing the user name and a chevron that opens Profile, Settings and Log out, plus a mobile drawer.

Navbarsnavbar9Search focused header with the logo, a wide search field in the middle and messages, notifications and avatar menus on the right. It has no link list or drawer.

Newsletter sectionsnewsletter3Single row sign-up with the heading and a short description on the left and an email input with a Subscribe button on the right. Stacks vertically on small screens.

Newsletter sectionsnewsletter5Full width section with a background image, a large white headline, short text and an email input next to a secondary Subscribe button, aligned to the left.

Newsletter sectionsnewsletter7Edge to edge split section with a photo filling one half and a heading, text, stacked email input, full width Subscribe button and a privacy note on the other half.

Newsletter sectionsnewsletter8Tall section with a landscape background image, one centered sentence and a translucent email field with the Subscribe button placed inside the input, wrapped in a form.

Payment methodspayment-methods1Checkout-ready patterns for card, PayPal, and wallet options. Use these shadcn/ui examples to build trust and reduce friction at the payment step.

Payment methodspayment-methods2Checkout-ready patterns for card, PayPal, and wallet options. Use these shadcn/ui examples to build trust and reduce friction at the payment step.

Pricing tablespricing11Free and Pro plan cards side by side. The Pro card is filled with the primary color, overlaps the free card on desktop and has a Best for teams badge and trial button.

Pricing tablespricing16Heading and text on the left, an accordion of three plans on the right. Each item shows name and price, and a View plan details trigger reveals features and a button.

Pricing tablespricing20Free and Pro plan cards inside colored frames, muted for Free and primary for Pro. Each card lists price and features, with a full width arrow link in the frame below.

Pricing tablespricing5Two column intro with a heading, text and a Book a demo button. Below, two service subscription cards with two column feature lists, the popular one in inverted primary colors.

Pricing tablespricing6Billing tabs and a team size slider from 5 to 50 users in a muted panel. Four plan cards show the total monthly price for that team, the per user rate and a feature checklist.

Product cardsproduct-card4Product cards built with shadcn/ui.

Product cardsproduct-card5Product cards built with shadcn/ui.

Product cardsproduct-card6Product cards built with shadcn/ui.

Product cardsproduct-card7Product cards built with shadcn/ui.

Product cardsproduct-cards7Square sofa card where the photo fills the card, with a star score pill and wishlist button on top and the name, price and shopping bag toggle over a bottom gradient.

Product listproduct-list-card1Structured product lists with icons, names, and metrics like units sold. Ideal for best-sellers, comparison views, and catalog sections using shadcn/ui.

Product listproduct-list1New Season Products shelf with a See all products link and a four column grid of portrait product images, each showing name, color and price, where the whole card is a link.

Project managementproject-management-chart1Charts for tasks, progress, and achievements, e.g. horizontal bars by year. Integrate with project and portfolio views using shadcn/ui.

Project managementproject-management-chart2Charts for tasks, progress, and achievements, e.g. horizontal bars by year. Integrate with project and portfolio views using shadcn/ui.

Reviewreview-card1Rating summaries, star breakdowns, and write-a-review CTAs in compact card layouts. Add social proof to product and landing pages with these shadcn/ui components.

Reviewreview-card10Review built with shadcn/ui.

Reviewreview-card11Review built with shadcn/ui.

Reviewreview-card12Review built with shadcn/ui.

Reviewreview-card13Review built with shadcn/ui.

Reviewreview-card2Rating summaries, star breakdowns, and write-a-review CTAs in compact card layouts. Add social proof to product and landing pages with these shadcn/ui components.

Reviewreview-card3Rating summaries, star breakdowns, and write-a-review CTAs in compact card layouts. Add social proof to product and landing pages with these shadcn/ui components.

Reviewreview-card4Review built with shadcn/ui.

Reviewreview-card5Review built with shadcn/ui.

Reviewreview-card6Review built with shadcn/ui.

Reviewreview-card7Review built with shadcn/ui.

Reviewreview-card8Review built with shadcn/ui.

Reviewreview-card9Review built with shadcn/ui.

Social media postsocial-media-post1Feed-style cards with avatar, handle, timestamp, content, and media. Use them for announcements, testimonials, or changelog-style posts with shadcn/ui.

Social media postsocial-media-post2Feed-style cards with avatar, handle, timestamp, content, and media. Use them for announcements, testimonials, or changelog-style posts with shadcn/ui.

Social media postsocial-media-post3Feed-style cards with avatar, handle, timestamp, content, and media. Use them for announcements, testimonials, or changelog-style posts with shadcn/ui.

Social media postsocial-media-post4Social media post built with shadcn/ui.

Statstat-card-example1KPI and pipeline cards with labels, values, and progress bars. Suited for dashboards and reports, built from shadcn/ui for clear metric presentation.

Statstat-card-example2KPI and pipeline cards with labels, values, and progress bars. Suited for dashboards and reports, built from shadcn/ui for clear metric presentation.

Statstat-card-example3KPI and pipeline cards with labels, values, and progress bars. Suited for dashboards and reports, built from shadcn/ui for clear metric presentation.

Statstat-card-example4Stat built with shadcn/ui.

Stat cardsstat-card10Outbound shipments card with a 14 or 30 day toggle, a total with change badge, a stacked Recharts bar chart by status and three summary toggles that highlight one series.

Stat cardsstat-card14Today's transfers card with All, Received and Sent tabs, a list of incoming and outgoing transfers with colored amount badges and a footer total that follows the active tab.

Stat cardsstat-card15Account activity card with a 7, 30 or 90 day select, name and amount sort buttons, a transaction list with icons or initials, status labels and a net flow footer.

Stat cardsstat-card19Cluster capacity card with a cluster select, spend and uptime badges and a 40-tick vCPU meter that turns red above 80 percent and shows a value for each hovered tick.

Stat cardsstat-card22Deploy success rate card with 30 daily bars around a dashed target line, the selected day's rate and gap to the average, an on-target badge and a count of days below target.

Stat cardsstat-card23Appointment show rate card with a 7D, 30D or 1Y toggle, point change, a four-band Poor to Great scale with a sliding marker and tooltip, and booked visits and no-shows.

Stat cardsstat-card24Energy generated card with a 7D, 30D or 90D toggle, total MWh with percentage change, a Recharts area chart with an average line and footer values for daily average and best day.

Stat cardsstat-card25Sprint progress card with a large completion percentage, three status toggles for shipped, in review and to do, a row of one tick per issue and a dropdown of sprint actions.

Stat cardsstat-card26Recovery score card with a 30 day Recharts area chart, a dashed baseline, a headline score that follows the hovered day, a change versus the prior day and a status badge.

Stat cardsstat-card3Website analytics card with a conversion rate in the description and a two-column grid of six labeled values: direct, organic, sessions, page views, leads and conversions.

Stat cardsstat-card32Care follow-up card with a 4W or 12W toggle and two side by side metrics, each with a value, a point change colored by outcome and a small Recharts area sparkline with tooltip.

Stat cardsstat-card33Learner funnel card with week, month and year tabs and three proportional columns for enrolled, active and certified learners, with a footer sentence that updates on hover.

Stat cardsstat-card4Sales overview card with a large revenue total, a monthly growth figure, orders and visits percentage chips and a two-color split bar underneath.

Stat cardsstat-card5Three regional revenue cards, each with a large amount and a linked status row showing goals achieved out of five, a colored status icon and a chevron arrow.

Stat cardsstat-card6Two compact usage cards with a Recharts radial ring that shows the percentage in its center, next to the resource name and how many of the allowed items are used.

Stat cardsstat-card7Four usage limit cards for requests, credits, storage and API calls, each with the current value, a progress bar, the percentage used and the plan limit.

Stat cardsstat-card8Three stock ticker cards with company name, symbol, price, change and percentage colored green or red, plus an edge to edge Recharts area sparkline along the bottom of each card.

Stat cardsstat-card9Energy source mix card with a site select, four quarter bars split between solar and grid that filter the totals when clicked, a legend and solar versus grid shares in MWh.

Statsstats1Left aligned label, heading and intro above four counters in a row with dividers on desktop, each with a large count up number, colored suffix, bold label and one line description.

Statsstats10Accent colored bordered panel with a long heading and About Us button on the left and three divided rows on the right, each with a large count up number, label and description.

Statsstats11Primary colored rounded band with four stats in a row separated by thin dividers, starting with a static #1 and followed by count up numbers with labels. Stacks on phones.

Statsstats12Indicator label and heading with a reviewer avatar, 4.9/5 score, five stars and review source on the left, and a bordered two by two grid of centered count up stats on the right.

Statsstats2Muted section with a centered Stats badge and a heading with a primary accent word, above three cards that each show a count up number and a short label.

Statsstats3Centered problem statement heading and text above three cards with an icon badge, a large light count up percentage and a sentence with bold lead text. The middle card is offset lower.

Statsstats4Three columns: a heading with four stats in a two by two grid (three count up, one static 24/7), a tall photo in the middle and two paragraphs with a rounded About Us button.

Statsstats5Why Us badge, heading and text with three decimal count up stats on the left, and a two by two grid of muted tiles with a primary icon, title and short description on the right.

Statsstats6Muted section with a small label, heading, text and three stats (two count up, one static rating) on the left and two bordered feature cards with primary icons on the right.

Statsstats7Two line heading with an italic tagline aligned right, above a two by two grid of accent cards with corner bracket borders, a label and a large primary count up number.

Statsstats8Two column layout with a rounded dashboard screenshot on one side and a badge, large heading, text and two faded count up numbers with labels on the other.

Statsstats9Results label and heading above a bordered card split in two: two count up stats with a recharts bar chart of monthly tasks, and a subheading, text and a large 99.9% stat.

Cardsswitch-card1Settings-style cards that pair a label and short description with a switch. Use for toggles in preference panels with shadcn/ui.

Tablestables3Launch checklist with All, Open and Done tabs, a progress bar, done checkboxes that strike through tasks, owner avatars, due dates and a status dropdown with four states per row.

Tablestables4Storefront products card with a search field, product icon, name and SKU, category, inventory and price columns with sorting, and a row menu to copy SKU, duplicate, archive or delete.

Tasktask-card1Task rows with checkbox, title, and status or due date. Use these shadcn/ui examples for kanban boards, backlogs, and productivity views.

Tasktask-card2Task rows with checkbox, title, and status or due date. Use these shadcn/ui examples for kanban boards, backlogs, and productivity views.

Team sectionsteam10Large centered heading over four tall photo cards fanned along an arc with name and title on a gradient. The hovered card lifts up. Phones get a two column grid instead of the fan.

Team sectionsteam11Two column section on a muted background with a large heading, short text and a Join our team button next to a three column, staggered collage of six rounded team photos.

Team sectionsteam12Centered icon tile and heading above pill shaped cards with round grayscale avatars, name and title. Two founders sit in the top row and six team members wrap in the row below.

Team sectionsteam5Centered heading and text above six large round grayscale portraits in a wrapping row, each with name, job title and Twitter, Instagram and Facebook icon links underneath.

Team sectionsteam6Numbered heading with intro text and an outline Read more button, above a two to four column grid of tall rounded portraits with small name and title captions.

Testimonialstestimonial11Badge with a colored dot, heading and subtitle above a two column grid of four cards, each with an avatar, name and role above a longer quote.

Testimonialstestimonial12Two column layout with a badge and large heading on the left and a grid on the right holding a featured quote card, a photo and two smaller quote cards.

Testimonialstestimonial3Badge, heading and subtitle above up to three columns of quote cards that scroll upward in endless loops at different speeds, with faded top and bottom edges.

Testimonialstestimonial6Bento grid of four quote cards with quote icons: a tall card with a 6X metric on the left, a wide card and two smaller cards on the right, one filled with the primary color.

Testimonialstestimonial7Heading with a Learn More button above two wide cards, each with a large avatar, five stars, quote, name, role, tag badges and a metric box such as 97% match rate.

Testimonialstestimonial8Editorial slider with a large faded slide number beside one big quote, avatar, name and company, plus line indicators, a 01 / 03 counter and previous and next icon buttons.

Theme switchertheme-switcher1Light/dark theme toggles in several layouts, icon-only, with label, or in a small control group. Built with shadcn/ui for consistent theming.

Theme switchertheme-switcher2Light/dark theme toggles in several layouts, icon-only, with label, or in a small control group. Built with shadcn/ui for consistent theming.

Theme switchertheme-switcher3Light/dark theme toggles in several layouts, icon-only, with label, or in a small control group. Built with shadcn/ui for consistent theming.

User menususer-dropdown-01Profile dropdowns with upgrade, account, billing, notifications, and sign out. Use these shadcn/ui examples for header user menus.

User menususer-dropdown-02Profile dropdowns with upgrade, account, billing, notifications, and sign out. Use these shadcn/ui examples for header user menus.

Welcomewelcome-card1Onboarding and empty-state cards with headline, short copy, and primary action. Greet users and guide next steps using shadcn/ui layouts.

Welcomewelcome-card2Onboarding and empty-state cards with headline, short copy, and primary action. Greet users and guide next steps using shadcn/ui layouts.

Welcomewelcome-card3Onboarding and empty-state cards with headline, short copy, and primary action. Greet users and guide next steps using shadcn/ui layouts.

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information