Using a custom accent color

Let's add a new color called "Steel blue". We are going to use this tool to generate the entire color swatch, going from 100 to 900:

Tap

Science

Science Daily

Asteroid loaded with amino acids offers new clues about life on Earth

November 29, 2025

One of the most elegant theories about the origins of life on our planet is that it was kick-started by a delivery from outer space.

import { Button, SpiroKitProvider, useSpiroKitTheme } from "@spirokit/ui";

const myTheme = useSpiroKitTheme({
  resources: {
    colors: {
      // Step 1. Add your custom color
      steelBlue: {
        100: "#c3dbef",
        200: "#a0c2de",
        300: "#7ca9ce",
        400: "#5a91bf",
        500: "#4077a5",
        600: "#305d82",
        700: "#20425e",
        800: "#0d283b",
        900: "#000e1a",
      },
    },
  },
  config: {
    colors: {
      // Step 2. Set your custom color as primary
      primary: "steelBlue",
    },
    gradients: true,
  },
});

const App = () => {
  return (
    <SpiroKitProvider theme={myTheme}>
      {/* Button and horizontal card components inheriting the custom accent color */}
      <Button>Tap</Button>
      <HorizontalCard>...</HorizontalCard>
    </SpiroKitProvider>
  );
};