Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

Working with Tailwind CSS

Learn how to style Base UI components with Tailwind CSS.

Getting started

The goal of this guide is to teach you how to style Base UI components using Tailwind CSS while building an interactive and accessible app.

Prerequisites

This guide assumes that you have a basic working knowledge of the following:

  • Tailwind CSS
  • TypeScript in React
  • building React UI components

We will not be covering these topics in detail here.

The end result of this guide is an interactive media player interface. Here's what it will look like in the end:

Setting up the project

We'll use create-react-app with typescript for this guide. After you have created the project, follow the instructions given on the Tailwind CSS installation page in order to configure tailwind. Next, install @mui/base in the project:

<span class="token function">npm</span> <span class="token function">install</span> @mui/base

Adding the player markup

Now, create a file called Player.tsx and add the markup below, which includes Tailwind CSS classes:

Player.tsx

<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Player <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">forwardRef</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">Player</span><span class="token punctuation">(</span>
  props<span class="token operator">:</span> <span class="token punctuation">{</span> className<span class="token operator">?</span><span class="token operator">:</span> string <span class="token punctuation">}</span><span class="token punctuation">,</span>
  ref<span class="token operator">:</span> React<span class="token punctuation">.</span>ForwardedRef<span class="token operator">&lt;</span>HTMLDivElement<span class="token operator">></span><span class="token punctuation">,</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> className <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token operator">...</span>other <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
      <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">max-w-[600px] max-h-[240px] m-auto </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>className<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>
      <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>other<span class="token punctuation">}</span></span>
      <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span>
    <span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white border-slate-100 dark:bg-slate-800 dark:border-slate-500 border-b rounded-t-xl p-4 pb-6 sm:p-10 sm:pb-8 lg:p-6 xl:p-10 xl:pb-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex items-center space-x-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
            <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://tailwindcss.com/_next/static/media/full-stack-radio.485d0b2c6e3aa1cacc6b50e462cd3675.png<span class="token punctuation">"</span></span>
            <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span>
            <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>88<span class="token punctuation">"</span></span>
            <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>88<span class="token punctuation">"</span></span>
            <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex-none rounded-lg bg-slate-100<span class="token punctuation">"</span></span>
            <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span>
          <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>min-w-0 flex-auto space-y-1 font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-cyan-500 dark:text-cyan-400 text-sm leading-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Episode<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Ep<span class="token punctuation">.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>abbr</span><span class="token punctuation">></span></span> <span class="token number">128</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-slate-500 dark:text-slate-400 text-sm leading-6 truncate<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              Scaling <span class="token constant">CSS</span> at Heroku <span class="token keyword">with</span> Utility Classes
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-slate-900 dark:text-slate-50 text-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              Full Stack Radio
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>space-y-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
                <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-cyan-500 dark:bg-cyan-400 w-1/2 h-2<span class="token punctuation">"</span></span>
                <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progressbar<span class="token punctuation">"</span></span>
                <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>music progress<span class="token punctuation">"</span></span>
                <span class="token attr-name">aria-valuenow</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1456</span><span class="token punctuation">}</span></span>
                <span class="token attr-name">aria-valuemin</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span>
                <span class="token attr-name">aria-valuemax</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4550</span><span class="token punctuation">}</span></span>
              <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ring-cyan-500 dark:ring-cyan-400 ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex justify-between text-sm leading-6 font-medium tabular-nums<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-cyan-500 dark:text-slate-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token number">24</span><span class="token operator">:</span><span class="token number">16</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-slate-500 dark:text-slate-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token number">75</span><span class="token operator">:</span><span class="token number">50</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-slate-50 text-slate-500 dark:bg-slate-600 dark:text-slate-200 rounded-b-xl flex items-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex-auto flex items-center justify-evenly<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Add to favorites<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
                <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M7 6.931C7 5.865 7.853 5 8.905 5h6.19C16.147 5 17 5.865 17 6.931V19l-5-4-5 4V6.931Z<span class="token punctuation">"</span></span>
                <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinejoin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
              <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
            <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span>
            <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden sm:block lg:hidden xl:block<span class="token punctuation">"</span></span>
            <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Previous<span class="token punctuation">"</span></span>
          <span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
                <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m10 12 8-6v12l-8-6Z<span class="token punctuation">"</span></span>
                <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinejoin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
              <span class="token punctuation">/></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
                <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M6 6v12<span class="token punctuation">"</span></span>
                <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinejoin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
              <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rewind 10 seconds<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
                <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M6.492 16.95c2.861 2.733 7.5 2.733 10.362 0 2.861-2.734 2.861-7.166 0-9.9-2.862-2.733-7.501-2.733-10.362 0A7.096 7.096 0 0 0 5.5 8.226<span class="token punctuation">"</span></span>
                <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinejoin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
              <span class="token punctuation">/></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
                <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M5 5v3.111c0 .491.398.889.889.889H9<span class="token punctuation">"</span></span>
                <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinejoin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
              <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
          <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span>
          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white text-slate-900 dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center<span class="token punctuation">"</span></span>
          <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Pause<span class="token punctuation">"</span></span>
        <span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>32<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">rx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">rx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex-auto flex items-center justify-evenly<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Skip 10 seconds<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
                <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M17.509 16.95c-2.862 2.733-7.501 2.733-10.363 0-2.861-2.734-2.861-7.166 0-9.9 2.862-2.733 7.501-2.733 10.363 0 .38.365.711.759.991 1.176<span class="token punctuation">"</span></span>
                <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinejoin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
              <span class="token punctuation">/></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
                <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M19 5v3.111c0 .491-.398.889-.889.889H15<span class="token punctuation">"</span></span>
                <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinejoin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
              <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
            <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span>
            <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden sm:block lg:hidden xl:block<span class="token punctuation">"</span></span>
            <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Next<span class="token punctuation">"</span></span>
          <span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
                <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M14 12 6 6v12l8-6Z<span class="token punctuation">"</span></span>
                <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinejoin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
              <span class="token punctuation">/></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
                <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M18 6v12<span class="token punctuation">"</span></span>
                <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
                <span class="token attr-name">strokeLinejoin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
              <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
            <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span>
            <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500 dark:text-slate-100 dark:ring-0 dark:bg-slate-500<span class="token punctuation">"</span></span>
          <span class="token punctuation">></span></span>
            1x
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> Player<span class="token punctuation">;</span>

