Styling

Since tremolo-ui is a headless library, you can style it using your preferred method, such as Vanilla CSS, CSS in JS, or Tailwind CSS.

Here, we'll introduce several ways to change the appearance of components.

Apply the default style

Import bundled CSS:

For Vite, apply the following to src/main.tsx. For Next.js, apply it to app/layout.tsx.

main.tsx

import '@tremolo-ui/react/styles/index.css'

Import by component:

For Vite, apply the following to src/main.tsx. For Next.js, apply it to app/layout.tsx.
global.css contains the default theme and small utilities.

main.tsx

import '@tremolo-ui/react/styles/global.css'

Import the CSS corresponding to the component's file.

MyKnob.tsx

import '@tremolo-ui/react/styles/Knob.css'
import { Knob } from '@tremolo-ui/react'

export function MyKnob() {
  // ...

This method helps avoid bundling unused CSS.

Customize the appearance

Component-based Styling

Here, we'll introduce one example of how to use CSS Modules.

index.tsx

Loading...

import { useState } from 'react'
import { Knob } from '@tremolo-ui/react'

import '@tremolo-ui/react/styles/Knob.css'
import myKnob from './my-knob.module.css'

function App() {
  const [value, setValue] = useState(64)

  return (
    <div className={myKnob.container}>
      <Knob
        className={myKnob.knob}
        value={value}
        min={0}
        max={100}
        size={50}
        onChange={(v) => setValue(v)}
        classes={{
          activeLine: myKnob.activeLine,
        }}
      />
      {value}
    </div>
  )
}

export default App

my-knob.module.css

.activeLine {
  color: rgb(235, 76, 76);

  :where(.knob:focus, .knob:hover) & {
    color: rgb(235, 44, 44);
  }
}

:where(.dark, [data-theme='dark']) {
  .activeLine {
    :where(.knob:focus, .knob:hover) & {
      color: rgb(235, 91, 91);
    }
  }
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

Global Styling

Learn how to override the default CSS and load it as global CSS.

First, copy dist/index.css and create a new css file named custom.css.

cp node_modules/@tremolo-ui/react/dist/index.css custom.css

index.tsx

import 'custom.css'

custom.css

.tremolo-any-component {
  /* customize style here */
}

Next, overwrite the css of the component you wish to change.

All components provided by tremolo-ui are prefixed with tremolo- followed by the component name.

index.tsx

import 'custom.css'

Next Step

Let's explore the components offered by tremolo-ui.
Components - Knob