https://github.com/pablogeokar/zionix-ui
A collection of ready-to-use components based on styled-components
https://github.com/pablogeokar/zionix-ui
css-modules-react nextjs react-ui react-ui-components reactjs ui-components
Last synced: 6 months ago
JSON representation
A collection of ready-to-use components based on styled-components
- Host: GitHub
- URL: https://github.com/pablogeokar/zionix-ui
- Owner: pablogeokar
- License: mit
- Created: 2022-12-31T11:32:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-15T21:55:40.000Z (over 3 years ago)
- Last Synced: 2025-09-13T05:34:41.758Z (10 months ago)
- Topics: css-modules-react, nextjs, react-ui, react-ui-components, reactjs, ui-components
- Language: TypeScript
- Homepage: https://zionix-ui.vercel.app/
- Size: 253 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Zionix-ui
A collection of ready-to-use components based on pure clean css modules 🚧 is under Construction!
THIS COMPONENT IS STILL BEING DEVELOPED, IF YOU WANT TO CONTRIBUTE YOU CAN CONTACT US.
🇧🇷 Alô galera do Brasil, esta biblioteca ainda está em construção, caso alguém queira ajudar é só me gritar 😀
## Quick start
Import into `pages/_app.ts` ThemeContextProvider and ThemeFont
First you will import the ThemeContextProvider and ThemeFont to the main page of your react project as in the example below,
ThemeFont is optional, if you already have your own font loading routine, this component can be safely left out.
🇧🇷 Primeiro você irá importar o ThemeContextProvider e o ThemeFont para a página principal do seu projeto react como no exemplo abaixo,
o ThemeFont é opcional, caso você já tenha sua própria rotina de carregamento de fontes, este componente poderá ficar de fora tranquilamente.
Alô galera do meu Braza lembrem-se de incluir no header do seu html a tag acima para que a responsividade funcione corretamente.
```js
import { ThemeContextProvider, ThemeFont } from "@zionix/ui";
{/*ThemeFont is optional*/}
```
An important detail, I know that many know but it is worth remembering once again, for correct responsiveness it is mandatory to insert the tag below in the header of your html.
```html
```
Using the example above the default theme will be applied, to add your custom theme, our library also allows theme customization.
🇧🇷 Exemplo de como personalizar seu próprio tema
```js
import { ThemeContextProvider, ThemeFont, ThemeType } from "@zionix/ui";
// Minimal Example
const theme: ThemeType = {
colors: {
body: "#f5f5f5",
black: "#333333",
white: "#ffffff",
primary: "#6A5ACD",
secondary: "#B8860B",
accent: "#ff5252",
lightGray: "#bbbbbb",
},
};
// Full Example
const themeWithFullOptions: ThemeType = {
colors: {
accent: "#f72585",
black: "#333333",
body: "#f5f5f5",
error: "#D32F2F",
lightGray: "#c4c4c4",
primary: "#0288D1",
secondary: "#616161",
success: "#689F38",
warning: "#FBC02D",
white: "#ffffff",
},
components: {
card: {
filter: "drop-shadow(0 5px 4px var(--lightGray))",
},
},
layout: {
borderRadius: "0.8rem",
gap: "1.6rem",
padding: "1.6rem",
},
sizes: {
text: "clamp(1.6rem, 1.250vw, 1.6rem)",
h1: "clamp(3.6rem, 2.6vw, 4.2rem)",
h2: "clamp(2.882rem, 2.08vw, 3.4rem)",
h3: "clamp(2.1rem, 1.6vw, 2.7rem)",
h4: "clamp(1.6rem, 1.250vw, 2.1rem)",
h5: "clamp(1.2rem, 1vw, 1.5rem)",
h6: "clamp(.9rem, 0.7vw, 1.1rem)",
},
};
```
### `useThemeContext`
You can access theme variables through useThemeContext, the sky is the limit on your creativity to build your own derived components.
🇧🇷 Você pode acessar as variáveis do tema através do useThemeContext, o céu é o limite da sua criatividade para construir seus próprios componentes derivados.
```js
import { useThemeContext } from "@zionix/ui";
const theme = useThemeContext();
console.log(theme.colors.primary);
```
### `Tabs`
```js
Content Tab #1,
},
{
iconName: "Code",
label: "Code",
component: Content Tab #2,
},
]}
/>
```
### `Marker`
```js
```
### `Text`
```js
Typography h1
Typography h1
Typography h2
Typography h3
Typography h4
Typography h5
Typography h6
Typography h6
Simple text with normal size
Simple text with normal size
```
### `Button`
Normal
```js
```
Disabled
```js
```
Loading
```js
```
Background transparent with inverted colors
```js
```
Background transparent with inverted colors and border none
```js
```
### `Icon`
Built-in [phosphor-icons](https://https://phosphoricons.com) icon pack, to see the full list of icons, go to the [phosphor-icons](https://https://phosphoricons.com) website and search for the icon you need.
```js
```
### `Input`
```js
```
### `Form`
```js
New user
alert('Hello World!')} />
```
### `Card`
```js
Hello,
```
Calm down guys, I'm still creating the components, I'm working alone and I can only work in the library in my spare time :D
### css vars
These are the global variables used by @zionix/ui and customize your own css components:
```css
root: {
--accent: #f72585;
--bg: #f5f5f5;
--black: #333333;
--danger: #d32f2f;
--lightGray: #c4c4c4;
--primary: #0288d1;
--secondary: #616161;
--success: #689f38;
--warning: #fbc02d;
--white: #ffffff;
--component-card--filter: drop-shadow(0 5px 4px var(--lightGray));
--borderRadius: 0.8rem;
--gap: 1.6rem;
--padding: 1.6rem;
}
```