Customization

All components in Starting Point UI are built as Tailwind CSS utilities using the @utility directive. This makes them easy to customize in two ways: per-instance with utility classes, or globally by editing the CSS.

If you're looking to customize colors, border radius, or other theme variables, see the Theming guide.

Per-instance customization

Since components are just utility classes, you can override styles by adding more Tailwind classes. Later classes take precedence.

<button class="btn">Default</button>
<button class="btn rounded-full">Rounded</button>
<button class="btn bg-blue-500 hover:bg-blue-600">Blue</button>

You can combine component classes with any Tailwind utilities for one-off customizations:

<button
  class="btn bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 text-white border-0 px-6 rounded-full shadow-lg hover:shadow-xl hover:scale-105 transition-all"
>
  Gradient Button
</button>

Global customization

To change a component's styles across your entire project, you can override the utility in your CSS file. Add your overrides after importing the library:

@import "tailwindcss";
@import "starting-point-ui";
 
@utility btn {
  @apply rounded-full;
}

This will make all buttons rounded by default throughout your project.

You can also create new variants:

@import "tailwindcss";
@import "starting-point-ui";
 
@utility btn-success {
  @apply bg-green-500 text-white hover:bg-green-600;
}

<button class="btn btn-success">Save changes</button>