Skip to content
This repository has been archived by the owner on May 17, 2023. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
February 23, 2022 09:23
July 23, 2019 13:10
November 2, 2017 17:45
February 23, 2022 09:23
February 12, 2021 13:24
February 23, 2022 09:23
January 9, 2020 13:13
February 23, 2022 09:23
August 25, 2020 17:19
February 12, 2021 13:24
May 17, 2023 13:02
July 23, 2019 13:10
July 23, 2019 13:10
February 23, 2022 09:23

Project Status

Cosmos is a legacy project, that has now been deprecated. Consider using Quantum Design System as an alternative.

Thank you.



style: styled-components npm version

A Design System For Auth0 Products.

What is a design system?

“A set of shared and integrated principles and patterns that define the overall design of a product.” — Karri Saarinen @ Airbnb

The aim of Cosmos is to help Auth0 designers and developers deliver work faster and better. It provides teams with a common language and encourages adherence to design guidelines with compliant components right out of the box.

We are currently building our roadmap and initial components inventory to estimate the v1 release date. We are in active development and testing with selected teams, so the components API may change frequently. However, you can play with the alpha version today! Your feedback will help us shape Cosmos.

See the documentation at





Ensure you have Yarn installed.

To add Cosmos to your React application, run:

$ yarn add @auth0/cosmos

If you prefer npm, run this command instead:

$ npm install --save @auth0/cosmos

That's all you need to do: no config changes required!


Using Cosmos components in your application

  1. Cosmos provides a CssBaseline component to setup some of the base styles required (fonts, etc). It also fixes some inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements. Import and render the CssBaseline component once at the top of your application.
import { CssBaseline } from '@auth0/cosmos';

const App = () => {
  return (
      <CssBaseline />
      {/* The rest of your application */}
  1. Include and render them alongside your React components:
import { Button } from '@auth0/cosmos'

const Actions = () => (
    <h1>Hello Word!</h1>
    <Button size="default" appearance="cta" onClick>
      Cosmos Documentation

To learn more about the components and the props they offer, check the Cosmos documentation. Pick a component from the sidebar to find examples and configuration options.



There's a lot to write here, we maintain it in our docs: Contribution guidelines



Issues or feature requests can be created on our GitHub page or on Slack (internal). You can use the playground to test and share code, report bugs and ask for feedback.



Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

BrowserStack Logo

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers.

Circle CI Logo

Thanks to Circle CI for providing the infrastructure for our Continuous Integration needs.