# Yumma CSS

> Yumma CSS is a utility CSS framework derived directly from CSS property and value initials.
> Every class name maps to exactly one CSS property. If you know CSS, you already know Yumma CSS.
> Prefix = initials of the CSS property (e.g. `jc` for `justify-content`).
> Suffix = initials of the value (e.g. `sb` for `space-between`).
> So `jc-sb` means `justify-content: space-between`.

Check your work: `npx @yummacss/canon` reports every class Yumma CSS does not
recognize, with a suggestion when a close match exists. It validates against the
generator itself, so it is authoritative on whether a class exists. Prefer it over
guessing.

Docs: https://yummacss.com/docs
UI Components: https://yummacss.com/ui
Full context: https://yummacss.com/llms-full.txt

## Get Started

- [Installation](https://yummacss.com/docs/installation.md): Install Yumma CSS using a bundler plugin, the CLI, or CDN.
- [Configuration](https://yummacss.com/docs/configuration.md): Configure Yumma CSS for your project.

## Customization

- [Colors](https://yummacss.com/docs/colors.md): Reference for all built-in color families & shades.
- [Theming](https://yummacss.com/docs/theming.md): Name colors for their role so a redesign stays one config edit.
- [Dark Mode](https://yummacss.com/docs/dark-mode.md): Opt into dark mode per color with light/dark pairs.

## Handbook

- [Normalization](https://yummacss.com/docs/normalize.md): Normalize CSS styles across browsers.
- [Negative Values](https://yummacss.com/docs/negative-values.md): Apply negative values with the double-dash syntax, which toggles the sign.

## Variants

- [Media Queries](https://yummacss.com/docs/media-queries.md): Use media queries to create responsive layouts.
- [Pseudo Classes](https://yummacss.com/docs/pseudo-classes.md): Use pseudo classes to style elements.
- [Pseudo Elements](https://yummacss.com/docs/pseudo-elements.md): Use pseudo elements to style elements.
- [Nested Variants](https://yummacss.com/docs/nested-variants.md): Stack variants to apply a utility under more than one condition.

## Background

- [Background Attachment](https://yummacss.com/docs/background-attachment.md): Set the scroll behavior for background images.
- [Background Clip](https://yummacss.com/docs/background-clip.md): Set the background image extent within an element.
- [Background Origin](https://yummacss.com/docs/background-origin.md): Set the background positioning area relative to borders, padding & content.
- [Background Position](https://yummacss.com/docs/background-position.md): Set the background image position within an element.
- [Background Repeat](https://yummacss.com/docs/background-repeat.md): Set the repeat behavior for background images.
- [Background Size](https://yummacss.com/docs/background-size.md): Set the background image size within an element.

## Border & Outline

### Border

- [Border Collapse](https://yummacss.com/docs/border-collapse.md): Set the collapsing behavior for table borders.
- [Border Spacing](https://yummacss.com/docs/border-spacing.md): Set the distance between table borders.
- [Border Style](https://yummacss.com/docs/border-style.md): Set the style for element borders.
- [Border Width](https://yummacss.com/docs/border-width.md): Set the width for element borders.
- [Border Top Width](https://yummacss.com/docs/border-top-width.md): Set the top border width for an element.
- [Border Right Width](https://yummacss.com/docs/border-right-width.md): Set the right border width for an element.
- [Border Bottom Width](https://yummacss.com/docs/border-bottom-width.md): Set the bottom border width for an element.
- [Border Left Width](https://yummacss.com/docs/border-left-width.md): Set the left border width for an element.
- [Border Block Width](https://yummacss.com/docs/border-block-width.md): Set the vertical border width for an element.
- [Border Inline Width](https://yummacss.com/docs/border-inline-width.md): Set the horizontal border width for an element.

### Outline

- [Outline Offset](https://yummacss.com/docs/outline-offset.md): Set the offset for an element's outline.
- [Outline Style](https://yummacss.com/docs/outline-style.md): Set the style for an element's outline.
- [Outline Width](https://yummacss.com/docs/outline-width.md): Set the width for an element's outline.


## Radius & Corner

### Border Radius

- [Border Radius](https://yummacss.com/docs/border-radius.md): Set the radius for element borders.
- [Border Top Radius](https://yummacss.com/docs/border-top-radius.md): Set the top border radius for an element.
- [Border Right Radius](https://yummacss.com/docs/border-right-radius.md): Set the right border radius for an element.
- [Border Bottom Radius](https://yummacss.com/docs/border-bottom-radius.md): Set the bottom border radius for an element.
- [Border Left Radius](https://yummacss.com/docs/border-left-radius.md): Set the left border radius for an element.
- [Border Top Left Radius](https://yummacss.com/docs/border-top-left-radius.md): Set the top-left border radius for an element.
- [Border Top Right Radius](https://yummacss.com/docs/border-top-right-radius.md): Set the top-right border radius for an element.
- [Border Bottom Left Radius](https://yummacss.com/docs/border-bottom-left-radius.md): Set the bottom-left border radius for an element.
- [Border Bottom Right Radius](https://yummacss.com/docs/border-bottom-right-radius.md): Set the bottom-right border radius for an element.

### Corner Shapes

- [Corner Shape](https://yummacss.com/docs/corner-shape.md): Set the shape for element corners.
- [Corner Block End Shape](https://yummacss.com/docs/corner-block-end-shape.md): Set the shape for the block-end corner of an element.
- [Corner Block Start Shape](https://yummacss.com/docs/corner-block-start-shape.md): Set the shape for the block-start corner of an element.
- [Corner Bottom Left Shape](https://yummacss.com/docs/corner-bottom-left-shape.md): Set the shape for the bottom-left corner of an element.
- [Corner Bottom Right Shape](https://yummacss.com/docs/corner-bottom-right-shape.md): Set the shape for the bottom-right corner of an element.
- [Corner Bottom Shape](https://yummacss.com/docs/corner-bottom-shape.md): Set the shape for the bottom corners of an element.
- [Corner End End Shape](https://yummacss.com/docs/corner-end-end-shape.md): Set the shape for the end-end corner of an element.
- [Corner End Start Shape](https://yummacss.com/docs/corner-end-start-shape.md): Set the shape for the end-start corner of an element.
- [Corner Inline End Shape](https://yummacss.com/docs/corner-inline-end-shape.md): Set the shape for the inline-end corner of an element.
- [Corner Inline Start Shape](https://yummacss.com/docs/corner-inline-start-shape.md): Set the shape for the inline-start corner of an element.
- [Corner Left Shape](https://yummacss.com/docs/corner-left-shape.md): Set the shape for the left corners of an element.
- [Corner Right Shape](https://yummacss.com/docs/corner-right-shape.md): Set the shape for the right corners of an element.
- [Corner Start End Shape](https://yummacss.com/docs/corner-start-end-shape.md): Set the shape for the start-end corner of an element.
- [Corner Start Start Shape](https://yummacss.com/docs/corner-start-start-shape.md): Set the shape for the start-start corner of an element.
- [Corner Top Left Shape](https://yummacss.com/docs/corner-top-left-shape.md): Set the shape for the top-left corner of an element.
- [Corner Top Right Shape](https://yummacss.com/docs/corner-top-right-shape.md): Set the shape for the top-right corner of an element.
- [Corner Top Shape](https://yummacss.com/docs/corner-top-shape.md): Set the shape for the top corners of an element.


## Box Model

### Aspect Ratio

- [Aspect Ratio](https://yummacss.com/docs/aspect-ratio.md): Set the aspect ratio of an element.

### Block Size

- [Block Size](https://yummacss.com/docs/block-size.md): Set an element's logical block size.
- [Max Block Size](https://yummacss.com/docs/max-block-size.md): Set an element's maximum logical block size.
- [Min Block Size](https://yummacss.com/docs/min-block-size.md): Set an element's minimum logical block size.

### Box Sizing

- [Box Sizing](https://yummacss.com/docs/box-sizing.md): Set the box sizing model for an element.

### Height

- [Height](https://yummacss.com/docs/height.md): Set the height for an element.
- [Max Height](https://yummacss.com/docs/max-height.md): Limit the maximum height of an element.
- [Min Height](https://yummacss.com/docs/min-height.md): Set the minimum height of an element.

### Inline Size

- [Inline Size](https://yummacss.com/docs/inline-size.md): Set an element's logical inline size.
- [Max Inline Size](https://yummacss.com/docs/max-inline-size.md): Set an element's maximum logical inline size.
- [Min Inline Size](https://yummacss.com/docs/min-inline-size.md): Set an element's minimum logical inline size.

### Margin

- [Margin](https://yummacss.com/docs/margin.md): Set the margin for an element.
- [Margin Top](https://yummacss.com/docs/margin-top.md): Set an element's top margin.
- [Margin Right](https://yummacss.com/docs/margin-right.md): Set an element's right margin.
- [Margin Bottom](https://yummacss.com/docs/margin-bottom.md): Set an element's bottom margin.
- [Margin Left](https://yummacss.com/docs/margin-left.md): Set an element's left margin.
- [Margin Block](https://yummacss.com/docs/margin-block.md): Set an element's vertical margin.
- [Margin Block Start](https://yummacss.com/docs/margin-block-start.md): Set an element's logical block start margin.
- [Margin Block End](https://yummacss.com/docs/margin-block-end.md): Set an element's logical block end margin.
- [Margin Inline](https://yummacss.com/docs/margin-inline.md): Set an element's horizontal margin.
- [Margin Inline Start](https://yummacss.com/docs/margin-inline-start.md): Set an element's logical inline start margin.
- [Margin Inline End](https://yummacss.com/docs/margin-inline-end.md): Set an element's logical inline end margin.

### Padding

- [Padding](https://yummacss.com/docs/padding.md): Set the padding for an element.
- [Padding Top](https://yummacss.com/docs/padding-top.md): Set an element's top padding.
- [Padding Right](https://yummacss.com/docs/padding-right.md): Set an element's right padding.
- [Padding Bottom](https://yummacss.com/docs/padding-bottom.md): Set an element's bottom padding.
- [Padding Left](https://yummacss.com/docs/padding-left.md): Set an element's left padding.
- [Padding Block](https://yummacss.com/docs/padding-block.md): Set an element's vertical padding.
- [Padding Block Start](https://yummacss.com/docs/padding-block-start.md): Set an element's logical block start padding.
- [Padding Block End](https://yummacss.com/docs/padding-block-end.md): Set an element's logical block end padding.
- [Padding Inline](https://yummacss.com/docs/padding-inline.md): Set an element's horizontal padding.
- [Padding Inline Start](https://yummacss.com/docs/padding-inline-start.md): Set an element's logical inline start padding.
- [Padding Inline End](https://yummacss.com/docs/padding-inline-end.md): Set an element's logical inline end padding.

### Width

- [Width](https://yummacss.com/docs/width.md): Set the width for an element.
- [Max Width](https://yummacss.com/docs/max-width.md): Limit the maximum width of an element.
- [Min Width](https://yummacss.com/docs/min-width.md): Set the minimum width of an element.


## Colors

- [Accent Color](https://yummacss.com/docs/accent-color.md): Set the accent color for form controls.
- [Background Color](https://yummacss.com/docs/background-color.md): Set the background color for an element.
- [Border Color](https://yummacss.com/docs/border-color.md): Set the color for element borders.
- [Border Top Color](https://yummacss.com/docs/border-top-color.md): Set the top border color for an element.
- [Border Right Color](https://yummacss.com/docs/border-right-color.md): Set the right border color for an element.
- [Border Bottom Color](https://yummacss.com/docs/border-bottom-color.md): Set the bottom border color for an element.
- [Border Left Color](https://yummacss.com/docs/border-left-color.md): Set the left border color for an element.
- [Caret Color](https://yummacss.com/docs/caret-color.md): Set the color for text input cursors.
- [Color Scheme](https://yummacss.com/docs/color-scheme.md): Set which color schemes an element can be rendered in.
- [Color](https://yummacss.com/docs/color.md): Set the text color for an element.
- [Fill](https://yummacss.com/docs/fill.md): Set the fill color for SVG elements.
- [Outline Color](https://yummacss.com/docs/outline-color.md): Set the color for an element's outline.
- [Stroke](https://yummacss.com/docs/stroke.md): Set the stroke color for SVG elements.
- [Text Decoration Color](https://yummacss.com/docs/text-decoration-color.md): Set the color for text decorations.

## Effects

- [Backdrop Blur](https://yummacss.com/docs/backdrop-blur.md): Set the backdrop blur filter for an element.
- [Backdrop Grayscale](https://yummacss.com/docs/backdrop-grayscale.md): Apply a grayscale filter to the area behind an element.
- [Blur](https://yummacss.com/docs/blur.md): Set the blur filter for an element.
- [Box Shadow](https://yummacss.com/docs/box-shadow.md): Set the box shadow for an element.
- [Grayscale](https://yummacss.com/docs/grayscale.md): Set the grayscale filter for an element.
- [Mix Blend Mode](https://yummacss.com/docs/mix-blend-mode.md): Set how an element's content should blend with the background of its parent.
- [Opacity](https://yummacss.com/docs/opacity.md): Set the opacity for an element.

## Flexbox & Grid

### Flexbox

- [Align Content](https://yummacss.com/docs/align-content.md): Set row alignment in multi-row Flex & Grid containers.
- [Align Items](https://yummacss.com/docs/align-items.md): Set item alignment along a container's cross axis.
- [Align Self](https://yummacss.com/docs/align-self.md): Set individual item alignment along a container's cross axis.
- [Flex](https://yummacss.com/docs/flex.md): Set how flex items grow & shrink.
- [Flex Basis](https://yummacss.com/docs/flex-basis.md): Set the initial size for flex items.
- [Flex Direction](https://yummacss.com/docs/flex-direction.md): Set the direction for flex items.
- [Flex Grow](https://yummacss.com/docs/flex-grow.md): Set how flex items grow to fill available space.
- [Flex Shrink](https://yummacss.com/docs/flex-shrink.md): Set how flex items shrink to fit the container.
- [Flex Wrap](https://yummacss.com/docs/flex-wrap.md): Set how flex items wrap in a container.
- [Justify Content](https://yummacss.com/docs/justify-content.md): Set item alignment along a container's main axis.
- [Justify Items](https://yummacss.com/docs/justify-items.md): Set item alignment along a container's inline axis.
- [Justify Self](https://yummacss.com/docs/justify-self.md): Set individual item alignment along a container's inline axis.
- [Order](https://yummacss.com/docs/order.md): Set the order for flex & grid items.

### Grid

- [Column Gap](https://yummacss.com/docs/column-gap.md): Set the spacing between columns in a grid layout.
- [Gap](https://yummacss.com/docs/gap.md): Set the spacing between flex & grid items.
- [Grid Auto Columns](https://yummacss.com/docs/grid-auto-columns.md): Set the size of implicitly-created grid columns.
- [Grid Auto Flow](https://yummacss.com/docs/grid-auto-flow.md): Set how items are automatically placed in a grid.
- [Grid Auto Rows](https://yummacss.com/docs/grid-auto-rows.md): Set the size of implicitly-created grid rows.
- [Grid Column](https://yummacss.com/docs/grid-column.md): Set the size & position of items across grid columns.
- [Grid Column End](https://yummacss.com/docs/grid-column-end.md): Set where a grid item ends within the grid columns.
- [Grid Column Span](https://yummacss.com/docs/grid-column-span.md): Allow a grid item to span a specific number of columns.
- [Grid Column Start](https://yummacss.com/docs/grid-column-start.md): Set the starting grid line for a grid item.
- [Grid Row](https://yummacss.com/docs/grid-row.md): Set the size & position of items across grid rows.
- [Grid Row End](https://yummacss.com/docs/grid-row-end.md): Set where a grid item ends within the grid rows.
- [Grid Row Span](https://yummacss.com/docs/grid-row-span.md): Set the row span of a grid item.
- [Grid Row Start](https://yummacss.com/docs/grid-row-start.md): Set where a grid item begins within the grid rows.
- [Grid Template Columns](https://yummacss.com/docs/grid-template-columns.md): Set the columns for a grid layout.
- [Grid Template Rows](https://yummacss.com/docs/grid-template-rows.md): Set the rows for a grid layout.
- [Place Content](https://yummacss.com/docs/place-content.md): Set the content justification & alignment simultaneously.
- [Place Items](https://yummacss.com/docs/place-items.md): Set item justification & alignment simultaneously.
- [Place Self](https://yummacss.com/docs/place-self.md): Set individual item justification & alignment simultaneously.
- [Row Gap](https://yummacss.com/docs/row-gap.md): Set the spacing between rows in a grid layout.


## Interactivity

- [Appearance](https://yummacss.com/docs/appearance.md): Set the appearance for native form controls.
- [Cursor](https://yummacss.com/docs/cursor.md): Set the cursor style when hovering over an element.
- [Field Sizing](https://yummacss.com/docs/field-sizing.md): Set how form fields size themselves based on content.
- [Overscroll Behavior](https://yummacss.com/docs/overscroll-behavior.md): Set the browser's scroll overflow behavior.
- [Overscroll Behavior Block](https://yummacss.com/docs/overscroll-behavior-block.md): Set the browser's scroll overflow behavior on the block axis.
- [Overscroll Behavior Inline](https://yummacss.com/docs/overscroll-behavior-inline.md): Set the browser's scroll overflow behavior on the inline axis.
- [Overscroll Behavior X](https://yummacss.com/docs/overscroll-behavior-x.md): Set the browser's scroll overflow behavior on the horizontal axis.
- [Overscroll Behavior Y](https://yummacss.com/docs/overscroll-behavior-y.md): Set the browser's scroll overflow behavior on the vertical axis.
- [Pointer Events](https://yummacss.com/docs/pointer-events.md): Set how an item responds to pointer events.
- [Resize](https://yummacss.com/docs/resize.md): Set how an element can be resized.
- [Scroll Behavior](https://yummacss.com/docs/scroll-behavior.md): Set the scroll behavior for internal navigation.
- [Scroll Margin](https://yummacss.com/docs/scroll-margin.md): Set the scroll margin for snapping & alignment.
- [Scroll Padding](https://yummacss.com/docs/scroll-padding.md): Set the scroll padding for snapping & alignment.
- [Scroll Snap Align](https://yummacss.com/docs/scroll-snap-align.md): Set the snap alignment of an element.
- [Scroll Snap Stop](https://yummacss.com/docs/scroll-snap-stop.md): Set the scroll snap skipping behavior.
- [Scroll Snap Type](https://yummacss.com/docs/scroll-snap-type.md): Set the scroll snap direction & strictness.
- [Touch Action](https://yummacss.com/docs/touch-action.md): Set how touch gestures are handled by an element.
- [User Select](https://yummacss.com/docs/user-select.md): Set the ability for users to select text in an element.

## Layout

- [Clear](https://yummacss.com/docs/clear.md): Set how an element behaves in relation to floating elements.
- [Display](https://yummacss.com/docs/display.md): Set the display box type of an element.
- [Float](https://yummacss.com/docs/float.md): Set how an element floats within its container.
- [Isolation](https://yummacss.com/docs/isolation.md): Set whether an element must create a new stacking context.
- [Table Layout](https://yummacss.com/docs/table-layout.md): Set the table cell layout algorithm.

## Positioning

- [Bottom](https://yummacss.com/docs/bottom.md): Set the bottom placement of positioned elements.
- [Inset](https://yummacss.com/docs/inset.md): Set the placement of positioned elements.
- [Inset X](https://yummacss.com/docs/inset-x.md): Set the horizontal placement of positioned elements.
- [Inset Y](https://yummacss.com/docs/inset-y.md): Set the vertical placement of positioned elements.
- [Left](https://yummacss.com/docs/left.md): Set the left placement of positioned elements.
- [Object Fit](https://yummacss.com/docs/object-fit.md): Set how to resize the content of a replaced element.
- [Object Position](https://yummacss.com/docs/object-position.md): Set how to position the container's content.
- [Overflow](https://yummacss.com/docs/overflow.md): Set how content overflows its container.
- [Overflow X](https://yummacss.com/docs/overflow-x.md): Set how content overflows on the horizontal axis.
- [Overflow Y](https://yummacss.com/docs/overflow-y.md): Set how content overflows on the vertical axis.
- [Position](https://yummacss.com/docs/position.md): Set the positioning of an element.
- [Right](https://yummacss.com/docs/right.md): Set the right placement of positioned elements.
- [Top](https://yummacss.com/docs/top.md): Set the top placement of positioned elements.
- [Visibility](https://yummacss.com/docs/visibility.md): Set whether an element is visible or hidden.
- [Z-Index](https://yummacss.com/docs/z-index.md): Set the stack order for an element.

## Transform

- [Rotate](https://yummacss.com/docs/rotate.md): Set the rotation for an element.
- [Scale](https://yummacss.com/docs/scale.md): Set the scale for an element.
- [Scale X](https://yummacss.com/docs/scale-x.md): Set the horizontal scale for an element.
- [Scale Y](https://yummacss.com/docs/scale-y.md): Set the vertical scale for an element.
- [Scale Z](https://yummacss.com/docs/scale-z.md): Set the depth scale for an element.
- [Skew X](https://yummacss.com/docs/skew-x.md): Set the horizontal skew for an element.
- [Skew Y](https://yummacss.com/docs/skew-y.md): Set the vertical skew for an element.
- [Skew](https://yummacss.com/docs/skew.md): Set the skew for an element.
- [Transform Origin](https://yummacss.com/docs/transform-origin.md): Set the origin point for transformations.
- [Translate](https://yummacss.com/docs/translate.md): Set the translation for an element.
- [Translate X](https://yummacss.com/docs/translate-x.md): Set the horizontal translation for an element.
- [Translate Y](https://yummacss.com/docs/translate-y.md): Set the vertical translation for an element.

## Transition

- [Transition Delay](https://yummacss.com/docs/transition-delay.md): Set the delay before a transition effect starts.
- [Transition Duration](https://yummacss.com/docs/transition-duration.md): Set the amount of time a transition takes to complete.
- [Transition Property](https://yummacss.com/docs/transition-property.md): Set which properties have a transition effect.
- [Transition Timing Function](https://yummacss.com/docs/transition-timing-function.md): Set the speed curve for a transition effect.

## Typography

### Fonts

- [Font Family](https://yummacss.com/docs/font-family.md): Set the font family for an element.
- [Font Size](https://yummacss.com/docs/font-size.md): Set the font size for an element.
- [Font Style](https://yummacss.com/docs/font-style.md): Set the font style for an element.
- [Font Weight](https://yummacss.com/docs/font-weight.md): Set the font weight for an element.

### Text

- [Letter Spacing](https://yummacss.com/docs/letter-spacing.md): Set the letter spacing for an element.
- [Line Height](https://yummacss.com/docs/line-height.md): Set the line height of an element.
- [List Style Position](https://yummacss.com/docs/list-style-position.md): Set the position of the list item marker.
- [List Style Type](https://yummacss.com/docs/list-style-type.md): Set the marker style of a list.
- [Overflow Wrap](https://yummacss.com/docs/overflow-wrap.md): Set how words wrap when they overflow their container.
- [Text Align](https://yummacss.com/docs/text-align.md): Set the horizontal alignment of text.
- [Text Decoration Line](https://yummacss.com/docs/text-decoration-line.md): Set the type of decorative lines used on text.
- [Text Decoration Style](https://yummacss.com/docs/text-decoration-style.md): Set the style of decorative lines on text.
- [Text Decoration Thickness](https://yummacss.com/docs/text-decoration-thickness.md): Set the thickness of decorative lines on text.
- [Text Decoration](https://yummacss.com/docs/text-decoration.md): Set the appearance of decorative lines on text.
- [Text Indent](https://yummacss.com/docs/text-indent.md): Set the indentation of the first line of text.
- [Text Orientation](https://yummacss.com/docs/text-orientation.md): Set the orientation of text characters.
- [Text Overflow](https://yummacss.com/docs/text-overflow.md): Set how overflowing text is signaled to the user.
- [Text Transform](https://yummacss.com/docs/text-transform.md): Set the capitalization of text.
- [Text Underline Offset](https://yummacss.com/docs/text-underline-offset.md): Set the offset of a text underline.
- [Text Wrap](https://yummacss.com/docs/text-wrap.md): Set how text wraps within an element.
- [Vertical Align](https://yummacss.com/docs/vertical-align.md): Set the vertical alignment of an inline or table-cell element.
- [White Space](https://yummacss.com/docs/white-space.md): Set how white space & line wrapping are handled.
- [Word Break](https://yummacss.com/docs/word-break.md): Specify how words should break when reaching the edge of a line.
- [Writing Mode](https://yummacss.com/docs/writing-mode.md): Set whether lines of text are laid out horizontally or vertically.


## Packages

- [@yummacss/intellisense](https://yummacss.com/docs/intellisense.md): Auto-completion, hover previews & diagnostics.
- [@yummacss/canon](https://yummacss.com/docs/canon.md): Validate each class in your project.

## UI Components

### Get Started

- [Installation](https://yummacss.com/ui/components/installation.md): Get started with Yumma UI in your Vite or Next.js project.
- [Customization](https://yummacss.com/ui/components/customization.md): Customize Yumma UI components to fit your design system.

### Forms

- [Autocomplete](https://yummacss.com/ui/components/autocomplete.md): Display suggestions as users type.
- [Checkbox](https://yummacss.com/ui/components/checkbox.md): Select multiple options from a list.
- [Combobox](https://yummacss.com/ui/components/combobox.md): Combine text input with dropdown selection.
- [File Upload](https://yummacss.com/ui/components/file-upload.md): Upload files with drag and drop support.
- [Field](https://yummacss.com/ui/components/field.md): Capture user text input.
- [Number Field](https://yummacss.com/ui/components/number-field.md): Capture numeric input with increment and decrement controls.
- [Radio](https://yummacss.com/ui/components/radio.md): Select a single option from a group.
- [Select](https://yummacss.com/ui/components/select.md): Choose from a dropdown list of options.
- [Slider](https://yummacss.com/ui/components/slider.md): Select values by dragging a handle.
- [Switch](https://yummacss.com/ui/components/switch.md): Toggle between 2 states.
- [Textarea](https://yummacss.com/ui/components/textarea.md): Multi-line text input for longer content.
- [Toggle](https://yummacss.com/ui/components/toggle.md): Switch between on & off states, and group them with single or multiple selection.

### Display

- [Accordion](https://yummacss.com/ui/components/accordion.md): Expand & collapse content sections vertically.
- [Avatar](https://yummacss.com/ui/components/avatar.md): Display user profile images & fallbacks.
- [Badge](https://yummacss.com/ui/components/badge.md): Highlight status, count, or label information.
- [Breadcrumb](https://yummacss.com/ui/components/breadcrumb.md): Show navigation hierarchy and current location.
- [Collapsible](https://yummacss.com/ui/components/collapsible.md): Show & hide content with smooth transitions.
- [Meter](https://yummacss.com/ui/components/meter.md): Display measured progress with threshold bands.
- [Preview Card](https://yummacss.com/ui/components/preview-card.md): Preview content in a card layout.
- [Progress](https://yummacss.com/ui/components/progress.md): Show task completion progress.
- [Separator](https://yummacss.com/ui/components/separator.md): Divide content with visual separators.

### Interactive

- [Button](https://yummacss.com/ui/components/button.md): Trigger actions with a single click.
- [Context Menu](https://yummacss.com/ui/components/context-menu.md): Display contextual actions on right-click.
- [Menu](https://yummacss.com/ui/components/menu.md): Display a list of actions or options.
- [Menubar](https://yummacss.com/ui/components/menubar.md): Navigate through multiple dropdown menus.

### Navigation

- [Tabs](https://yummacss.com/ui/components/tabs.md): Organize content into switchable panels.
- [Toolbar](https://yummacss.com/ui/components/toolbar.md): Group related action buttons together.

### Overlays

- [Alert Dialog](https://yummacss.com/ui/components/alert-dialog.md): Display urgent confirmation dialogs over your application.
- [Command Palette](https://yummacss.com/ui/components/command-palette.md): Search and execute commands with a keyboard-driven dialog overlay.
- [Dialog](https://yummacss.com/ui/components/dialog.md): Display modal content over your application.
- [Popover](https://yummacss.com/ui/components/popover.md): Display floating content near trigger elements.
- [Tooltip](https://yummacss.com/ui/components/tooltip.md): Display helpful text on hover or focus.

### Application UI

- [Empty State](https://yummacss.com/ui/components/empty-state.md): Display content when a list or section has no items.
- [Onboarding](https://yummacss.com/ui/components/onboarding.md): Guide users through multi-step flows.
- [Rating](https://yummacss.com/ui/components/rating.md): Collect user feedback through star ratings.
- [Skeleton](https://yummacss.com/ui/components/skeleton.md): Placeholder loading content.