Skip to main content

Documentation Index

Fetch the complete documentation index at: https://tonic.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

1

Add Base Styles to your project

  <link href="/base-styles.css" rel="stylesheet">
  <link href="/base-styles-custom.css" rel="stylesheet">
2

Set Your Defaults

base-styles-custom.css
  :root {
    --ui-font-family-headers: 'Inter', sans-serif;
    --ui-font-family: 'Inter', sans-serif;
    --ui-color-primary: #0070f3;
    --ui-shared-border-radius: 6px;
    --ui-shared-border-width: 2px;
  }
3

3. Use the classes to compose your UI

  <button class="ui-button"> My Button </button>
4

4.(Optional) Add your own variants

If we don’t have a variant you need, just add your own. See customization for more.
base-styles-custom.css
.ui-button {
  & .--embossed {
    box-shadow: 0 0 0 2px var(--ui-color-primary);
  }
}