Astraea UI is a collection of reusable components and styles for building beautiful user interfaces in React.
Provide 20+ high quality general purpose components
- 🛠 Components are very flexible
- 🛠️ Support color customization
- 💡 Support WebStorm syntax highlighting
- 💡 Support the Typescript
You can install Your UI Library Name via npm:
npm install --save astraea-ui
Import required astraea-ui components within src/App.js file or your custom component files:
import { Button } from 'astraea-ui'
--astraea-ui-color-primary-main
: Specifies the primary color used throughout the library.--astraea-ui-color-primary-light
: Specifies a lighter shade of the primary color.--astraea-ui-color-primary-dark
: Specifies a darker shade of the primary color.--astraea-ui-color-secondary-main
: Specifies the secondary color used throughout the library.--astraea-ui-color-secondary-light
: Specifies a lighter shade of the secondary color.--astraea-ui-color-secondary-dark
: Specifies a darker shade of the secondary color.--astraea-ui-color-info-main
: Specifies the info color used throughout the library.--astraea-ui-color-success-main
: Specifies the success color used throughout the library.--astraea-ui-color-error-main
: Specifies the error color used throughout the library.--astraea-ui-color-warning-main
: Specifies the warning color used throughout the library.--astraea-ui-color-muted-main
: Specifies the muted color used throughout the library.
--astraea-ui-shadow-elevation-1
: Defines a subtle shadow effect with a low elevation.--astraea-ui-shadow-elevation-2
: Offers a slightly stronger shadow effect.--astraea-ui-shadow-elevation-3
: Provides a more pronounced shadow effect.--astraea-ui-shadow-elevation-4
: Introduces a strong shadow effect with a substantial elevation.--astraea-ui-shadow-elevation-5
: Represents the highest elevation.
--astraea-ui-border-radius-small
: Specifies the small border radius for elements.--astraea-ui-border-radius-small
: Specifies the medium border radius for elements.--astraea-ui-border-radius-small
: Specifies the large border radius for elements.
To customize the appearance of elements in your application, simply override these CSS variables with your desired values in your stylesheet.
:root {
--astraea-ui-color-primary-main: #007bff;
--astraea-ui-color-secondary-main: #6c757d;
/* Add more customizations here */
}