# Spruce CSS

> Spruce CSS is a Sass-based, minimalistic CSS framework. It styles native elements with a few classes and gives you variables, mixins and functions for your own components. Version 3 adds design style presets (data-spruce-style), a built-in dark mode, design tokens and AI skills.

- npm: https://www.npmjs.com/package/sprucecss
- Source: https://github.com/conedevelopment/sprucecss
- AI skills: https://github.com/conedevelopment/sprucecss/tree/main/skills
- Spruce UI index (JSON): https://sprucecss.com/library.json

## Spruce UI

Spruce UI is the component library built on Spruce CSS: components, blocks (full-width page sections) and complete pages. It isn't in the npm package; every item has a Markdown endpoint with its rendered HTML, its SCSS, its JavaScript and its dependencies in loading order. The links below point to these endpoints (the same URL without `.md` is the preview page).

## Docs

- [Introduction](https://sprucecss.com/docs/getting-started/introduction/): Read more about our goals and intentions with Spruce CSS framework. Why we built it, and why is it a good choice for you too?
- [Installation](https://sprucecss.com/docs/getting-started/installation/): Install Spruce easily with npm or use it as a standalone dependency; it's all on you.
- [Structure and Code](https://sprucecss.com/docs/getting-started/structure-and-code/): Explore the style guide and structure of Spruce CSS micro-framework. You can find some core principles and the main structure on this page.
- [Sass](https://sprucecss.com/docs/getting-started/sass/): Utilizing Sass helps you achieve more with less code and faster with built-in mixins and functions.
- [Upgrade to v3](https://sprucecss.com/docs/getting-started/upgrade/): Upgrade Spruce CSS from v2 to v3: what is new, what changed in the default output and how to adopt the new features.
- [Inclusivity and Accessibility](https://sprucecss.com/docs/getting-started/accessibility/): Create more inclusive and accessible solutions using our micro-framework and its components.
- [Internationalization](https://sprucecss.com/docs/getting-started/internationalization/): With core internationalization support through modern CSS and its logical properties, you can handle RTL layouts more easily with Spruce CSS.
- [Print](https://sprucecss.com/docs/getting-started/print/): With some necessary print styles, you can control better your print view with Spruce CSS framework.
- [Contribution](https://sprucecss.com/docs/getting-started/contribution/): You can help us tremendously with any small contribution, like fixing a typo.
- [Appendix](https://sprucecss.com/docs/getting-started/appendix/): In the appendix, you can find some references that inspired or gave any input related to any aspects of Spruce CSS or our learning in general.
- [Variables](https://sprucecss.com/docs/customization/variables/): Spruce CSS is a highly customizable framework through variables. In this post, you will learn how to customize and get them.
- [Settings](https://sprucecss.com/docs/customization/settings/): By changing the settings parameters, you can customize a generic part of the behavior of Spruce CSS.
- [Themes and Dark Mode](https://sprucecss.com/docs/customization/themes/): Spruce CSS comes with a built-in, opt-in dark mode and makes any color theme easy through CSS custom properties.
- [Styles](https://sprucecss.com/docs/customization/styles/): Restyle the same markup with design style presets: minimal, brutalist, soft, glass, corporate, playful, editorial and terminal. Scope them to any element or create your own.
- [Colors](https://sprucecss.com/docs/sass/colors/): Through colors, you can genuinely make Spruce CSS your own. Control everything with the $colors map.
- [Variables](https://sprucecss.com/docs/sass/variables/): The variables are fundamental for better customizability. Luckily, Spruce CSS gives you a lot of them.
- [Mixins](https://sprucecss.com/docs/sass/mixins/): You can do more with less code with the mixins in Spruce CSS micro-framework.
- [Functions](https://sprucecss.com/docs/sass/functions/): The functions are an essential part of the Spruce CSS framework. You can get values, set up your fluid typography, and more.
- [Generators](https://sprucecss.com/docs/elements/generators/): Generator mixins output the styles of Spruce CSS. Turn any part on or off, or call the generators with your own selectors.
- [Typography](https://sprucecss.com/docs/elements/typography/): Spruce CSS comes with fluid typography; it scales automatically depending on the viewport.
- [Tables](https://sprucecss.com/docs/elements/tables/): Opt-in table styles with striped, hover, bordered, small, rounded, sticky header and responsive variants.
- [Buttons](https://sprucecss.com/docs/elements/buttons/): Button variants (solid, outline, soft, ghost, link), sizes, states, groups and custom variants in Spruce CSS.
- [Forms](https://sprucecss.com/docs/elements/forms/): Spruce CSS comes with overall form support for styling the different native elements.
- [Media](https://sprucecss.com/docs/elements/media/): Responsive images, videos, iframes and figures with captions in Spruce CSS.
- [Details and Dialog](https://sprucecss.com/docs/elements/details-and-dialog/): Style the native details/summary disclosure and the modal dialog element with Spruce CSS.
- [Progress and Meter](https://sprucecss.com/docs/elements/progress-and-meter/): Native progress bars (including the indeterminate state) and meters styled by Spruce CSS.
- [Layout](https://sprucecss.com/docs/elements/layout/): Build intrinsic, responsive layouts without a grid system: Spruce CSS layout mixins and the opt-in layout utility classes.
- [Utilities](https://sprucecss.com/docs/elements/utilities/): The few utility classes Spruce CSS ships: accessibility helpers, display, typography and the opt-in text utilities.
- [Compile Sass](https://sprucecss.com/docs/guides/compile-sass/): The simplest way to compile Sass for a Spruce CSS project: npm scripts and the Sass command-line interface.
- [Configure Your Project](https://sprucecss.com/docs/guides/configure-your-project/): A config folder structure that keeps the Spruce CSS settings, themes and the style generation in one place.
- [Create a Button Variant](https://sprucecss.com/docs/guides/create-a-button-variant/): Add a new button color to Spruce CSS and generate its solid, outline, soft and ghost variants.
- [Reduce the CSS Size](https://sprucecss.com/docs/guides/reduce-the-css-size/): Generate only the parts of Spruce CSS you use with the generators, the settings and the style presets include list.
- [Set Up a Dark Theme](https://sprucecss.com/docs/guides/set-up-a-dark-theme/): Turn on the built-in dark mode, customize its colors, follow the system preference and handle component-specific dark styles.
- [Build a Theme Switcher](https://sprucecss.com/docs/guides/build-a-theme-switcher/): A flash-free light, dark and system theme switcher with localStorage, system preference detection and theme-specific images.
- [AI Skills](https://sprucecss.com/docs/ai/skills/): Agent skills for AI coding assistants: teach Claude Code (and other tools) to write idiomatic Spruce CSS and to design in every Spruce style.

## Components

- [Accordion Card (Card)](https://sprucecss.com/ui/card/accordion.md): A list of collapsible cards for FAQs and long, optional content: only the titles show, and each card opens on demand with a smooth height animation.
- [Event (Card)](https://sprucecss.com/ui/card/event.md): Event cards with a date badge, an image, the event type, the place and the time.
- [Info Card (Card)](https://sprucecss.com/ui/card/info.md): A service or feature card with an icon, a title, a short description and a link. The whole card is clickable and turns into a high-contrast, inverted state on hover and keyboard focus.
- [Lesson (Card)](https://sprucecss.com/ui/card/lesson.md): A card for a video lesson: a 16:9 thumbnail with the duration, the module, the title and whether it's a free preview or part of the paid course.
- [Number Card (Card)](https://sprucecss.com/ui/card/number.md): Highlight your numbers (projects, clients, uptime) with large figures that count up when they scroll into view.
- [Order Card (Card)](https://sprucecss.com/ui/card/order.md): An order line for carts and checkouts: thumbnail, product details, a quantity control, the line total and a remove button.
- [Payment Card (Card)](https://sprucecss.com/ui/card/payment.md): A payment method picker for checkouts: every option is a card with a title, a short note and an optional logo, and the whole card selects the native radio button.
- [Post Card (Card)](https://sprucecss.com/ui/card/post.md): The post card component is a generic UI element we can use in many cases, but it is the most common in post (blog, news) listings.
- [Pricing (Card)](https://sprucecss.com/ui/card/pricing.md): A pricing table built from cards. Highlight the recommended plan, list the features and give every plan one clear call to action.
- [Product (Card)](https://sprucecss.com/ui/card/product.md): A product card for shop listings with an image, a sale tag, a star rating, the price and an "Add to cart" action.
- [Profile (Card)](https://sprucecss.com/ui/card/profile.md): A profile (user) card with a cover, an avatar, a short bio, statistics and actions.
- [Stat (Card)](https://sprucecss.com/ui/card/stat.md): KPI cards with a value, the change versus the previous period and a sparkline.
- [Testimonial (Card)](https://sprucecss.com/ui/card/testimonial.md): Social proof cards with a quote, the author's photo, name and role.
- [Block Heading (Content and Layout)](https://sprucecss.com/ui/content-and-layout/block-heading.md): The shared heading of the blocks: an optional eyebrow, the title and a short introduction.
- [Call to Action (Content and Layout)](https://sprucecss.com/ui/content-and-layout/call-to-action.md): A closing call to action: a short, specific headline, one supporting sentence and one or two buttons. It comes as a plain split section and a highlighted, boxed version.
- [Carousel (Content and Layout)](https://sprucecss.com/ui/content-and-layout/carousel.md): A lightweight, swipeable carousel built on CSS scroll snapping. It works without JavaScript; the script only adds the previous/next buttons and the active dot.
- [Container (Content and Layout)](https://sprucecss.com/ui/content-and-layout/container.md): The container centers the content of a page area, limits its width and keeps a fluid gap on the sides. Every page, header, footer and [block](https://sprucecss.com/blocks/) uses it.
- [Drawer (Content and Layout)](https://sprucecss.com/ui/content-and-layout/drawer.md): An off-canvas drawer (side sheet) for filters, a cart or a mobile menu, built on the native <dialog> element.
- [Feature (Content and Layout)](https://sprucecss.com/ui/content-and-layout/feature.md): Alternating image and text rows to present product features: a label, a headline, a short description, a list of benefits and a call to action.
- [Gallery (Content and Layout)](https://sprucecss.com/ui/content-and-layout/gallery.md): Two image grid layouts: an even, intrinsic grid that fits as many columns as there is room for, and an uneven, editorial grid with mixed sizes.
- [Image Compare (Content and Layout)](https://sprucecss.com/ui/content-and-layout/image-compare.md): A before/after image comparison slider.
- [Logo Cloud (Content and Layout)](https://sprucecss.com/ui/content-and-layout/logo-cloud.md): A row of customer or partner logos for social proof.
- [Modal (Content and Layout)](https://sprucecss.com/ui/content-and-layout/modal.md): A modal dialog built on the native dialog element: it traps the focus, makes the rest of the page inert, closes with Esc and returns the focus to its opener, with a few lines of JavaScript.
- [Post author (Content and Layout)](https://sprucecss.com/ui/content-and-layout/post-author.md): The author byline of a post: avatar, name linked to the author page and, optionally, the date and reading time.
- [Activity Heatmap (Dashboard)](https://sprucecss.com/ui/dashboard/activity-heatmap.md): A calendar heatmap that shows the daily activity (orders, commits, sign-ups) of the last weeks. Dependency-free: a table with one cell per day and five intensity levels.
- [Activity Log (Dashboard)](https://sprucecss.com/ui/dashboard/activity-log.md): An audit log of who did what and when, grouped by day, with the type of the event, the IP address and the device, and an instant filter.
- [API Keys (Dashboard)](https://sprucecss.com/ui/dashboard/api-keys.md): A table of API keys with masked values, buttons to show and copy a key, the last use and a revoke action.
- [App Shell (Dashboard)](https://sprucecss.com/ui/dashboard/app-shell.md): The frame of an admin interface: a sidebar navigation, a sticky top bar with search and actions, and the main content area. Below the md breakpoint, the sidebar becomes an off-canvas panel.
- [Bar Chart (Dashboard)](https://sprucecss.com/ui/dashboard/bar-chart.md): A dependency-free bar chart in two layouts: horizontal bars for rankings and vertical columns for time series. It is a plain list with the values written out, styled with CSS.
- [Billing Overview (Dashboard)](https://sprucecss.com/ui/dashboard/billing-overview.md): The billing page of an account: the current plan and its renewal, the payment method and the invoice history.
- [Bulk Actions (Dashboard)](https://sprucecss.com/ui/dashboard/bulk-actions.md): A selectable table with a "select all" checkbox and a toolbar of actions that appears for the selected rows.
- [Calendar (Dashboard)](https://sprucecss.com/ui/dashboard/calendar.md): A month calendar with events. On wide screens, it's a seven-column grid; on phones, it turns into an agenda list of the days with events. No JavaScript.
- [Chart (Dashboard)](https://sprucecss.com/ui/dashboard/chart.md): Line and bar chart cards powered by Chart.js. The data comes from an HTML table in the card, and the chart takes its colors and font from the Spruce tokens, so it follows the dark mode and every design style.
- [Deployment List (Dashboard)](https://sprucecss.com/ui/dashboard/deployment-list.md): A list of deployments with their status, environment, branch, commit, author, time and build duration, like on a hosting dashboard.
- [Donut Chart (Dashboard)](https://sprucecss.com/ui/dashboard/donut-chart.md): A dependency-free donut chart with a total in the middle and a legend with the values. The ring is a single CSS conic-gradient.
- [File Manager (Dashboard)](https://sprucecss.com/ui/dashboard/file-manager.md): A file browser for a folder: the path, a grid or list view of the folders and files with type icons, an upload button and the storage usage.
- [Funnel Chart (Dashboard)](https://sprucecss.com/ui/dashboard/funnel-chart.md): A conversion funnel: how many people reach each step of a flow, as a share of the first step, with the drop-off between the steps.
- [Goal Tracker (Dashboard)](https://sprucecss.com/ui/dashboard/goal-tracker.md): Objectives and key results (OKRs) for a period: every goal with its status, overall progress, owner and the progress of its key results.
- [Kanban Board (Dashboard)](https://sprucecss.com/ui/dashboard/kanban-board.md): A task board with columns and cards that you can move with drag and drop or entirely with the keyboard. Dependency-free: the native HTML drag and drop API and a few lines of JavaScript.
- [Leaderboard (Dashboard)](https://sprucecss.com/ui/dashboard/leaderboard.md): A ranked list of people (or products, teams) by one metric, with the rank change and a bar against the leader's result.
- [Member List (Dashboard)](https://sprucecss.com/ui/dashboard/member-list.md): Team management: an invite form, the members with their roles, and the pending invitations with resend and revoke actions.
- [Metric Grid (Dashboard)](https://sprucecss.com/ui/dashboard/metric-grid.md): A row of key metrics (KPIs) with the current value, the change against the previous period and a sparkline of the trend.
- [Notification Center (Dashboard)](https://sprucecss.com/ui/dashboard/notification-center.md): A notification inbox panel with an unread counter, an All/Unread filter and buttons to mark one or all notifications as read.
- [Page Header (Dashboard)](https://sprucecss.com/ui/dashboard/page-header.md): The top of an admin page: breadcrumb, title with status badges, meta information, the primary actions and the section tabs.
- [Recent Orders (Dashboard)](https://sprucecss.com/ui/dashboard/recent-orders.md): The latest orders of a store in a compact table: the order number, the customer, the date, the status and the total.
- [Settings Panel (Dashboard)](https://sprucecss.com/ui/dashboard/settings-panel.md): A settings form split into labelled sections, with a sticky footer that tracks unsaved changes, and a danger zone for destructive actions.
- [Setup Checklist (Dashboard)](https://sprucecss.com/ui/dashboard/setup-checklist.md): An onboarding checklist that guides new users through the setup: a progress bar and expandable steps with a call to action each.
- [Status Monitor (Dashboard)](https://sprucecss.com/ui/dashboard/status-monitor.md): A service status panel with the overall state, the current state of every service and its uptime history for the last 30 days.
- [Stock Alerts (Dashboard)](https://sprucecss.com/ui/dashboard/stock-alerts.md): The products that are running out: what's out of stock and what's low, with the SKU and a quick restock action.
- [Team Invite (Dashboard)](https://sprucecss.com/ui/dashboard/team-invite.md): Invite people to a workspace by email with a role, and manage the pending invitations (resend or cancel).
- [Top Products (Dashboard)](https://sprucecss.com/ui/dashboard/top-products.md): The best-selling products of a period: a ranked list with the product, the units sold, the revenue and its share of the total.
- [Usage Meter (Dashboard)](https://sprucecss.com/ui/dashboard/usage-meter.md): The usage of a subscription plan against its limits, with native meter elements that change color as the usage grows, and a stacked storage breakdown.
- [Address Book (Ecommerce)](https://sprucecss.com/ui/ecommerce/address-book.md): The saved addresses of a customer account, with the default address marked and actions to edit, delete or make another address the default.
- [Cart Drawer (Ecommerce)](https://sprucecss.com/ui/ecommerce/cart-drawer.md): A slide-in cart: the items with quantity steppers, the progress to free shipping, the subtotal and the way to checkout, without leaving the page.
- [Cart Summary (Ecommerce)](https://sprucecss.com/ui/ecommerce/cart-summary.md): A shopping cart summary with line items, quantity inputs, a discount code field, the totals and the checkout button.
- [Category Grid (Ecommerce)](https://sprucecss.com/ui/ecommerce/category-grid.md): "Shop by category" tiles with a photo, the category name and the number of products, with the first category featured as a larger tile.
- [Checkout (Ecommerce)](https://sprucecss.com/ui/ecommerce/checkout.md): A one-page checkout: billing details, the payment method and an editable order summary with a live total, in a two-column layout.
- [Coupon Form (Ecommerce)](https://sprucecss.com/ui/ecommerce/coupon-form.md): A discount code field for the cart or the checkout: apply a code, see it as a removable chip and watch the totals update.
- [Delivery Estimate (Ecommerce)](https://sprucecss.com/ui/ecommerce/delivery-estimate.md): A delivery box for the product page: an "order within" cut-off countdown, a ZIP code check and the estimated delivery date of each shipping option.
- [Free Shipping Progress (Ecommerce)](https://sprucecss.com/ui/ecommerce/free-shipping-progress.md): A progress bar toward the free shipping threshold for the cart, with the missing amount and a product suggestion that fills the gap.
- [Gift Card (Ecommerce)](https://sprucecss.com/ui/ecommerce/gift-card.md): A gift card purchase form with preset or custom amounts, the recipient, a message and a delivery date, next to a live preview of the card.
- [Invoice (Ecommerce)](https://sprucecss.com/ui/ecommerce/invoice.md): A print-ready invoice: header with the serial number, payment details, the addresses, an itemized table with the totals and a footer with the contact details. It looks good on screen and prints (or saves as PDF) on an A4 page.
- [Listing Toolbar (Ecommerce)](https://sprucecss.com/ui/ecommerce/listing-toolbar.md): The toolbar above a product listing: the number of results, a filters button, the sort order and a grid/list view switch.
- [Mini Cart (Ecommerce)](https://sprucecss.com/ui/ecommerce/mini-cart.md): A cart button for the site header with an item count and a dropdown panel listing the cart items, the subtotal and the checkout buttons.
- [Order Confirmation (Ecommerce)](https://sprucecss.com/ui/ecommerce/order-confirmation.md): The "thank you" page after a purchase: the confirmation, what happens next, the order summary, the delivery and payment details, an account sign-up for guests and the next actions.
- [Order History (Ecommerce)](https://sprucecss.com/ui/ecommerce/order-history.md): The order list of a customer account: every order with its number, date, total, status, products and the next actions (track, buy again, invoice).
- [Order Tracking (Ecommerce)](https://sprucecss.com/ui/ecommerce/order-tracking.md): The delivery status of an order: the estimated arrival, a progress tracker, the shipment details and the scan history from the carrier.
- [Price (Ecommerce)](https://sprucecss.com/ui/ecommerce/price.md): Price display patterns for shops and pricing pages: regular, sale, starting price, unit price, subscription, tax note, large and member prices.
- [Product Bundle (Ecommerce)](https://sprucecss.com/ui/ecommerce/product-bundle.md): A "Frequently bought together" bundle: the product and its add-ons with checkboxes, a live total with a bundle discount and one button that adds them all.
- [Product Compare (Ecommerce)](https://sprucecss.com/ui/ecommerce/product-compare.md): A side-by-side product comparison table with a sticky label column, removable products and a switch that hides the identical rows.
- [Product Details (Ecommerce)](https://sprucecss.com/ui/ecommerce/product-details.md): The buy box of a product page: brand, title, rating, sale price, color and size options, stock status, quantity, "Add to cart", wishlist and the product information.
- [Product Filters (Ecommerce)](https://sprucecss.com/ui/ecommerce/product-filters.md): Faceted filters for a product listing: categories with counts, a dual-handle price range, color swatches, sizes and an availability switch, with removable chips for the active filters.
- [Product Gallery (Ecommerce)](https://sprucecss.com/ui/ecommerce/product-gallery.md): The image gallery of a product page: a large image with hover zoom, previous and next buttons, a counter and a row of thumbnails.
- [Quick View (Ecommerce)](https://sprucecss.com/ui/ecommerce/quick-view.md): A product preview in a modal dialog: photo, rating, price, options and "Add to cart", without leaving the listing.
- [Recently Viewed (Ecommerce)](https://sprucecss.com/ui/ecommerce/recently-viewed.md): A horizontally scrolling row of the products the customer has looked at, with arrow buttons and a "Clear history" action.
- [Returns Form (Ecommerce)](https://sprucecss.com/ui/ecommerce/returns-form.md): A return request form: choose the items of an order, give a reason for each, pick the refund method and see the estimated refund.
- [Shipping Options (Ecommerce)](https://sprucecss.com/ui/ecommerce/shipping-options.md): The shipping step of a checkout: selectable delivery methods with the delivery estimate and the price, and an order total that follows the choice.
- [Size Guide (Ecommerce)](https://sprucecss.com/ui/ecommerce/size-guide.md): A size chart in a modal dialog with a centimeter/inch switch and measuring instructions.
- [Stock Indicator (Ecommerce)](https://sprucecss.com/ui/ecommerce/stock-indicator.md): The availability of a product on its page: the stock level of the chosen size, a back-in-stock form for sold-out sizes and the pickup availability in stores.
- [Subscribe and Save (Ecommerce)](https://sprucecss.com/ui/ecommerce/subscribe-and-save.md): A purchase option picker for consumable products: buy once, or subscribe with a discount and choose the delivery frequency. The button shows the final price.
- [Trust Bar (Ecommerce)](https://sprucecss.com/ui/ecommerce/trust-bar.md): The store's promises in one row: free shipping, returns, warranty and payment, right under the header or above the footer.
- [Wishlist (Ecommerce)](https://sprucecss.com/ui/ecommerce/wishlist.md): Saved products with their price, stock status and actions: move to the cart, get notified when an item is back in stock, or remove it.
- [Alert (Feedback)](https://sprucecss.com/ui/feedback/alert.md): Messages that inform about the state of the page or the result of an action: four types, a one-line and a detailed version, an icon and an optional dismiss button.
- [Banner (Feedback)](https://sprucecss.com/ui/feedback/banner.md): A dismissible announcement bar for the top of the page.
- [Callout (Feedback)](https://sprucecss.com/ui/feedback/callout.md): Highlighted notes for documentation and articles: info, tip, warning and danger.
- [Empty State (Feedback)](https://sprucecss.com/ui/feedback/empty-state.md): What to show when there is no data yet: explain why the area is empty and offer the next step.
- [Popover (Feedback)](https://sprucecss.com/ui/feedback/popover.md): A small floating panel anchored to a button, built on the native Popover API: no JavaScript needed to open, close or dismiss it.
- [Preloader (Feedback)](https://sprucecss.com/ui/feedback/preloader.md): Small loading indicators for pending content and buttons: a spinning circle and three bouncing bars, in three sizes and any color.
- [Progress Ring (Feedback)](https://sprucecss.com/ui/feedback/progress-ring.md): A circular progress indicator for a percentage: profile completion, quotas or course progress.
- [Skeleton (Feedback)](https://sprucecss.com/ui/feedback/skeleton.md): Placeholder shapes that show the layout of the content while it loads.
- [Toast (Feedback)](https://sprucecss.com/ui/feedback/toast.md): Short, non-blocking notifications that appear in a corner and disappear by themselves.
- [Tooltip (Feedback)](https://sprucecss.com/ui/feedback/tooltip.md): A small text label that describes a control on hover and on keyboard focus.
- [Auth Form (Form)](https://sprucecss.com/ui/form/auth.md): A sign-in form with social login, email and password, a "keep me signed in" option and links to sign up and reset the password.
- [Autocomplete (Form)](https://sprucecss.com/ui/form/autocomplete.md): A single-value autocomplete: a text input with a filtered suggestion list.
- [Color Option (Form)](https://sprucecss.com/ui/form/color-option.md): A color swatch picker for product variants: native radio buttons styled as swatches, with the color name next to the legend and sold-out colors crossed out.
- [Combobox (Form)](https://sprucecss.com/ui/form/combobox.md): A searchable multi-select: type to filter a list, pick as many options as needed, and manage the choices as removable chips.
- [Dropzone (Form)](https://sprucecss.com/ui/form/dropzone.md): A drag-and-drop file upload area with a list of the selected files.
- [File Group (Form)](https://sprucecss.com/ui/form/file-group.md): A single image upload with a preview: the empty state shows an icon and the requirements, a selected image shows a thumbnail, its file name and a remove button.
- [File List (Form)](https://sprucecss.com/ui/form/file-list.md): A list of selected files for multi-file fields (galleries, attachments): thumbnails and names, with buttons to reorder and remove each file.
- [Filter Chips (Form)](https://sprucecss.com/ui/form/filter-chips.md): Toggleable filter chips for refining a list, with a "Clear all" action.
- [Newsletter (Form)](https://sprucecss.com/ui/form/newsletter.md): A compact newsletter sign-up block with an email field and a submit button.
- [Number Group (Form)](https://sprucecss.com/ui/form/number-group.md): A quantity input with decrease and increase buttons, built on a native number input, so the keyboard, the form submission and the validation work as usual.
- [OTP Input (Form)](https://sprucecss.com/ui/form/otp-input.md): A one-time code input split into six boxes, with auto-advance, backspace navigation and paste support.
- [Password Field (Form)](https://sprucecss.com/ui/form/password-field.md): A password input with a show/hide toggle, a live strength meter and a checklist of the requirements.
- [Range Group (Form)](https://sprucecss.com/ui/form/range-group.md): A range slider with a live value display and step buttons, for choosing amounts like seats, storage or a budget.
- [Rating (Form)](https://sprucecss.com/ui/form/rating.md): A star rating input made of native radio buttons, with no JavaScript.
- [Segmented Control (Form)](https://sprucecss.com/ui/form/segmented-control.md): A segmented control (button group style toggle) for switching between a few mutually exclusive options.
- [Size Option (Form)](https://sprucecss.com/ui/form/size-option.md): A size picker for product pages: native radio buttons styled as tiles, with the current choice next to the legend and crossed-out sold-out sizes.
- [Tag Input (Form)](https://sprucecss.com/ui/form/tag-input.md): A text input that turns entries into removable tags (chips), for skills, labels or email recipients.
- [Changelog (List)](https://sprucecss.com/ui/list/changelog.md): A release history: every version with its date, a "Latest" badge and the changes grouped by type, following the Keep a Changelog conventions.
- [Comment Thread (List)](https://sprucecss.com/ui/list/comment.md): A threaded comment list with avatars, timestamps, nested replies, actions and a reply form.
- [Data Table (List)](https://sprucecss.com/ui/list/data-table.md): A sortable, filterable data table built on Spruce's `.table` styles and a few lines of vanilla JavaScript.
- [Description List (List)](https://sprucecss.com/ui/list/description-list.md): A key–value list for profiles, settings summaries or order details.
- [Notification List (List)](https://sprucecss.com/ui/list/notification.md): A notification feed with unread markers, status icons, relative times and a "Mark all as read" action.
- [Post List (List)](https://sprucecss.com/ui/list/post.md): A responsive grid of post cards for blogs, news and resource pages: one column on phones, two from the `sm` and three from the `md` breakpoint.
- [Timeline (List)](https://sprucecss.com/ui/list/timeline.md): A vertical timeline for histories, roadmaps and processes: markers on a connecting line, with a date, a title and a description for each step.
- [Avatar (Misc)](https://sprucecss.com/ui/misc/avatar.md): User avatars with sizes, initials fallback, status indicators and an overlapping group.
- [Back to Top (Misc)](https://sprucecss.com/ui/misc/back-to-top.md): A floating "Back to top" link that appears after the user scrolls down.
- [Badge (Misc)](https://sprucecss.com/ui/misc/badge.md): Small status labels, tags and counters.
- [Book Cover (Misc)](https://sprucecss.com/ui/misc/book-cover.md): A book cover drawn with CSS only: a tilted front with a spine highlight and the page edges behind it. Use it for an ebook, a guide or a lead magnet without designing an image.
- [Cookie Conset (Misc)](https://sprucecss.com/ui/misc/cookie-consent.md): A minimal cookie consent banner with equal "Accept" and "Decline" choices, a category cookie that tells your code whether it may load analytics, and an opt-out button for your privacy page.
- [Copy Button (Misc)](https://sprucecss.com/ui/misc/copy-button.md): A button that copies a value (an install command, an API key, a link) to the clipboard and confirms it.
- [Countdown (Misc)](https://sprucecss.com/ui/misc/countdown.md): A countdown timer for launches, sales and events.
- [Guarantee (Misc)](https://sprucecss.com/ui/misc/guarantee.md): A money-back guarantee next to the price or the buy button: a seal with the number of days, a title and the terms in one sentence.
- [Lang Switcher (Misc)](https://sprucecss.com/ui/misc/lang-switcher.md): A compact language switcher for headers and footers: a disclosure button with a list of links to the translated pages, each in its own language.
- [Skip Link (Misc)](https://sprucecss.com/ui/misc/skip-link.md): A "Skip to content" link that appears on keyboard focus and lets people jump over the header and navigation to the main content.
- [Theme Switcher Button (Misc)](https://sprucecss.com/ui/misc/theme-switcher-button.md): A one-button theme switcher that cycles through the system, light and dark modes, showing the icon of the current mode and saving the choice.
- [Theme Switcher Select (Misc)](https://sprucecss.com/ui/misc/theme-switcher-select.md): A theme switcher built on a native select: it lists the system, light and dark modes, shows the icon of the current one and saves the choice.
- [Breadcrumb List (Navigation)](https://sprucecss.com/ui/navigation/breadcrumb-list.md): A breadcrumb trail that shows where the current page sits in the site's hierarchy, with links to every level above it.
- [Command Palette (Navigation)](https://sprucecss.com/ui/navigation/command-palette.md): A keyboard-first command palette (like Ctrl + K in many apps) to search and run actions.
- [Context Menu (Navigation)](https://sprucecss.com/ui/navigation/context-menu.md): An accessible menu for actions: a menu button (dropdown) and a right-click context menu, with groups, icons, keyboard shortcuts, checkable items, a radio group, a submenu, and disabled and destructive items.
- [Open Search Button (Navigation)](https://sprucecss.com/ui/navigation/open-search.md): A search trigger that looks like a field: it opens your search dialog on click or with the Ctrl + K (⌘ + K on macOS) shortcut, and shows the shortcut as a hint.
- [Pagination (Navigation)](https://sprucecss.com/ui/navigation/pagination.md): Page links for long lists: previous and next, the first and last pages, the pages around the current one and ellipses for the gaps.
- [Post Navigation (Navigation)](https://sprucecss.com/ui/navigation/post.md): Previous and next links at the end of an article, with the titles of the neighboring posts, so readers can keep going.
- [Sidebar Navigation (Navigation)](https://sprucecss.com/ui/navigation/sidebar-navigation.md): A collapsible sidebar navigation for documentation or app sections, built on native details elements.
- [Site Navigation (Navigation)](https://sprucecss.com/ui/navigation/site-navigation.md): The main navigation of a site: a row of links with optional dropdowns on wide screens and a menu button with a collapsible panel on small screens.
- [Stepper (Navigation)](https://sprucecss.com/ui/navigation/stepper.md): A progress indicator for multi-step flows like sign-up or checkout.
- [Table of Contents (Navigation)](https://sprucecss.com/ui/navigation/table-of-contents.md): An "On this page" navigation that highlights the section you are reading (scroll spy).
- [Tabs (Navigation)](https://sprucecss.com/ui/navigation/tabs.md): Accessible tabs following the WAI-ARIA Tabs pattern, with automatic activation and full keyboard support.
- [Toolbar (Navigation)](https://sprucecss.com/ui/navigation/toolbar.md): An accessible toolbar that groups controls (like a text editor's formatting buttons) into a single tab stop.
- [Tree View (Navigation)](https://sprucecss.com/ui/navigation/tree-view.md): A hierarchical tree for file browsers, nested navigation or category pickers.

## Blocks

- [App (Conversion)](https://sprucecss.com/blocks/app.md): A mobile app promotion with store buttons, highlights and a phone mockup.
- [Author (Social Proof)](https://sprucecss.com/blocks/author.md): Introduce the person behind a book, a course or a product: a photo, a personal introduction, the credentials in numbers and where to follow them.
- [Before and After (Features)](https://sprucecss.com/blocks/before-after.md): Show the difference your product makes: a draggable before/after comparison next to the features that make it happen.
- [Bento (Features)](https://sprucecss.com/blocks/bento.md): A bento grid of feature tiles in different sizes, each with a small decorative visual.
- [Blog (Content)](https://sprucecss.com/blocks/blog.md): A "latest posts" block: a start-aligned heading with a "View all" link and a grid of post cards.
- [Book Preview (Content)](https://sprucecss.com/blocks/book-preview.md): A look inside a book: the cover, the key details, a form to get a free sample chapter, and the table of contents with the free chapter marked.
- [Careers (Content)](https://sprucecss.com/blocks/careers.md): A careers block with open positions and a team filter.
- [Case Study (Social Proof)](https://sprucecss.com/blocks/case-study.md): A customer story with a photo, a big quote, the author and the results in numbers.
- [Changelog (Content)](https://sprucecss.com/blocks/changelog.md): A changelog page block: the releases on the left, and the ways to follow the updates (newsletter, RSS, GitHub) in a sticky sidebar.
- [Community (Social Proof)](https://sprucecss.com/blocks/community.md): A community block: the size of the community in numbers, the channels to join (Discord, GitHub), a row of member avatars and the top contributors.
- [Comparison (Commerce)](https://sprucecss.com/blocks/comparison.md): A detailed plan comparison table with a highlighted plan, icons for included features and a call to action per plan.
- [Contact (Contact)](https://sprucecss.com/blocks/contact.md): A contact block with the contact methods and a complete form.
- [Call to Action (Conversion)](https://sprucecss.com/blocks/cta.md): A closing call to action: a colored banner with an email sign-up and social proof.
- [Events (Content)](https://sprucecss.com/blocks/events.md): An events block: the next big event featured with a live countdown and the ticket button, then the upcoming smaller events as cards.
- [FAQ (Content)](https://sprucecss.com/blocks/faq.md): A frequently asked questions block with a sticky heading, a help card and an exclusive accordion.
- [Feature Media (Features)](https://sprucecss.com/blocks/feature-media.md): Alternating image and text rows to explain features in depth.
- [Features (Features)](https://sprucecss.com/blocks/features.md): A feature grid block: a heading and a responsive grid of icon cards.
- [Gallery (Content)](https://sprucecss.com/blocks/gallery.md): A masonry-style image gallery with captions and an accessible lightbox.
- [Help Center (Contact)](https://sprucecss.com/blocks/help-center.md): The front page of a help center: a search field with popular searches, the topics with their article counts, the frequently asked questions and a way to contact support.
- [Case Study (Hero)](https://sprucecss.com/blocks/hero-case.md): The opening of a case study: a way back to the work, the client and the year, the headline, a one-paragraph summary with the result, the services, the project facts and a large cover image.
- [Centered (Hero)](https://sprucecss.com/blocks/hero-centered.md): A centered hero with an announcement pill, a big headline, two calls to action, social proof and a product screenshot in a browser frame.
- [Dashboard (Hero)](https://sprucecss.com/blocks/hero-dashboard.md): A product hero for a SaaS: the headline and the calls to action above a browser window that shows the real dashboard, built from live components instead of a screenshot.
- [Intro (Hero)](https://sprucecss.com/blocks/hero-intro.md): A typographic hero for a person: who you are, whether you're available, one big statement, and the proof in three numbers. No stock photo, the words do the work.
- [Product (Hero)](https://sprucecss.com/blocks/hero-product.md): A sales hero for a digital product: the offer, the price on the buy button, the rating and the formats, next to the product itself, a book cover on top of a video thumbnail.
- [Shop (Hero)](https://sprucecss.com/blocks/hero-shop.md): A store front hero: the campaign on a large photo with two calls to action, and two smaller tiles that lead into a category or an offer.
- [Signup (Hero)](https://sprucecss.com/blocks/hero-signup.md): A split hero with the value proposition on one side and a complete sign-up form on the other.
- [Split (Hero)](https://sprucecss.com/blocks/hero.md): A landing page hero block with an announcement badge, a fluid headline, a lead paragraph, two calls to action and a media column.
- [Integrations (Features)](https://sprucecss.com/blocks/integrations.md): An integrations directory with a live search and a grid of connectable apps.
- [Locations (Contact)](https://sprucecss.com/blocks/locations.md): Office locations with photos, addresses, opening hours, phone numbers and directions.
- [Next Project (Content)](https://sprucecss.com/blocks/next-project.md): The end of a case study: one large photo card that leads to the next project, so the reader keeps going instead of going back.
- [Offer (Commerce)](https://sprucecss.com/blocks/offer.md): The offer of a product bundle at a glance: one card per product (a book, a video course) with its key numbers, what's included and its value, then the bundle price that adds them up.
- [Post Content (Content)](https://sprucecss.com/blocks/post-content.md): The body of an article: text in a comfortable reading column, with images, videos, tables and galleries that can break out wider, and consistent vertical rhythm between them.
- [Post Heading (Content)](https://sprucecss.com/blocks/post-heading.md): The header of an article: breadcrumb, a balanced title, a lead paragraph and the meta line with the author, categories, date and reading time.
- [Pricing Tiers (Conversion)](https://sprucecss.com/blocks/pricing-tiers.md): One-time pricing for a digital product in tiers: every tier lists the same features, included or not, so the difference between them is visible at a glance. A money-back guarantee and the terms close the block.
- [Pricing (Commerce)](https://sprucecss.com/blocks/pricing.md): A complete pricing block: the heading, a monthly/yearly toggle and the pricing cards.
- [Product Grid (Commerce)](https://sprucecss.com/blocks/product-grid.md): A product listing with category filters and product cards.
- [Product Spotlight (Commerce)](https://sprucecss.com/blocks/product-spotlight.md): One product in the spotlight: a large photo, the rating, the price, the highlights, the size and stock, the buy buttons and the delivery estimate.
- [Projects (Content)](https://sprucecss.com/blocks/projects.md): A portfolio's selected work: one large row per project with the image, the client and the year, the story in one sentence, the role and the result in one number.
- [Promo Banners (Commerce)](https://sprucecss.com/blocks/promo-banners.md): Two promotional banners side by side: a gift guide, a membership, a seasonal category. Each has a short pitch, a button and a photo.
- [Quick Start (Features)](https://sprucecss.com/blocks/quick-start.md): A getting-started block for developer products: numbered steps with copyable commands, a tip and the next places to go.
- [Quote (Social Proof)](https://sprucecss.com/blocks/quote.md): One big quote from a client or a customer, with their photo, name and role. Use it to let someone else tell the result of a project.
- [Results (Social Proof)](https://sprucecss.com/blocks/results.md): The outcome of a project in numbers: every metric with its value before and after, and the change, so the reader sees the difference, not only the end result.
- [Reviews (Social Proof)](https://sprucecss.com/blocks/reviews.md): A review wall with the average rating, a rating distribution and verified review cards.
- [Sale Countdown (Commerce)](https://sprucecss.com/blocks/sale-countdown.md): A limited-time sale: a banner with a live countdown and a call to action, followed by the discounted products.
- [Services (Features)](https://sprucecss.com/blocks/services.md): A freelancer's or studio's services as a clear, numbered price list: what each service is, what you get, how long it takes and where the price starts.
- [Centered (Footer)](https://sprucecss.com/blocks/site-footer-centered.md): A compact, centered site footer: the logo, one row of links, the social profiles and the copyright line. A good fit for portfolios, agencies and small sites.
- [CTA (Footer)](https://sprucecss.com/blocks/site-footer-cta.md): A site footer that ends the page with a call-to-action band, then four link columns, the brand, the legal links and a language picker.
- [Newsletter (Footer)](https://sprucecss.com/blocks/site-footer-newsletter.md): A site footer that opens with a newsletter signup, followed by the brand and three link columns, and the legal links and social profiles at the bottom.
- [Basic (Footer)](https://sprucecss.com/blocks/site-footer.md): A site footer with the logo and a short description, link columns, a theme switcher, the copyright line and social links.
- [Announcement (Header)](https://sprucecss.com/blocks/site-header-announcement.md): A product site header with a dismissible announcement bar above it, the navigation centered between the logo and the "Log in" and "Get started" buttons.
- [Centered (Header)](https://sprucecss.com/blocks/site-header-centered.md): A site header with the logo in the center and the navigation in a centered row below it: a classic layout for magazines, blogs and editorial sites.
- [Store (Header)](https://sprucecss.com/blocks/site-header-store.md): An online store header: an announcement and utility bar, the logo, a wide product search, the account, wishlist and cart links with a counter, and the category navigation.
- [Basic (Header)](https://sprucecss.com/blocks/site-header.md): A responsive site header with the logo, the main navigation (a menu button on small screens), a contact link and a call to action. The sticky version stays at the top with a translucent background.
- [Stats (Features)](https://sprucecss.com/blocks/stats.md): A statistics band with big animated numbers. The brand modifier turns it into a full-width colored block.
- [Status (Content)](https://sprucecss.com/blocks/status.md): A public status page block: the live status of every service, the reliability numbers of the last 90 days and a signup for incident emails.
- [Steps (Features)](https://sprucecss.com/blocks/steps.md): A "how it works" block: numbered steps with icons and a dashed connector.
- [Story (Content)](https://sprucecss.com/blocks/story.md): The long-form part of a case study or a report: chapters with text, lists, a pull quote and figures, next to a chapter list that follows the reader.
- [Team (Content)](https://sprucecss.com/blocks/team.md): A team block with photo cards and an optional "we’re hiring" card.
- [Testimonials (Social Proof)](https://sprucecss.com/blocks/testimonials.md): Social proof in one block: a heading, an overall rating, testimonial cards and a logo cloud.
- [Timeline (Content)](https://sprucecss.com/blocks/timeline.md): A vertical timeline for a company history, a roadmap or release milestones.
- [Video Library (Content)](https://sprucecss.com/blocks/video-library.md): A video course at a glance: the key numbers, a module filter and a grid of lesson cards, with the free previews marked.
- [Video (Content)](https://sprucecss.com/blocks/video.md): A featured video with a poster image and highlights below.

## Pages

- [Startup Home (SaaS)](https://sprucecss.com/pages/startup-home.md): A SaaS product home page: an announcement bar, a hero with a live dashboard preview, features, how it works, integrations, stats, pricing, testimonials, the FAQ and a call-to-action footer.
- [Portfolio Home (Portfolio)](https://sprucecss.com/pages/portfolio-home.md): A freelance product designer’s portfolio: a typographic intro, selected projects with results, a services price list, client testimonials, an about section, writing and a contact form.
- [Course Home (Education)](https://sprucecss.com/pages/course-home.md): A sales landing page for a book and a video course: the offer, a free chapter, the lesson library, reviews, the author, tiered pricing with a guarantee, FAQ and a final call to action.
- [Case Study (Portfolio)](https://sprucecss.com/pages/case-study.md): A portfolio case study: the project and its facts, the results before and after, the story in chapters with a sticky navigation, a before and after comparison, the process, the client’s words and the next project.
- [Pricing Page (SaaS)](https://sprucecss.com/pages/pricing.md): A complete pricing page: an announcement bar, plans with a billing toggle, a detailed comparison table, a customer story, the FAQ and a call-to-action footer.
- [About Page (Company)](https://sprucecss.com/pages/about.md): An about page for a company: mission, numbers, story timeline, team, the open source community, behind the scenes gallery, upcoming events, open positions and office locations.
- [Shop Home (Ecommerce)](https://sprucecss.com/pages/shop-home.md): An online store front: a store header with search, the store promises, a campaign hero with category tiles, categories, bestsellers with ratings, filters and a wishlist, offers, a sale countdown, the product of the month, reviews, recently viewed products and a cart drawer.
- [E-commerce Dashboard (Dashboard)](https://sprucecss.com/pages/ecommerce-dashboard.md): A store admin dashboard in the app shell: key numbers with sparklines, revenue and channel charts, recent orders, top products, traffic sources, sales by category and stock alerts.
- [Post Page (Content)](https://sprucecss.com/pages/post.md): A blog or news article with a centered journal header, the post heading and content, a gallery and a newsletter footer.
- [Auth Page (Application)](https://sprucecss.com/pages/auth.md): A two-column authentication screen for login, registration or password reset.