# Pico Reforged

> Minimal CSS for semantic HTML, rewritten in plain modern CSS. npm package @rusticstack/pico-reforged. Not the official Pico CSS.

Full text: https://pico.rusticstack.com/llms-full.txt
Skill: https://pico.rusticstack.com/skill/SKILL.md

# Docs

- Getting started
  - [Introduction](https://pico.rusticstack.com/md/getting-started/introduction.md): What Pico Reforged is, why it exists, and where it comes from.
  - [Quick start](https://pico.rusticstack.com/md/getting-started/quick-start.md): Add one stylesheet to a page and get a styled document.
  - [Installation](https://pico.rusticstack.com/md/getting-started/installation.md): Use Pico Reforged from a CDN, from npm, through the Vite or PostCSS integration, or as a downloaded file.
  - [Usage](https://pico.rusticstack.com/md/getting-started/usage.md): Choose between the class, class-less, conditional and fluid builds, and force light or dark.
  - [Class-less version](https://pico.rusticstack.com/md/getting-started/class-less-version.md): The same styles with every class selector removed, for content pages and Markdown output.
  - [Version picker](https://pico.rusticstack.com/md/getting-started/version-picker.md): All 238 CDN files of the Pico CSS v2.1.1 set, how their names combine, and the extras on top.
  - [Browser support](https://pico.rusticstack.com/md/getting-started/browser-support.md): Which browsers are supported, and what newer features do where they are missing.
  - [Coming from Pico CSS](https://pico.rusticstack.com/md/getting-started/coming-from-pico-css.md): What carries over from Pico CSS v2.1.1, what changed, and where the full migration guide is.
- Customization
  - [CSS variables](https://pico.rusticstack.com/md/customization/css-variables.md): Every color, size and spacing is a --pico-* custom property. Override one in your own CSS, on the page or on a single element.
  - [Color schemes](https://pico.rusticstack.com/md/customization/color-schemes.md): Light and dark mode follow the system by default. Force a scheme with data-theme on the page or on any element.
  - [Themes](https://pico.rusticstack.com/md/customization/themes.md): Pick one of 20 color themes, build one from a single color with the CLI or the @pico config, or derive one at run time with relative color syntax.
  - [Cascade layers and overriding](https://pico.rusticstack.com/md/customization/cascade-layers.md): Every Pico Reforged rule sits in a cascade layer, so your own CSS wins without !important or heavier selectors.
  - [Building a custom bundle](https://pico.rusticstack.com/md/customization/custom-bundle.md): Compile your own Pico Reforged stylesheet with the CLI, a config file or the compile() function.
  - [Sass users](https://pico.rusticstack.com/md/customization/sass-users.md): Pico CSS v2.1.1 was customized with Sass variables. In Pico Reforged each one is a CSS variable or a compiler option.
- Layout
  - [Container](https://pico.rusticstack.com/md/layout/container.md): Center your content with .container or .container-fluid and set the maximum width per breakpoint.
  - [Landmarks and section](https://pico.rusticstack.com/md/layout/landmarks-and-section.md): Vertical spacing for body > header, main and footer, and for section.
  - [Grid](https://pico.rusticstack.com/md/layout/grid.md): A minimal auto-layout grid that stacks on small screens.
  - [Overflow auto](https://pico.rusticstack.com/md/layout/overflow-auto.md): Let wide content such as tables scroll inside its box.
  - [Semantic container](https://pico.rusticstack.com/md/layout/semantic-container.md): Center body > header, main and footer without any class.
  - [Responsive and fluid](https://pico.rusticstack.com/md/layout/responsive.md): Breakpoints, root font size, optional responsive spacings and the fluid build.
- Content
  - [Typography](https://pico.rusticstack.com/md/content/typography.md): Headings, paragraphs, lists, quotes and inline text styled by element, on a 16px root that takes one step up on very wide screens.
  - [Link](https://pico.rusticstack.com/md/content/link.md): Underlined links in the primary color, with secondary and contrast variants and a marker for the current page.
  - [Button](https://pico.rusticstack.com/md/content/button.md): Buttons from button, input and role="button" elements, with secondary, contrast and outline variants, loading and disabled states.
  - [Table](https://pico.rusticstack.com/md/content/table.md): Full width tables with row borders, an optional striped style and a wrapper for horizontal scrolling.
  - [Code](https://pico.rusticstack.com/md/content/code.md): Inline code, code blocks, keyboard keys and program output in the monospace stack.
  - [Figure](https://pico.rusticstack.com/md/content/figure.md): Figures with a muted caption, for images, diagrams and other self-contained content.
  - [Embedded content](https://pico.rusticstack.com/md/content/embedded-content.md): Images, SVG, audio, video, canvas and iframes with small defaults for sizing and alignment.
  - [Misc](https://pico.rusticstack.com/md/content/misc.md): Horizontal rules, mark, ins and del, abbr and kbd.
- Forms
  - [Forms overview](https://pico.rusticstack.com/md/forms/overview.md): Inputs, selects, textareas, checkboxes, radios and switches are styled by element and by type, with validation states driven by aria-invalid.
  - [Input](https://pico.rusticstack.com/md/forms/input.md): Text-like inputs are full width and styled by type, with focus rings and helper text.
  - [Textarea](https://pico.rusticstack.com/md/forms/textarea.md): A full width multi-line field that resizes vertically and shares the input styles.
  - [Select](https://pico.rusticstack.com/md/forms/select.md): Native select with a drawn chevron, plus multiple and size variants.
  - [Checkboxes](https://pico.rusticstack.com/md/forms/checkboxes.md): Checkboxes drawn with CSS, with checked, indeterminate and validation states.
  - [Radios](https://pico.rusticstack.com/md/forms/radios.md): Radio buttons drawn with CSS, for choosing one option from a set.
  - [Switch](https://pico.rusticstack.com/md/forms/switch.md): A checkbox with role="switch" drawn as a toggle.
  - [Range](https://pico.rusticstack.com/md/forms/range.md): A slider with a styled track and thumb in Chromium, WebKit and Firefox.
  - [Color](https://pico.rusticstack.com/md/forms/color.md): The native color picker with a rounded swatch that fits the control height.
  - [Date and time](https://pico.rusticstack.com/md/forms/date-and-time.md): Date, datetime-local, month, time and week inputs with a drawn picker icon.
  - [File](https://pico.rusticstack.com/md/forms/file.md): The native file input with a styled selector button.
  - [Search](https://pico.rusticstack.com/md/forms/search.md): A pill shaped search input with a drawn icon, and role="search" for a search form.
  - [Validation states](https://pico.rusticstack.com/md/forms/validation.md): Style valid and invalid controls with aria-invalid, and pair them with helper text.
  - [Groups](https://pico.rusticstack.com/md/forms/groups.md): Join inputs, selects and buttons into one bar with role="group", or a search form with role="search".
- Components
  - [Accordion](https://pico.rusticstack.com/md/components/accordion.md): Collapsible sections from the native details and summary elements, with an animated height where supported.
  - [Card](https://pico.rusticstack.com/md/components/card.md): A boxed surface from the article element, with an optional header and footer.
  - [Dropdown](https://pico.rusticstack.com/md/components/dropdown.md): A menu from details.dropdown, or from the native popover attribute with anchor positioning.
  - [Group](https://pico.rusticstack.com/md/components/group.md): Join inputs, selects and buttons into one control with role group, or build a search bar with role search.
  - [Loading](https://pico.rusticstack.com/md/components/loading.md): Show a spinner on any element with aria-busy="true".
  - [Modal](https://pico.rusticstack.com/md/components/modal.md): A dialog element styled as a modal, with open and close transitions from plain showModal() and close().
  - [Nav](https://pico.rusticstack.com/md/components/nav.md): Horizontal navigation from nav and lists, with a brand side, buttons, form controls, a breadcrumb and a vertical sidebar.
  - [Progress](https://pico.rusticstack.com/md/components/progress.md): A slim progress bar from the progress element, with a sliding indeterminate state.
  - [Tooltip](https://pico.rusticstack.com/md/components/tooltip.md): A tooltip from the data-tooltip attribute, or from a popover with hint for browsers that support it.
  - [Popover patterns](https://pico.rusticstack.com/md/components/popover.md): Menus, hints and cards built on the native popover attribute and placed with CSS anchor positioning.
- Extras
  - [Extras overview](https://pico.rusticstack.com/md/extras/overview.md): Opt-in components for apps and dashboards, kept out of the default files and loaded one by one or all together.
  - [Tabs](https://pico.rusticstack.com/md/extras/tabs.md): Tabs from the WAI-ARIA tabs pattern, styled by role with no class, plus a version that needs no script.
  - [Alert](https://pico.rusticstack.com/md/extras/alert.md): Inline messages from role="status" and role="alert" elements with a data-variant, optionally dismissible.
  - [Toast](https://pico.rusticstack.com/md/extras/toast.md): Corner notifications from a popover stack, with one article per toast and a short script to add and remove them.
  - [Badge](https://pico.rusticstack.com/md/extras/badge.md): Inline labels, counters and status dots from one data-badge attribute.
  - [Avatar](https://pico.rusticstack.com/md/extras/avatar.md): User images and initials in a circle, with sizes, a status dot and overlapping groups.
  - [Skeleton](https://pico.rusticstack.com/md/extras/skeleton.md): Placeholder lines, avatars and blocks shown while content loads, driven by aria-busy.
  - [App shell](https://pico.rusticstack.com/md/extras/app-shell.md): A page layout for apps with a sticky header, a sidebar that becomes a drawer on small screens, a main area and a footer.
  - [Data table](https://pico.rusticstack.com/md/extras/data-table.md): Tables with sortable headers, selectable rows, numeric columns, compact density and a sticky header in a scroll region.
  - [Pagination](https://pico.rusticstack.com/md/extras/pagination.md): Page links from a nav with an ordered list, with a current page, disabled edges and no script.
  - [Stepper](https://pico.rusticstack.com/md/extras/stepper.md): A progress list for multi-step flows, horizontal, vertical or responsive, with the current step in aria-current.
  - [Empty state](https://pico.rusticstack.com/md/extras/empty-state.md): A block shown in place of a list, table or result set with no rows, with an icon, a message and actions.
- Integrations
  - [Integrations overview](https://pico.rusticstack.com/md/integrations/overview.md): Import the package once in your CSS and get a stylesheet that holds only what your app uses.
  - [Vite](https://pico.rusticstack.com/md/integrations/vite.md): Add the plugin to vite.config and import the package from a stylesheet. Astro, SvelteKit, Nuxt and React Router take the same plugin.
  - [Next.js and PostCSS](https://pico.rusticstack.com/md/integrations/nextjs.md): Add the PostCSS plugin to postcss.config.mjs and import the package from globals.css.
  - [Static sites and the purge CLI](https://pico.rusticstack.com/md/integrations/static-sites.md): Use the CDN, build a custom stylesheet with the CLI, or purge the output folder of Hugo, Jekyll, Eleventy and Bun.
  - [Configuration reference](https://pico.rusticstack.com/md/integrations/configuration.md): Every @pico property, every @source rule and the safelist syntax.
  - [Purge modes](https://pico.rusticstack.com/md/integrations/purge-modes.md): Safe purge is the default. Aggressive purge saves more and needs a check. Both with measured numbers.
  - [htmx and Alpine](https://pico.rusticstack.com/md/integrations/htmx-alpine.md): Keep the right styles when markup arrives from the server or is toggled by a small script.
  - [Troubleshooting](https://pico.rusticstack.com/md/integrations/troubleshooting.md): Fixes for missing styles in production, empty scans, plugin order and the other common integration problems.
- AI
  - [Using Pico Reforged with AI agents](https://pico.rusticstack.com/md/ai/overview.md): What Pico Reforged ships for coding agents, and which piece to use for which job.
  - [llms.txt and llms-full.txt](https://pico.rusticstack.com/md/ai/llms-txt.md): A docs index and the full docs text for assistants, plus a Markdown copy of every page.
  - [The agent skill](https://pico.rusticstack.com/md/ai/skill.md): A skill that teaches coding agents the Pico Reforged rules, and how to install it in Claude Code or another agent.
  - [AGENTS.md](https://pico.rusticstack.com/md/ai/agents-md.md): The file for people and agents who work on the Pico Reforged repository itself.
  - [components.json and tokens.json](https://pico.rusticstack.com/md/ai/data-files.md): The component manifest and the design tokens as data, with their formats.
  - [Prompting tips](https://pico.rusticstack.com/md/ai/prompting.md): How to ask an assistant for pages that use semantic HTML and Pico Reforged correctly.
- Migration
  - [Migration guide](https://pico.rusticstack.com/md/migration/from-pico-css.md): Move a page or a project from Pico CSS v2.1.1 to Pico Reforged.