React comparison section components
A comparison section has to put two products on the same rows. These blocks print the limits, the prices, and the missing marks in one grid so the visitor is not left reconstructing a spreadsheet.
Built with the stack you already ship
Comparison section blocks you can copy
Each block is one file covering the products and the feature rows. Preview it live, then copy the source into your project.
Comparison Section With Features MatrixDark comparison section with a four column features matrix, Google Microsoft and Amazon wordmarks, and circular missing marks. Winning values read brighter than the rest.
Comparison Section With Simple PricingComparison section with a Simple pricing heading, an annual or monthly switch, three tinted plan columns, grouped feature rows, and green checks. Follows light and dark.
Comparison Section With Leader GraphComparison section with one bar chart, four product logos under the plot, and a blue gradient bar for the lead product. Follows light and dark.
Comparison Section With Compare PlansComparison section with a compact three plan table, prices and CTAs in the header, purple type on the featured seat, and checks or crosses on the rows. Follows light and dark.
Comparison Section With Benchmark MatrixComparison section with a boxed model score matrix, a blue featured column, nested benchmark captions, and highlighted winning cells. Follows light and dark.
Surfaces that sit beside a comparison
Pricing and FAQ from the same library, for the page that has already named the competitor and now has to print the invoice or the last objection.
Pricing Section With Animated CloudsThree glass plan cards on a drifting cloud sky, with a yearly or monthly toggle and a highlighted middle seat.
Pricing Section With Usage ReceiptInteractive pricing section with usage sliders for seats, requests, storage, and credits, plus a live receipt and a monthly or annual cycle.
Pricing Section With Soft GradientThree plan cards on a blue to peach wash, with a yearly switch and a handwritten save scribble beside the popular middle seat.
Pricing Section With Credit Plan ColumnsFour plan columns in one bordered shell, with a yearly billing switch, credit menus, and a highlighted Pro action.
Pricing Section With Included PriceOne moss price card with a grain wash, a pause footer, and a three-column check table against home and studio.
Pricing Section With Comparison TableFour-column pricing comparison with annual or monthly radios, a most popular column, feature checks, and a core matrix.
Pricing Section With Nested Feature ListsFour serif plan cards with a gliding monthly or annual toggle, three highlight rows, and a nested extras list under each card.
Pricing Section With Lifetime HighlightFour access cards with live prices, an inverted Keep highlight, and a plus rule for stacked includes. Follows light and dark.
How to choose a comparison section
A comparison section puts columns on the same rows. Comparison Section With Simple Pricing and Comparison Section With Compare Plans still belong here: the columns are your own seats, with prices in the header. The other blocks name a competitor, a model, or a graph, not a SKU.
Comparison Section With Leader Graph is the bar chart. Four bars sit on one plot. Logos, names, and scores sit under the axis. Lumen is the mock lead on the right with a blue gradient bar. Helio, Vale, and Kite sit in muted bars to the left. Use it when the argument is a gap you can draw in four columns.
Comparison Section With Simple Pricing is the grouped plan sheet. Simple pricing sits on the left. Pay annually and pay monthly share a switch, and the prices tick with it. Free, Plus, and Pro print a tagline, a per user price, and an underlined start link. Plus keeps a sky wash. Pro keeps a sand wash and a corner flag. Usage, Essentials, and Advanced group the rows. Checks are green. Missing seats get a cross.
Comparison Section With Compare Plans is the compact seat sheet. Three of your own plans share a tight grid under a Compare plans heading. Prices and buttons sit in the header. The featured seat is marked in purple type with a solid purple button, not a column outline. Checks, crosses, and short limits fill the rows. Keep it small enough that all three seats stay on one row.
Comparison Section With Features Matrix is for three named products on one grid. Compare plans sits in the first cell. Google, Microsoft, and Amazon sit as wordmarks. Each row names a limit on the left and prints a value in each product column. The stronger value is set in brighter type. A circular X marks a product that does not include the row.
Comparison Section With Benchmark Matrix is the score sheet. It sits in a square frame and follows light and dark. Four models share horizontal hairlines only. A blue column frames RuneAI from header to last row. Winning cells take a blue fill, including scores outside that column. The reasoning row stacks two captions in the same cell, no tools and with tools.
Replace the demo names before this ships. Plan prices, wordmarks, and model labels are samples. So are the eval titles and the figures. Swap them for the numbers you can stand behind on a call.
Keep the hairline grid. Thick borders turn the table into a dashboard widget. Keep the outer frame square. The winning cell should read first. Matching every column in the same white type removes the decision the layout was drawn to make.
Do not follow this block with another comparison table. One matrix is already a decision. The next section should be a pricing receipt, a FAQ, or the checkout. A second grid of checkmarks usually means the team could not agree which competitor to name.
Wire the numbers you can stand behind on a call. Empty custom cells that still say Custom are worse than hiding the row.
