Styling

Tip Top UI is set up to support a variety of ways to customize the components.

CSS variables

It is recommended that you start with trying to customize everything using CSS variables. You can read more on the CSS Variables page or see the available CSS variables in each Component's documentation.

Global classes with CSS/SASS/LESS

If the CSS Variables don't provide the level of customization you require you can style the components directly.

Each component has class names that are available globally and can be used in your CSS/SASS/LESS.

All the class names are prefixed with tipTop- to scope the names and prevent conflicts and use the following format:

.tipTop-<ComponentName>-<partName>

For example you can target the different parts of the Button component with the following classes.

.tipTop-Button-root {
  /* styles go here */
}
.tipTop-Button-children {
  /* styles go here */
}
.tipTop-Button-slot {
  /* styles go here */
}

Each component's documentation has a list of available parts for that component.

ClassNames prop

If you want to apply your own classes to the parts that make up the component you can use the classNames prop. The prop takes an object where the key is the name of the child part inside the component.

Each component's documentation has a list of available parts for that component.

import { Button } from "@tiptopui/components";

function ClassNameDemo() {
  return (
    <Button
      classNames={{
        root: "foo",
        children: "bar",
        slot: "baz",
      }}
    >
      My Button
    </Button>
  );
}

note

The components className prop gets added to the root component.

So the following will add the class name 'foo' to the same part of the component.

<Button className="foo">My Button</Button>

<Button classNames={{ root: "foo" }}>My Button</Button>

CSS modules

The classNames prop can be used with CSS Modules, which can be used to scope styles to each component.

cssModuleDemo.module.css

.root {
  background-color: red;
}
.children {
  font-family: "Comic Sans";
}
.slot {
  padding: 0;
}

cssModuleDemo.jsx

import { Button } from "@tiptopui/components";
import cssModule from "./CssModuleDemo.modules.css";

function CssModuleDemo() {
  return <Button classNames={cssModule}>My Button</Button>;
}

Tailwind

The classNames prop can be used with Tailwind to add utility classes to the elements that make up the component.

import { Button } from "@tiptopui/components";

function TailwindModuleDemo() {
  return (
    <Button
      classNames={{
        root: "bg-white",
        children: "font-sans",
        slot: "p-0",
      }}
    >
      My Button
    </Button>
  );
}

Styles Prop

The styles prop allows you to add inline styles to the parts of a component.

import { Button } from "@tiptopui/components";

function StylesPropDemo() {
  return (
    <Button
      styles={{
        root: { backgroundColor: "red-500" },
        children: { fontFamily: "Comic Sans" },
        slot: { padding: 0 },
      }}
    >
      My Button
    </Button>
  );
}

note

The root part is the top level element. So adding styles to the root part is the same as adding styles to the regular component.

So the following is equivalent.

<Button styles={{ backgroundColor: "red-500" }}>My Button</Button>

<Button styles={{ root: { backgroundColor: "red-500" } }}>My Button</Button>

Unstyled

If you don't provide any CSS variables and you will only get the basic display and layout setting needed to render the components.

If you don't include the Tip Top UI styles from @tiptopui/components/dist/index.css then you won't get any styles at all.

Margin Props

Adding margins around components can vary depending on the context. To make this easier each component includes margin props to quickly add margin using the spacing CSS variables.

Prop	Description
mt	Sets CSS margin-block-start
mb	Sets CSS margin-block-end
ms	Sets CSS margin-inline-start
me	Sets CSS margin-inline-end

Available values are the same as the spacing CSS variables without the --tipTop__space-- prefix. See the CSS Variables page for available spacing values.

Result

Loading...

Live Editor

<div>
  <Button me="3">Primary</Button>
  <Button>Secondary</Button>
</div>