Next, add the Player component to the App.tsx file.

App.tsx

<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Player <span class="token keyword">from</span> <span class="token string">'./Player'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Player</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>

You should now see the player rendered on the page, but the component is not yet interactive—that's what we'll cover in the next step.

Adding an interactive slider component

Create the Slider component

Let's start by giving life to the slider with the Slider component from Base UI. First, create a new file called Slider.tsx. Copy and paste the code below into the file:

Slider.tsx

<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Slider<span class="token punctuation">,</span> <span class="token punctuation">{</span> SliderThumbSlotProps<span class="token punctuation">,</span> SliderProps <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/base/Slider'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Slider <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">forwardRef</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">Slider</span><span class="token punctuation">(</span>
  props<span class="token operator">:</span> SliderProps<span class="token punctuation">,</span>
  ref<span class="token operator">:</span> React<span class="token punctuation">.</span>ForwardedRef<span class="token operator">&lt;</span>HTMLSpanElement<span class="token operator">></span><span class="token punctuation">,</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Slider</span></span>
      <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span>
      <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span>
      <span class="token attr-name">slotProps</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
        thumb<span class="token operator">:</span> <span class="token punctuation">{</span>
          className<span class="token operator">:</span>
            <span class="token string">'ring-cyan-500 dark:ring-cyan-400 ring-2 w-4 h-4 -mt-1 -ml-2 flex items-center justify-center bg-white rounded-full shadow absolute'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        root<span class="token operator">:</span> <span class="token punctuation">{</span> className<span class="token operator">:</span> <span class="token string">'w-full relative inline-block h-2 cursor-pointer'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        rail<span class="token operator">:</span> <span class="token punctuation">{</span>
          className<span class="token operator">:</span>
            <span class="token string">'bg-slate-100 dark:bg-slate-700 h-2 w-full rounded-full block absolute'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        track<span class="token operator">:</span> <span class="token punctuation">{</span>
          className<span class="token operator">:</span> <span class="token string">'bg-cyan-500 dark:bg-cyan-400 h-2 absolute rounded-full'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
    <span class="token punctuation">/></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> Slider<span class="token punctuation">;</span>

To assign specific Tailwind CSS utility classes for each part of the component, we're using slotProps. Most of them were copied from the original markup with small adjustments now that it is interactive.

Add the slider to the player

Let's add the Slider into the Player component now:

Player.tsx

<span class="token coord">--- a/src/Player.tsx</span>
<span class="token coord">+++ b/src/Player.tsx</span>
<span class="token coord">@@ -1,4 +1,5 @@</span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">import * as React from 'react';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Slider from './Slider';
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const Player = React.forwardRef(function Player(props: { className?: string }, ref: React.ForwardedRef&lt;HTMLDivElement>) {
</span><span class="token prefix unchanged"> </span><span class="token line">  const { className = '', ...other } = props;
</span></span>@@ -21,12 +22,7 @@ const Player = React.forwardRef(function Player(props: { className?: string }, r
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">        &lt;/div>
</span><span class="token prefix unchanged"> </span><span class="token line">        &lt;div className="space-y-2">
</span><span class="token prefix unchanged"> </span><span class="token line">          &lt;div className="relative">
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">            &lt;div className="bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
</span><span class="token prefix deleted">-</span><span class="token line">              &lt;div className="bg-cyan-500 dark:bg-cyan-400 w-1/2 h-2" role="progressbar" aria-label="music progress" aria-valuenow={1456} aria-valuemin={0} aria-valuemax={4550}>&lt;/div>
</span><span class="token prefix deleted">-</span><span class="token line">            &lt;/div>
</span><span class="token prefix deleted">-</span><span class="token line">            &lt;div className="ring-cyan-500 dark:ring-cyan-400 ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow">
</span><span class="token prefix deleted">-</span><span class="token line">              &lt;div className="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5">&lt;/div>
</span><span class="token prefix deleted">-</span><span class="token line">            &lt;/div>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">            &lt;Slider step={50} defaultValue={1456} max={4550} min={0} />
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">          &lt;/div>
</span><span class="token prefix unchanged"> </span><span class="token line">          &lt;div className="flex justify-between text-sm leading-6 font-medium tabular-nums">
</span><span class="token prefix unchanged"> </span><span class="token line">            &lt;div className="text-cyan-500 dark:text-slate-100">24:16&lt;/div></span></span>

You should see this:

Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team

Customize the slider thumb

Even though the slider is now interactive, it still does not look exactly like the original design. This is because we haven't defined the element that represents the dot inside the thumb.

To do this, it's not enough to just use classes for the thumb—we need also to render a custom component that gets passed in the slots prop of the Slider:

Slider.tsx

<span class="token coord">--- a/src/Slider.tsx</span>
<span class="token coord">+++ b/src/Slider.tsx</span>
<span class="token coord">@@ -1,6 +1,17 @@</span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">import * as React from 'react';
</span><span class="token prefix unchanged"> </span><span class="token line">import Slider, { SliderThumbSlotProps, SliderProps } from '@mui/base/Slider';
</span></span>
<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const Thumb = React.forwardRef(function Thumb(
</span><span class="token prefix inserted">+</span><span class="token line">  props: SliderThumbSlotProps,
</span><span class="token prefix inserted">+</span><span class="token line">  ref: React.ForwardedRef&lt;HTMLSpanElement>,
</span><span class="token prefix inserted">+</span><span class="token line">) {
</span><span class="token prefix inserted">+</span><span class="token line">  const { ownerState, className = '', children, ...other } = props;
</span><span class="token prefix inserted">+</span><span class="token line">  return (&lt;span className={`${className} ring-cyan-500 dark:ring-cyan-400 ring-2 w-4 h-4 -mt-1 -ml-2 flex items-center justify-center bg-white rounded-full shadow absolute`} {...other} ref={ref}>
</span><span class="token prefix inserted">+</span><span class="token line">    &lt;span className="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5">&lt;/span>
</span><span class="token prefix inserted">+</span><span class="token line">    {children}
</span><span class="token prefix inserted">+</span><span class="token line">  &lt;/span>);
</span><span class="token prefix inserted">+</span><span class="token line">});
</span><span class="token prefix inserted">+</span><span class="token line">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const Slider = React.forwardRef(function Slider(
</span><span class="token prefix unchanged"> </span><span class="token line">  props: SliderProps,
</span><span class="token prefix unchanged"> </span><span class="token line">  ref: React.ForwardedRef&lt;HTMLSpanElement>,
</span></span>@@ -8,9 +19,11 @@ const Slider = React.forwardRef(function Slider(
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  return (&lt;Slider
</span><span class="token prefix unchanged"> </span><span class="token line">    {...props}
</span><span class="token prefix unchanged"> </span><span class="token line">    ref={ref}
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    slots={{
</span><span class="token prefix inserted">+</span><span class="token line">      thumb,
</span><span class="token prefix inserted">+</span><span class="token line">    }}
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">    slotProps={{
</span><span class="token prefix unchanged"> </span><span class="token line">      root: { className: 'w-full relative inline-block h-2 cursor-pointer' },
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">      thumb: { className: 'ring-cyan-500 dark:ring-cyan-400 ring-2 w-4 h-4 -mt-1 -ml-2 flex items-center justify-center bg-white rounded-full shadow absolute' },
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">      rail: { className: 'bg-slate-100 dark:bg-slate-700 h-2 w-full rounded-full block absolute' },
</span><span class="token prefix unchanged"> </span><span class="token line">      track: { className: 'bg-cyan-500 dark:bg-cyan-400 h-2 absolute rounded-full' }
</span><span class="token prefix unchanged"> </span><span class="token line">    }}</span></span>

After refreshing the page, you should see the thumb looking identical to the design now.

The code above creates a custom component with all the classes and props necessary to serve as the thumb. Since we want to have an additional dot inside the thumb, we need to add new element in the markup of the thumb: a <span>. Note that after the thumb, we are still rendering the children passed via props. This is important because the children in this case contain a hidden <input> element which makes the thumb accessible.

This is just one example, but this pattern of building custom components for each slot is possible with all Base UI components.

Additionally, each of the slots receives an ownerState object, which contains the props and state of the owner component. This is useful if you want to style the component based on some internal state.

Adding a custom focus selector to the buttons

To finish this guide off, let's see how you can add custom styles based on a component's internal state. We'll create a custom Button component that uses the focusVisible state from the Base UI Button to apply a cyan ring around it.

This is what it'll look like:

Screenshot of a button used as example in the guide, designed by the Tailwind Labs team

Create a Button.tsx file and copy the following code:

Button.tsx

<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Button<span class="token punctuation">,</span> <span class="token punctuation">{</span> ButtonOwnerState<span class="token punctuation">,</span> ButtonProps <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/base/Button'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Button <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">forwardRef</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">Button</span><span class="token punctuation">(</span>
  props<span class="token operator">:</span> ButtonProps<span class="token punctuation">,</span>
  ref<span class="token operator">:</span> React<span class="token punctuation">.</span>ForwardedRef<span class="token operator">&lt;</span>HTMLButtonElement<span class="token operator">></span><span class="token punctuation">,</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>Button
      <span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span>
      slotProps<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
        <span class="token function-variable function">root</span><span class="token operator">:</span> <span class="token punctuation">(</span>state<span class="token operator">:</span> ButtonOwnerState<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          className<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">hover:text-cyan-500 transition-colors </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>
            state<span class="token punctuation">.</span>focusVisible <span class="token operator">?</span> <span class="token string">'outline-0 ring-2 ring-cyan-500'</span> <span class="token operator">:</span> <span class="token string">''</span>
          <span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">}</span>
      ref<span class="token operator">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span>
    <span class="token operator">/</span><span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> Button<span class="token punctuation">;</span>

Note that we're using a callback for the root element inside slotProps. This allows us to conditionally apply utility classes if focusVisible is true.

Now, let's replace all buttons in the initial markup with the new custom Button component.

Player.tsx

<span class="token coord">--- a/src/Player.tsx</span>
<span class="token coord">+++ b/src/Player.tsx</span>
<span class="token coord">@@ -1,4 +1,5 @@</span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">import * as React from 'react';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Button from './Button';
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">import Slider from './Slider';
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const Player = React.forwardRef(function Player(props: { className?: string }, ref: React.ForwardedRef&lt;HTMLDivElement>) {
</span></span>@@ -32,46 +33,46 @@ const Player = React.forwardRef(function Player(props: { className?: string }, r
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">      &lt;/div>
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;div className="bg-slate-50 text-slate-500 dark:bg-slate-600 dark:text-slate-200 rounded-b-xl flex items-center">         &lt;div className="flex-auto flex items-center justify-evenly">
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">          &lt;button type="button" aria-label="Add to favorites">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;Button aria-label="Add to favorites">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">            &lt;svg width="24" height="24">
</span><span class="token prefix unchanged"> </span><span class="token line">              &lt;path d="M7 6.931C7 5.865 7.853 5 8.905 5h6.19C16.147 5 17 5.865 17 6.931V19l-5-4-5 4V6.931Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</span><span class="token prefix unchanged"> </span><span class="token line">            &lt;/svg>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">          &lt;/button>
</span><span class="token prefix deleted">-</span><span class="token line">          &lt;button type="button" className="hidden sm:block lg:hidden xl:block" aria-label="Previous">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;/Button>
</span><span class="token prefix inserted">+</span><span class="token line">          &lt;Button className="hidden sm:block lg:hidden xl:block" aria-label="Previous">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">            &lt;svg width="24" height="24" fill="none">
</span><span class="token prefix unchanged"> </span><span class="token line">              &lt;path d="m10 12 8-6v12l-8-6Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</span><span class="token prefix unchanged"> </span><span class="token line">              &lt;path d="M6 6v12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</span><span class="token prefix unchanged"> </span><span class="token line">            &lt;/svg>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">          &lt;/button>
</span><span class="token prefix deleted">-</span><span class="token line">          &lt;button type="button" aria-label="Rewind 10 seconds">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;/Button>
</span><span class="token prefix inserted">+</span><span class="token line">          &lt;Button aria-label="Rewind 10 seconds">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">            &lt;svg width="24" height="24" fill="none">
</span><span class="token prefix unchanged"> </span><span class="token line">              &lt;path d="M6.492 16.95c2.861 2.733 7.5 2.733 10.362 0 2.861-2.734 2.861-7.166 0-9.9-2.862-2.733-7.501-2.733-10.362 0A7.096 7.096 0 0 0 5.5 8.226" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</span><span class="token prefix unchanged"> </span><span class="token line">              &lt;path d="M5 5v3.111c0 .491.398.889.889.889H9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</span><span class="token prefix unchanged"> </span><span class="token line">            &lt;/svg>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">          &lt;/button>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;/Button>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">        &lt;/div>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">        &lt;button type="button" className="bg-white text-slate-900 dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center" aria-label="Pause">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        &lt;Button className="bg-white text-slate-900 dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-20 h-20 rounded-full border-2 border-slate-900/5 shadow-md flex items-center justify-center" aria-label="Pause">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">          &lt;svg width="30" height="32" fill="currentColor">
</span><span class="token prefix unchanged"> </span><span class="token line">            &lt;rect x="6" y="4" width="4" height="24" rx="2" />
</span><span class="token prefix unchanged"> </span><span class="token line">            &lt;rect x="20" y="4" width="4" height="24" rx="2" />
</span><span class="token prefix unchanged"> </span><span class="token line">          &lt;/svg>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">        &lt;/button>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">        &lt;/Button>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">        &lt;div className="flex-auto flex items-center justify-evenly">
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">          &lt;button type="button" aria-label="Skip 10 seconds">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;Button aria-label="Skip 10 seconds">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">            &lt;svg width="24" height="24" fill="none">
</span><span class="token prefix unchanged"> </span><span class="token line">              &lt;path d="M17.509 16.95c-2.862 2.733-7.501 2.733-10.363 0-2.861-2.734-2.861-7.166 0-9.9 2.862-2.733 7.501-2.733 10.363 0 .38.365.711.759.991 1.176" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</span><span class="token prefix unchanged"> </span><span class="token line">              &lt;path d="M19 5v3.111c0 .491-.398.889-.889.889H15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</span><span class="token prefix unchanged"> </span><span class="token line">            &lt;/svg>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">          &lt;/button>
</span><span class="token prefix deleted">-</span><span class="token line">          &lt;button type="button" className="hidden sm:block lg:hidden xl:block" aria-label="Next">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;/Button>
</span><span class="token prefix inserted">+</span><span class="token line">          &lt;Button className="hidden sm:block lg:hidden xl:block" aria-label="Next">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">            &lt;svg width="24" height="24" fill="none">
</span><span class="token prefix unchanged"> </span><span class="token line">              &lt;path d="M14 12 6 6v12l8-6Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</span><span class="token prefix unchanged"> </span><span class="token line">              &lt;path d="M18 6v12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</span><span class="token prefix unchanged"> </span><span class="token line">            &lt;/svg>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">          &lt;/button>
</span><span class="token prefix deleted">-</span><span class="token line">          &lt;button type="button" className="rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500 dark:text-slate-100 dark:ring-0 dark:bg-slate-500">
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;/Button>
</span><span class="token prefix inserted">+</span><span class="token line">          &lt;Button className="rounded-lg text-xs leading-6 font-semibold px-2 border-2 border-slate-500 text-slate-500 dark:text-slate-100 dark:ring-0 dark:bg-slate-500 hover:ring-cyan-500">
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">            1x
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">          &lt;/button>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">          &lt;/Button>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">        &lt;/div>
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;/div>
</span><span class="token prefix unchanged"> </span><span class="token line">    &lt;/div></span></span>

Some classes were slightly changed on some buttons so we have a consistent focus indicator.

What we learned

These are the things we covered in this guide:

✅ How to use Tailwind CSS utility classes to style Base UI components, using the slotProps prop for targeting specific slots within the component.
✅ How to create custom components for specific slots in more complex customization scenarios. We used the component prop to pass them into the parent component.
✅ How to apply conditional styling based on the owner component's state using a callback as value for the slotProps prop.

Get all the code used in this guide in the Base UI with Tailwind CSS example project.