Sign up

smith / cosmos
forked from auth0/cosmos

Auth0 Design System

auth0-cosmos.now.sh
MIT License
0 stars 119 forks

Star
Watch

Code
Pull requests
Actions
Projects
Security
Insights

master
Go to file

This branch is 136 commits behind auth0:master.

Pull request Compare

View code

readme.md

Cosmos
style styled-components npm v0.35.0

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.

Thanks

Thanks to Chromatic for providing the visual testing platform that help us catch unexpected changes on time.

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

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

Releases
57 tags

Languages

JavaScript 52.8% TypeScript 46.7% Other 0.5%

© 2020 GitHub, Inc.

Terms
Privacy
Security
Status
Help
Contact GitHub
Pricing
API
Training
Blog
About