{"slug":"styling","title":"Styling","description":"Using CSS to style Zag components","contentType":"guides","content":"Zag's API is intentionally very low level and unstyled, giving you control over\nhow you want to style them. Unlike Chakra UI, it provides no styles or UI, just\nbehavior or logic, accessibility and helpful methods.\n\nEach machine provides an idea of the DOM structure and styling guide to show you\nhow to style the states and parts.\n\n## Styling a component part\n\nEvery component comprises of multiple parts that can be styled. For example, the\ndialog component has the following parts: content, trigger, title, and backdrop.\n\nThe `data-part` attribute can be used to select and style a component part.\n\nHere's what a sample HTML for the dialog looks like:\n\n```html\n<div data-part=\"backdrop\"></div>\n<div data-part=\"positioner\">\n  <div data-part=\"content\">\n    <h2 data-part=\"title\">Dialog Title</h2>\n    <p data-part=\"description\">Dialog Description</p>\n    <button data-part=\"close-trigger\">Close</button>\n  </div>\n</div>\n```\n\nYou can style each part using the CSS attribute selector.\n\n```css\n[data-part=\"backdrop\"] {\n  background-color: #000;\n  opacity: 0.5;\n}\n\n[data-part=\"content\"] {\n  padding: 24px;\n  border-radius: 6px;\n}\n```\n\n## Styling a state\n\nWhen a component or its parts can have multiple states, we automatically attach\n`data-*` attributes that represents the specific state. For example, an\naccordion's trigger can have:\n\n- `data-disabled` — When the trigger is disabled.\n- `data-expanded` — When the trigger is expanded.\n\nYou can style the accordion's trigger using the CSS attribute selector.\n\n```css\n[data-part=\"trigger\"][data-expanded] {\n  background: red;\n}\n\n[data-part=\"trigger\"][data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n```\n\nYou'll see this pattern across every components within the library.\n\n> Zag was designed to encapsulate logic, accessibility and interactions, while\n> giving you full control over styling.","editUrl":"https://github.com/chakra-ui/zag/edit/main/website/data/guides/styling.mdx"}