Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lunarianss/ocean
Simple, Modular, Atomic & Accessible UI Components for your React Applications ⚡️ React UI 原子化组件库
https://github.com/lunarianss/ocean
accessible accessible-react ocean-ui react react-components react-hooks reactjs ui-component ui-library uikit
Last synced: 8 days ago
JSON representation
Simple, Modular, Atomic & Accessible UI Components for your React Applications ⚡️ React UI 原子化组件库
- Host: GitHub
- URL: https://github.com/lunarianss/ocean
- Owner: lunarianss
- License: mit
- Created: 2023-01-08T09:51:04.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-18T16:46:35.000Z (12 months ago)
- Last Synced: 2025-01-22T07:11:34.734Z (15 days ago)
- Topics: accessible, accessible-react, ocean-ui, react, react-components, react-hooks, reactjs, ui-component, ui-library, uikit
- Language: TypeScript
- Homepage: https://lunarianss.github.io/components/button
- Size: 1.86 MB
- Stars: 20
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Ocean UI
Build Accessible and Atomic CSS React Apps with Speed ⚡️
Ocean UI provides a set of accessible, reusable, and composable React
components that make it super easy to create websites and apps.
## Looking for the documentation? 📝
It's the website for the latest version of Ocean UI.
## Features 🚀
- Ease of Styling: Ocean UI contains a set of layout components like `ocean.div` that make it easy to style your components by passing props.
- Flexible & composable: Ocean UI components are built on top of a React UI
- Atomic & Speed
- Dark Mode 😍 and twenty colorScheme custom theme
## Support Ocean UI 💖
By donating \$1 or more you can support the ongoing development of this project.
We'll appreciate some support. Thank you to all our supporters! 🙏
## Installing Ocean UI
To use Ocean UI components, all you need to do is install the
`@cyan-ocean/ui` package:
```sh
$ yarn add @cyan-ocean/ui
# or
$ npm i @cyan-ocean/ui
```
## Usage
To start using the components, please follow these steps:
1. Wrap your application with the `GlobalThemeProvider` provided by
**@cyan-ocean/ui**.
```jsx
import { GlobalThemeProvider } from '@cyan-ocean/ui';
// Do this at the root of your application
function App({ children }) {
return {children};
}
```
2. Now you can start using components like so!:
```jsx
import { Button } from '@cyan-ocean/ui';
function Example() {
return I just consumed some ⚡️Chakra!;
}
```
More guides on how to get started are available
## CodeSandbox Templates
- JavaScript Starter: https://codesandbox.io/s/oceanui-pkw6v5
- TypeScript Starter: https://codesandbox.io/s/oceanui-pkw6v5
## Testing supported by
## License
MIT © [Cyan Benjamin](https://github.com/Ryan-eng-del)