tehsis / cosmos

🔭 Auth0 Design System

 

Cosmos

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 https://auth0-cosmos.now.sh/docs

   

Quicklinks:

• Getting started
• How to use Cosmos
• Components Overview
• Playground
• Sandbox - Storybook
• Contribution Guide

   

Installation

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. Include any of available components:

import { Button } from '@auth0/cosmos'

2. Use them along your React components:

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

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.

   

Contribute

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

   

Feedback

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.