goober comes with types included, making developing with TypeScript easy.

Prop Types#

If you're utilising custom props and wish to style based on them, you can do so when initialising as follows:

interface Props {
size: number;
border-radius: ${(props) => props.size}px;
// This also works!
border-radius: ${(props) => props.size}px;

Extending Theme#

If you're using a custom theme with goober, to add types to it you should create a declaration file at the base of your project.

// goober.d.t.s
import 'goober';
declare module 'goober' {
export interface DefaultTheme {
colors: {
primary: string;

You should now have autocompletion for your theme.

const ThemeContainer = styled('div')`
background-color: ${(props) => props.theme.colors.primary};

Note when using Preact#

If utilising Preact, add the following into a declaration file at the root of your project to enable typing:

// preact.d.ts
import JSX = preact.JSX;