TypeScript icon, indicating that this package has built-in type declarations

    4.4.0 • Public • Published



    A set of robust, accessible React components built using @guardian/source-foundations.


    $ yarn add @guardian/source-react-components


    $ npm install @guardian/source-react-components

    You must install react, @emotion/react and @guardian/source-foundations to use Source components.


    import { TextInput, Button } from '@guardian/source-react-components';
    const Form = () => (
            <TextInput label="First name" />


    By default, all components are styled using their light theme.

    To apply a different theme, we recommend using Emotion's theming API. You can import the desired theme from @guardian/source-react-components

    To compose a theme for specific components:

    import { ThemeProvider } from '@emotion/react';
    import {
    } from '@guardian/source-react-components';
    const Form = () => (
        <ThemeProvider theme={{ ...buttonThemeBrand, ...textInputThemeBrand }}>
                <TextInput label="First Name" />
                <Button>Click me</Button>

    Available themes

    Standard themes available from @guardian/source-react-components:

    • default – exported as [componentName]ThemeDefault
    • brand – exported as [componentName]ThemeBrand
    • brandAlt – exported as [componentName]ThemeBrandAlt

    To find out which themes a component supports, check its stories under Packages/source-react-components/<ComponentName>

    Note that some components have their own unique themes in addition to the standard set of themes. For instance, the button component defines two themes for use in Reader Revenue flows.

    Overriding styles

    To extend or override the styles of Source components, pass SerializedStyles generated by the css function to the cssOverrides prop.

    import { css } from '@emotion/react';
    const dangerStyles = css`
        background-colour: ${error[500]};
        color: ${text.ctaPrimary};
        &:hover {
            background-colour: ${error[400]};
    const Danger = () => (
        <Button cssOverrides={dangerStyles}>Delete my account</Button>

    The cssOverrides prop is mixed into the css prop for the main element of the component. This differs from component to component. You'll need to look at the source code for the component to see where your overrides will be applied.

    Using classNames

    If you are using a CSS solution that relies on passing the className prop, you can pass your className to the Source component as normal.

    One caveat here is that @emotion/react, which Source components use for styling, appends style tags to the bottom of the document head. Since they appear at the end of the cascade, they tend to override other styles unless the other styles have a higher specificity.

    You may therefore need to mark overrides as !important in order to ensure they are applied.




    npm i @guardian/source-react-components

    DownloadsWeekly Downloads






    Unpacked Size

    1.89 MB

    Total Files


    Last publish


    • pete_f
    • adamnfish
    • novembertang
    • ab-gnm
    • yusuf.faraji
    • joecowton1
    • alinaboghiu.g
    • robertkenny_gu
    • jamesgorrie
    • oliverlloyd
    • arelra
    • marjank
    • jamieb-gu
    • zekehg
    • rtyley
    • dlawes
    • ghaberis
    • jsherbert
    • david.furey.gu
    • guardian-developers
    • simonadcock-gu
    • akash1810
    • reetta
    • ajwl
    • tomrf1
    • mchv
    • itsibitzi
    • justinpinner
    • jranks123
    • nicl
    • philmcmahon
    • tjmw
    • thaliasilver
    • sndrs
    • sam.hession
    • jfsoul
    • 0x101
    • frankie_hammond
    • aoifemcl15
    • mxdvl
    • rhysmills
    • jacobwinch
    • annabeddow
    • michaelclapham_gnm
    • olly.namey.guardian