Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/auth0/cosmos
🔭 Auth0 Design System
https://github.com/auth0/cosmos
design-system styleguide
Last synced: 4 days ago
JSON representation
🔭 Auth0 Design System
- Host: GitHub
- URL: https://github.com/auth0/cosmos
- Owner: auth0
- License: mit
- Archived: true
- Created: 2017-11-01T15:00:04.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-05-17T17:06:15.000Z (over 1 year ago)
- Last Synced: 2024-12-25T07:47:37.612Z (about 1 month ago)
- Topics: design-system, styleguide
- Language: JavaScript
- Homepage: https://auth0-cosmos.now.sh/
- Size: 13.6 MB
- Stars: 544
- Watchers: 59
- Forks: 114
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- Contributing: contributing.md
- License: LICENSE
Awesome Lists containing this project
- awesome - cosmos - 🔭 Auth0 Design System (JavaScript)
README
## Project Status
Cosmos is a legacy project, that has now been deprecated. Consider using [Quantum Design System](https://www.npmjs.com/package/@auth0/quantum-product) as an alternative.
*Thank you.*
# [Cosmos](https://auth0-cosmos.now.sh/)
[](https://github.com/styled-components/styled-components) [](https://npmjs.com/@auth0/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/
#### Quicklinks:
- [Getting started](https://auth0-cosmos.now.sh/)
- [How to use Cosmos](https://auth0-cosmos.now.sh/#/usage)
- [Components Overview](https://auth0-cosmos.now.sh/#/overview)
- [Playground](https://auth0-cosmos.now.sh/#/playground)
- [Sandbox](https://auth0-cosmos.now.sh/sandbox/) - Storybook
- [Contribution Guide](https://auth0-cosmos.now.sh/#/contribution-guide)
### Installation
Ensure you have [Yarn](https://yarnpkg.com/lang/en/) 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.
```js
import { CssBaseline } from '@auth0/cosmos';
const App = () => {
return (
<>
{/* The rest of your application */}
>
)
};
```
2. Include and render them alongside your React components:
```js
import { Button } from '@auth0/cosmos'
const Actions = () => (
Hello Word!
Cosmos Documentation
)
```
To learn more about the components and the props they offer, check the [Cosmos documentation](https://auth0-cosmos.now.sh/). 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](https://auth0-cosmos.now.sh/#/contribution-guide)
## Feedback
Issues or feature requests can be created on our [GitHub page](https://github.com/auth0/cosmos/issues) or on [Slack](https://auth0.slack.com/messages/C5ZK0DD8X) (internal). You can use the [playground](https://auth0-cosmos.now.sh/#/playground) to test and share code, report bugs and ask for feedback.
## Thanks
Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers.
Thanks to [Circle CI](https://www.circleci.com/) for providing the infrastructure for our Continuous Integration needs.