for developers
Welcome
Boilerplates
Code Linting
Github Actions
Private Registry
Styled
Getting StartedThemingComponentsGridGrid.ItemModalResponsiveUtils
🔒  Local Setup
🔒  Server Setup
🔒  Code Challenge

Styled

A collection of full accessible, tested and performant UI components made by wild.

Theming

Many components can be styled and extended using the styled-component's theming feature. It is therefore required, to setup a `ThemeProvider` with the default theme as a base, which can be extended as necessary.

  1. Create a theme provider and extend the theme as needed.
import { theme as defaultTheme } from "@madebywild/styled-utils";


const theme = {
  ...defaultTheme,
  screens: {
    ...defaultTheme.screens,
    "3xl": 2000,
  }
}


<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>
2. Create a new declaration file `styled-components.d.ts` in a place that is accessible by the TS compiler (the `src` directory is usually fine). In case you extended the base theme, you should modify the interface accordingly. Keep in mind that general TS rules apply when extending an interface.
import "styled-components";
import { Theme } from "@madebywild/styled-utils";


declare module "styled-components" {
  // 1. Extend styled-components with our base theme.
  export interface DefaultTheme extends Theme {
    // 2. Optionally, add custom tokens according to your theme.
    screens: Theme["screens"] & {
      3xl: number;
    };
  }
}

Components

  • Grid
    Grid component based on the CSS Grid Layout spec.
  • Grid Item
    Grid item component, it must be used as direct children of Grid.
  • Utils
    A collections of utils, used across Styled packages.