# @volverjs/style

> A CSS/SCSS design system: BEM components (`.vv-button`, `.vv-button__label`, `.vv-button--primary`), Tailwind-like utilities (`p-md`, `flex`, `grid-cols-3`), design tokens as CSS custom properties, and an SCSS layer that generates all of it from maps. Every selector is wrapped in `:where()`, so it has zero specificity and any CSS you write wins without `!important`.

The vocabulary looks like Tailwind and differs from it in many places, and a class that does not exist fails silently. Read the reference before writing a class name: it is checked against the compiled CSS, while the pages of the styleguide are built around live examples.

## Reference

- [Overview](https://volverjs.github.io/style/skills/volverjs-style/SKILL.md): workflow, where the vocabulary differs from Tailwind, layout recipes, the essentials of components and tokens
- [Utilities](https://volverjs.github.io/style/skills/volverjs-style/references/utilities.md): every utility class, its values and its breakpoint prefixes
- [Components](https://volverjs.github.io/style/skills/volverjs-style/references/components.md): markup, elements, modifiers and states of every component
- [Tokens](https://volverjs.github.io/style/skills/volverjs-style/references/tokens.md): custom properties, overrides written in CSS, dark theme
- [SCSS](https://volverjs.github.io/style/skills/volverjs-style/references/scss.md): import paths, configuration, extending a component map, mixins, layers

## Get started

- [Installation](https://volverjs.github.io/style/get-started/installation): Volver Style is a JavaScript agnostic responsive CSS components and utility library. There are several ways you can use it in your project: package managers, CDN or manual install.
- [Customization](https://volverjs.github.io/style/get-started/customization): Volver Style is made to be highly configurable and customizable, with CSS custom properties or SCSS maps.
- [Configuration](https://volverjs.github.io/style/get-started/configuration): Specificity, custom properties and components names can be configured as you want.
- [Theming](https://volverjs.github.io/style/get-started/theming): Volver Style offers color themes for components and utilities based on user color scheme preferences or design requirements.
- [Preflight](https://volverjs.github.io/style/get-started/preflight): Style semantic native HTML tags and keep the markup simple. The perfect companion for Markdown generated templates, WYSIWYG or rich text editors.
- [Presets](https://volverjs.github.io/style/get-started/presets): Opt-in SCSS modules that change the look of a family of components at once, before the library emits anything.

## Settings

- [Breakpoints](https://volverjs.github.io/style/settings/breakpoints): Volver Style includes a default breakpoint system that can be used to style your site. You can also create your own breakpoint system.
- [Colors](https://volverjs.github.io/style/settings/colors): Volver Style includes a default color palette that can be used to style your site. You can also create your own color palette.
- [Spacing](https://volverjs.github.io/style/settings/spacing): Volver Style uses a spacing scale to control the padding, margin and position of elements.

## Components

- [Accordion](https://volverjs.github.io/style/components/accordion): Accordion is an interactive widget that the user can open and close on demand.
- [Alert](https://volverjs.github.io/style/components/alert): Alert is a message that communicates a state affecting a system, a feature or a page.
- [Avatar](https://volverjs.github.io/style/components/avatar): Avatar is the picture, the initials or the icon that stands for a person or an entity.
- [Badge](https://volverjs.github.io/style/components/badge): Badge is a small status indicator for another element.
- [Breadcrumbs](https://volverjs.github.io/style/components/breadcrumbs): Breadcrumbs is the trail of links that leads to the current page, with the separators drawn by CSS.
- [Button](https://volverjs.github.io/style/components/button): Button is an interactive element that runs an action, such as submitting a form or opening a dialog.
- [Calendar](https://volverjs.github.io/style/components/calendar): Calendar is a month to pick a date or a range from.
- [Card](https://volverjs.github.io/style/components/card): Card is a flexible container for a header, content, a picture and a footer.
- [Checkbox](https://volverjs.github.io/style/components/checkbox): Checkbox is a choice that can be on or off, alone or among several options.
- [Command](https://volverjs.github.io/style/components/command): Command is a palette that searches the commands of an application and runs one.
- [Dialog](https://volverjs.github.io/style/components/dialog): Dialog is a container to display content in an overlay window.
- [Dropdown](https://volverjs.github.io/style/components/dropdown): Dropdown is a floating list of options to choose from or of actions to run.
- [Empty](https://volverjs.github.io/style/components/empty): Empty is what a list, a table or a page shows in place of its content, with an optional way out.
- [Field](https://volverjs.github.io/style/components/field): Field is the shell of a form field around a control the library does not draw, with the label, the box, the hint and the states of the other fields.
- [Input File](https://volverjs.github.io/style/components/input-file): Input File is a field to pick files, with an optional drop area, preview and file list.
- [Input OTP](https://volverjs.github.io/style/components/input-otp): Input OTP takes a one-time code one character per slot.
- [Input Range](https://volverjs.github.io/style/components/input-range): Input Range is a slider that picks a number between known bounds, with the value shown next to it.
- [Input Text](https://volverjs.github.io/style/components/input-text): Input Text is a single-line text field, with a label, a hint and the states of a form.
- [Item](https://volverjs.github.io/style/components/item): Item is a row of a list, something to choose, to open or to act on, and Item Group is the list that holds the rows.
- [Kbd](https://volverjs.github.io/style/components/kbd): Kbd is a key of the keyboard, to name a shortcut.
- [Navigation](https://volverjs.github.io/style/components/navigation): Navigation is a set of links that allow users to navigate between pages or sections of a website.
- [Pagination](https://volverjs.github.io/style/components/pagination): Pagination is the control that moves between the pages of a list or a table.
- [Popover](https://volverjs.github.io/style/components/popover): Popover is a floating panel for a short piece of content or a small form, on the Popover API.
- [Progress](https://volverjs.github.io/style/components/progress): Progress is a bar that shows how much of a task is done, or that something is loading when the amount is unknown.
- [Prose](https://volverjs.github.io/style/components/prose): Prose is a container for rich text that arrives as plain tags, such as rendered markdown or the output of an editor.
- [Radio](https://volverjs.github.io/style/components/radio): Radio is a choice of one option from a set.
- [Select](https://volverjs.github.io/style/components/select): Select is used to select an item from a list of options.
- [Separator](https://volverjs.github.io/style/components/separator): Separator is a hairline between two groups of content, with an optional label on it.
- [Sidebar](https://volverjs.github.io/style/components/sidebar): Sidebar is the side column of an application, with a header, a navigation that scrolls and a footer.
- [Skeleton](https://volverjs.github.io/style/components/skeleton): Skeleton is a placeholder that stands in for content still loading.
- [Spinner](https://volverjs.github.io/style/components/spinner): Spinner is a ring that turns while something is loading.
- [Table](https://volverjs.github.io/style/components/table): Table is a grid of data in rows and columns.
- [Textarea](https://volverjs.github.io/style/components/textarea): Textarea is a multi-line text input element.
- [Tooltip](https://volverjs.github.io/style/components/tooltip): Tooltip is a floating label that briefly explains the element it belongs to.

## AI

- [Attachment](https://volverjs.github.io/style/components/attachment): Attachment is a file or an image attached to a message or waiting in a composer.
- [Bubble](https://volverjs.github.io/style/components/bubble): Bubble is the surface of a message in a conversation.
- [Marker](https://volverjs.github.io/style/components/marker): Marker is a note inside a conversation that nobody says, such as an operator joining or a tool that ran.
- [Message](https://volverjs.github.io/style/components/message): Message is a row of a conversation, with who says it, what is said and what can be done with it.
- [Message Scroller](https://volverjs.github.io/style/components/message-scroller): Message Scroller is the scrolling column of a conversation.
- [Questionnaire](https://volverjs.github.io/style/components/questionnaire): Questionnaire asks questions one step at a time, in a conversation or a panel.

## Utilities: Layout

- [Aspect Ratio](https://volverjs.github.io/style/utilities/layout/aspect-ratio): Utilities for controlling the aspect ratio of an element.
- [Break After](https://volverjs.github.io/style/utilities/layout/break-after): Utilities for controlling how a column or page should break after an element.
- [Break Before](https://volverjs.github.io/style/utilities/layout/break-before): Utilities for controlling how a column or page should break before an element.
- [Break Inside](https://volverjs.github.io/style/utilities/layout/break-inside): Utilities for controlling how a column or page should break within an element.
- [Columns](https://volverjs.github.io/style/utilities/layout/columns): Utilities for controlling the number of columns within an element.
- [Container](https://volverjs.github.io/style/utilities/layout/container): Utilities for fixing an element's width to the current breakpoint.
- [Display](https://volverjs.github.io/style/utilities/layout/display): Utilities for controlling the display box type of an element.
- [Object Fit](https://volverjs.github.io/style/utilities/layout/object-fit): Utilities for controlling how a replaced element's content should be resized.
- [Object Position](https://volverjs.github.io/style/utilities/layout/object-position): Utilities for controlling how a replaced element's content should be positioned within its container.
- [Overflow](https://volverjs.github.io/style/utilities/layout/overflow): Utilities for controlling how an element handles content that is too large for the container.
- [Position](https://volverjs.github.io/style/utilities/layout/position): Utilities for controlling how an element is positioned in the DOM.
- [Scrollbar](https://volverjs.github.io/style/utilities/layout/scrollbar): Utilities for the width and the color of the native scrollbar of a scrolling element.
- [Top / Right / Bottom / Left](https://volverjs.github.io/style/utilities/layout/top-right-bottom-left): Utilities for controlling the placement of positioned elements.
- [Visibility](https://volverjs.github.io/style/utilities/layout/visibility): Utilities for controlling the visibility of an element.
- [Z-Index](https://volverjs.github.io/style/utilities/layout/z-index): Utilities for controlling the stack order of an element.

## Utilities: Flexbox & Grid

- [Align Content](https://volverjs.github.io/style/utilities/flex-grid/align-content): Utilities for controlling how rows are positioned in multi-row flex and grid containers.
- [Align Items](https://volverjs.github.io/style/utilities/flex-grid/align-items): Utilities for controlling how flex and grid items are positioned along a container's cross axis.
- [Align Self](https://volverjs.github.io/style/utilities/flex-grid/align-self): Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.
- [Flex Direction](https://volverjs.github.io/style/utilities/flex-grid/flex-direction): Utilities for controlling the direction of flex items.
- [Flex Grow](https://volverjs.github.io/style/utilities/flex-grid/flex-grow): Utilities for controlling how flex items grow.
- [Flex Shrink](https://volverjs.github.io/style/utilities/flex-grid/flex-shrink): Utilities for controlling how flex items shrink.
- [Flex Wrap](https://volverjs.github.io/style/utilities/flex-grid/flex-wrap): Utilities for controlling how flex items wrap.
- [Flex](https://volverjs.github.io/style/utilities/flex-grid/flex): Utilities for controlling how flex items both grow and shrink.
- [Gap](https://volverjs.github.io/style/utilities/flex-grid/gap): Utilities for controlling gutters between grid and flexbox items.
- [Grid Auto Columns](https://volverjs.github.io/style/utilities/flex-grid/grid-auto-columns): Utilities for controlling the size of implicitly-created grid columns.
- [Grid Auto Flow](https://volverjs.github.io/style/utilities/flex-grid/grid-auto-flow): Utilities for controlling how elements in a grid are auto-placed.
- [Grid Auto Rows](https://volverjs.github.io/style/utilities/flex-grid/grid-auto-rows): Utilities for controlling the size of implicitly-created grid rows.
- [Grid Column Start / End](https://volverjs.github.io/style/utilities/flex-grid/grid-column-start-end): Utilities for controlling how elements are sized and placed across grid columns.
- [Grid Row Start / End](https://volverjs.github.io/style/utilities/flex-grid/grid-row-start-end): Utilities for controlling how elements are sized and placed across grid rows.
- [Grid Template Columns](https://volverjs.github.io/style/utilities/flex-grid/grid-template-columns): Utilities for specifying the columns in a grid layout.
- [Grid Template Rows](https://volverjs.github.io/style/utilities/flex-grid/grid-template-rows): Utilities for specifying the rows in a grid layout.
- [Justify Content](https://volverjs.github.io/style/utilities/flex-grid/justify-content): Utilities for controlling how flex and grid items are positioned along a container's main axis.
- [Justify Items](https://volverjs.github.io/style/utilities/flex-grid/justify-items): Utilities for controlling how grid items are aligned along their inline axis.
- [Justify Self](https://volverjs.github.io/style/utilities/flex-grid/justify-self): Utilities for controlling how an individual grid item is aligned along its inline axis.
- [Order](https://volverjs.github.io/style/utilities/flex-grid/order): Utilities for controlling the order of flex and grid items.

## Utilities: Spacing

- [Margin](https://volverjs.github.io/style/utilities/spacing/margin): Utilities for controlling an element's margin.
- [Padding](https://volverjs.github.io/style/utilities/spacing/padding): Utilities for controlling an element's padding.

## Utilities: Sizing

- [Height](https://volverjs.github.io/style/utilities/sizing/height): Utilities for setting the height of an element.
- [Max Height](https://volverjs.github.io/style/utilities/sizing/max-height): Utilities for setting the maximum height of an element.
- [Max Width](https://volverjs.github.io/style/utilities/sizing/max-width): Utilities for setting the maximum width of an element.
- [Min Height](https://volverjs.github.io/style/utilities/sizing/min-height): Utilities for setting the minimum height of an element.
- [Min Width](https://volverjs.github.io/style/utilities/sizing/min-width): Utilities for setting the minimum width of an element.
- [Width](https://volverjs.github.io/style/utilities/sizing/width): Utilities for setting the width of an element.

## Utilities: Typography

- [Font Family](https://volverjs.github.io/style/utilities/typography/font-family): Utilities for controlling the font family of an element.
- [Font Size](https://volverjs.github.io/style/utilities/typography/font-size): Utilities for controlling the font size of an element.
- [Font Smoothing](https://volverjs.github.io/style/utilities/typography/font-smoothing): Utilities for controlling the font smoothing of an element.
- [Font Style](https://volverjs.github.io/style/utilities/typography/font-style): Utilities for controlling the style of text.
- [Font Variant Numeric](https://volverjs.github.io/style/utilities/typography/font-variant-numeric): Utilities for controlling the variant of numbers.
- [Font Weight](https://volverjs.github.io/style/utilities/typography/font-weight): Utilities for controlling the font weight of an element.
- [Letter Spacing](https://volverjs.github.io/style/utilities/typography/letter-spacing): Utilities for controlling the tracking (letter spacing) of an element.
- [Line Height](https://volverjs.github.io/style/utilities/typography/line-height): Utilities for controlling the leading (line height) of an element.
- [List Style Position](https://volverjs.github.io/style/utilities/typography/list-style-position): Utilities for controlling the position of bullets/numbers in lists.
- [List Style Type](https://volverjs.github.io/style/utilities/typography/list-style-type): Utilities for controlling the bullet/number style of a list.
- [Text Align](https://volverjs.github.io/style/utilities/typography/text-align): Utilities for controlling the alignment of text.
- [Text Color](https://volverjs.github.io/style/utilities/typography/text-color): Utilities for controlling the text color of an element.
- [Text Decoration Color](https://volverjs.github.io/style/utilities/typography/text-decoration-color): Utilities for controlling the color of text decorations.
- [Text Decoration Line](https://volverjs.github.io/style/utilities/typography/text-decoration-line): Utilities for controlling the decoration of text.
- [Text Decoration Style](https://volverjs.github.io/style/utilities/typography/text-decoration-style): Utilities for controlling the style of text decorations.
- [Text Decoration Thickness](https://volverjs.github.io/style/utilities/typography/text-decoration-thickness): Utilities for controlling the thickness of text decorations.
- [Text Overflow](https://volverjs.github.io/style/utilities/typography/text-overflow): Utilities for controlling text overflow in an element.
- [Text Transform](https://volverjs.github.io/style/utilities/typography/text-transform): Utilities for controlling the transformation of text.
- [Text Underline Offset](https://volverjs.github.io/style/utilities/typography/text-underline-offset): Utilities for controlling the offset of a text underline.
- [Text Wrap](https://volverjs.github.io/style/utilities/typography/text-wrap): Utilities for controlling how the lines of a text are balanced when they wrap.
- [Vertical Align](https://volverjs.github.io/style/utilities/typography/vertical-align): Utilities for controlling the vertical alignment of an inline or table-cell box.
- [Whitespace](https://volverjs.github.io/style/utilities/typography/whitespace): Utilities for controlling an element's white-space property.
- [Word Break](https://volverjs.github.io/style/utilities/typography/word-break): Utilities for controlling word breaks in an element.

## Utilities: Backgrounds

- [Background Attachment](https://volverjs.github.io/style/utilities/backgrounds/background-attachment): Utilities for controlling how a background image behaves when scrolling.
- [Background Clip](https://volverjs.github.io/style/utilities/backgrounds/background-clip): Utilities for controlling the bounding box of an element's background.
- [Background Color](https://volverjs.github.io/style/utilities/backgrounds/background-color): Utilities for controlling an element's background color.
- [Background Image](https://volverjs.github.io/style/utilities/backgrounds/background-image): Utilities for controlling an element's background image.
- [Background Origin](https://volverjs.github.io/style/utilities/backgrounds/background-origin): Utilities for controlling how an element's background is positioned relative to borders, padding, and content.
- [Background Position](https://volverjs.github.io/style/utilities/backgrounds/background-position): Utilities for controlling the position of an element's background image.
- [Background Repeat](https://volverjs.github.io/style/utilities/backgrounds/background-repeat): Utilities for controlling the repetition of an element's background image.
- [Background Size](https://volverjs.github.io/style/utilities/backgrounds/background-size): Utilities for controlling the background size of an element's background image.

## Utilities: Borders

- [Border Color](https://volverjs.github.io/style/utilities/borders/border-color): Utilities for controlling the color of an element's borders.
- [Border Radius](https://volverjs.github.io/style/utilities/borders/border-radius): Utilities for controlling the border radius of an element.
- [Border Style](https://volverjs.github.io/style/utilities/borders/border-style): Utilities for controlling the style of an element's borders.
- [Border Width](https://volverjs.github.io/style/utilities/borders/border-width): Utilities for controlling the width of an element's borders.

## Utilities: Effects

- [Background Blend Mode](https://volverjs.github.io/style/utilities/effects/background-blend-mode): Utilities for controlling how an element's background image should blend with its background color.
- [Box Shadow](https://volverjs.github.io/style/utilities/effects/box-shadow): Utilities for controlling the box shadow of an element.
- [Mix Blend Mode](https://volverjs.github.io/style/utilities/effects/mix-blend-mode): Utilities for controlling how an element's content blends with the content behind it.
- [Opacity](https://volverjs.github.io/style/utilities/effects/opacity): Utilities for controlling the opacity of an element.

## Utilities: Filters

- [Backdrop Blur](https://volverjs.github.io/style/utilities/filters/backdrop-blur): Utilities for blurring what is behind an element.
- [Blur](https://volverjs.github.io/style/utilities/filters/blur): Utilities for controlling the blur of an element.
- [Brightness](https://volverjs.github.io/style/utilities/filters/brightness): Utilities for controlling the brightness of an element.
- [Contrast](https://volverjs.github.io/style/utilities/filters/contrast): Utilities for applying contrast filters to an element.
- [Saturation](https://volverjs.github.io/style/utilities/filters/saturation): Utilities for controlling the saturation of an element.

## Utilities: Tables

- [Border Collapse](https://volverjs.github.io/style/utilities/tables/border-collapse): Utilities for controlling whether table borders should collapse or be separated.
- [Table Layout](https://volverjs.github.io/style/utilities/tables/table-layout): Utilities for controlling the table layout algorithm.

## Utilities: Transitions & Animation

- [Animation](https://volverjs.github.io/style/utilities/transitions/animation): Custom properties for animating elements with CSS animations.
- [Transition Delay](https://volverjs.github.io/style/utilities/transitions/transition-delay): Utilities for controlling the delay of CSS transitions.
- [Transition Duration](https://volverjs.github.io/style/utilities/transitions/transition-duration): Utilities for controlling the duration of CSS transitions.
- [Transition Property](https://volverjs.github.io/style/utilities/transitions/transition-property): Utilities for controlling which CSS properties transition.
- [Transition Timing Function](https://volverjs.github.io/style/utilities/transitions/transition-timing-function): Utilities for controlling the easing of CSS transitions.
- [Transition](https://volverjs.github.io/style/utilities/transitions/transition): Utilities for applying a CSS transition.

## Utilities: Transforms

- [Rotate](https://volverjs.github.io/style/utilities/transforms/rotate): Utilities for rotating elements with transform.
- [Scale](https://volverjs.github.io/style/utilities/transforms/scale): Utilities for scaling elements with the scale property.
- [Transform Origin](https://volverjs.github.io/style/utilities/transforms/transform-origin): Utilities for specifying the origin for an element's transformations.
- [Translate](https://volverjs.github.io/style/utilities/transforms/translate): Utilities for translating elements with the translate property.

## Utilities: Interactivity

- [Cursor](https://volverjs.github.io/style/utilities/interactivity/cursor): Utilities for controlling the cursor shown over an element.
- [Pointer Events](https://volverjs.github.io/style/utilities/interactivity/pointer-events): Utilities for controlling whether an element responds to the pointer.
- [User Select](https://volverjs.github.io/style/utilities/interactivity/user-select): Utilities for controlling whether the user can select the text of an element.

## Optional

- [Full reference](https://volverjs.github.io/style/llms-full.txt): the overview and the four references in one file