Meta tags:
description=Learn how to style Base UI components with your preferred styling engine.;
keywords=Base UI Styling,Tailwind Base UI,CSS Modules Base UI,CSS-in-JS Base UI,Style Hooks Data Attributes,Unstyled React Components,Handbook Styling,Headless UI Styling,Theming,Custom Styles,Utility First CSS,Headless Components Styling;

Headings (most frequently used words):

css, style, styling, hooks, tailwind, modules, in, js, classes, data, attributes, variables, prop,

Text of the page (most frequently used words):
menu (50), css (24), data (21), neutral (17), classname (15), style (14), dark (14), item (12), styles (11), popup (11), 950 (11), white (11), text (11), switch (11), #styling (10), styled (8), components (8), the (8), prop (8), outline (8), highlighted (8), positioner (7), tsx (7), base (6), root (6), portal (6), add (6), classes (6), border (6), state (6), import (5), from (5), const (5), trigger (5), styledmenuitem (5), default (5), component (5), and (5), checked (5), attributes (5), variables (5), each (4), function (4), modules (4), select (4), focus (4), visible (4), hidden (4), tailwind (4), thumb (4), that (4), height (4), element (4), with (4), for (4), react (3), styledmenutrigger (3), button (3), styledmenupositioner (3), styledmenupopup (3), song (3), library (3), playlist (3), export (3), part (3), apply (3), your (3), flex (3), none (3), available (3), popover (3), field (3), menuexample (2), then (2), examplemenu (2), return (2), sideoffset (2), via (2), center (2), hover (2), 100 (2), active (2), open (2), 800 (2), origin (2), transform (2), ending (2), scale (2), opacity (2), starting (2), cursor (2), leading (2), color (2), also (2), takes (2), argument (2), render (2), html (2), accept (2), example (2), its (2), switchthumb (2), can (2), unchecked (2), hooks (2), are (2), you (2), provider (2), toggle (2), group (2), navigation (2), dialog (2), checkbox (2), emotion, wrap, assemble, module, custom, those, file, items, justify, rounded, 200, offset, 700, transition, red, blue, accepts, 100px, object, check, out, api, reference, complete, list, max, var, expose, aid, often, containing, dynamic, numeric, values, used, sizing, calculations, exposes, like, width, anchor, background, green, provide, designed, their, states, using, among, others, passed, unstyled, don, bundle, compatible, any, other, solution, prefer, retain, total, control, layer, view, markdown, guide, preferred, engine, top, npm, github, userender, mergeprops, direction, csp, utils, tooltip, toolbar, toast, tabs, slider, separator, scroll, area, radio, progress, preview, card, otp, new, number, meter, menubar, input, form, fieldset, drawer, context, combobox, collapsible, avatar, autocomplete, alert, accordion, llms, txt, typescript, forms, customization, composition, animation, handbook, about, community, releases, accessibility, quick, start, overview, search, skip, contents,

Text of the page (random words):
styling base ui skip to contents search k navigation overview quick start accessibility releases community about handbook styling animation composition customization forms typescript llms txt components accordion alert dialog autocomplete avatar button checkbox checkbox group collapsible combobox context menu dialog drawer field fieldset form input menu menubar meter navigation menu number field otp field new popover preview card progress radio scroll area select separator slider switch tabs toast toggle toggle group toolbar tooltip utils csp provider direction provider mergeprops userender github npm 1 6 0 styling top style hooks css classes data attributes css variables style prop tailwind css css modules css in js styling a guide to styling base ui components with your preferred styling engine view as markdown base ui components are unstyled don t bundle css and are compatible with tailwind css modules css in js or any other styling solution you prefer you retain total control of your styling layer style hooks css classes components that render an html element accept a classname prop to style the element with css classes switch tsx switch thumb classname switchthumb the prop can also be passed a function that takes the component s state as an argument switch tsx switch thumb classname state state checked checked unchecked data attributes components provide data attributes designed for styling their states for example switch can be styled using its data checked and data unchecked attributes among others switch css switchthumb data checked background color green css variables components expose css variables to aid in styling often containing dynamic numeric values to be used in sizing or transform calculations for example popover exposes css variables on its popup component like available height and anchor width popover css popup max height var available height check out each component s api reference for a complete list of available data attributes and css variables style prop components that render an html element accept a style prop to style the element with a css object switch tsx switch thumb style height 100px the prop also accepts a function that takes the component s state as an argument switch tsx switch thumb style state color state checked red blue tailwind css apply tailwind css classes to each part via the classname prop menu tsx import menu from base ui react menu export default function examplemenu return menu root menu trigger classname flex h 8 items center justify center rounded md border border neutral 950 bg white px 3 text sm text neutral 950 select none hover bg neutral 100 active bg neutral 200 data popup open bg neutral 100 focus visible outline 2 focus visible outline offset 1 focus visible outline neutral 950 dark border white dark bg neutral 950 dark text white dark hover bg neutral 800 dark active bg neutral 700 dark data popup open bg neutral 800 dark focus visible outline white song menu trigger menu portal menu positioner classname outline hidden sideoffset 8 menu popup classname origin transform origin border border neutral 950 bg white py 1 text neutral 950 outline hidden transition data ending style scale 95 data ending style opacity 0 data starting style scale 95 data starting style opacity 0 dark border white dark bg neutral 950 dark text white menu item classname flex cursor default py 2 pr 8 pl 4 text sm leading 4 outline hidden select none data highlighted bg neutral 950 data highlighted text white dark data highlighted bg white dark data highlighted text neutral 950 add to library menu item menu item classname flex cursor default py 2 pr 8 pl 4 text sm leading 4 outline hidden select none data highlighted bg neutral 950 data highlighted text white dark data highlighted bg white dark data highlighted text neutral 950 add to playlist menu item menu popup menu positioner menu portal menu root css modules apply custom css classes to each part via the classname prop then style those classes in a css modules file menu tsx import menu from base ui react menu import styles from menu module css export default function examplemenu return menu root menu trigger classname styles button song menu trigger menu portal menu positioner classname styles positioner sideoffset 8 menu popup classname styles popup menu item classname styles item add to library menu item menu item classname styles item add to playlist menu item menu popup menu positioner menu portal menu root css in js wrap each component part and apply styles then assemble your styled components menu tsx import menu from base ui react menu import styled from emotion styled const styledmenutrigger styled menu trigger button styles const styledmenupositioner styled menu positioner positioner styles const styledmenupopup styled menu popup popup styles const styledmenuitem styled menu item menu item styles const menuexample menu root styledmenutrigger song styledmenutrigger menu portal styledmenupositioner styledmenupopup styledmenuitem add to library styledmenuitem styledmenuitem add to playlist styledmenuitem styledmenupopup styledmenupositioner menu portal menu root export default menuexample