https://github.com/antoniozanotti/topaz-react
UI component library based on tailwindcss, heroicons.
https://github.com/antoniozanotti/topaz-react
css frontend html javascript jest microfrontend nextjs nodejs react storybook tailwindcss test-automation testing-library typescript ui-components unit-testing
Last synced: 3 months ago
JSON representation
UI component library based on tailwindcss, heroicons.
- Host: GitHub
- URL: https://github.com/antoniozanotti/topaz-react
- Owner: antoniozanotti
- License: mit
- Created: 2023-11-09T18:23:04.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-23T20:14:43.000Z (over 1 year ago)
- Last Synced: 2025-10-19T11:35:43.356Z (9 months ago)
- Topics: css, frontend, html, javascript, jest, microfrontend, nextjs, nodejs, react, storybook, tailwindcss, test-automation, testing-library, typescript, ui-components, unit-testing
- Language: TypeScript
- Homepage: https://topaz-react.netlify.app/
- Size: 1.25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Welcome to Topaz for React Projects ;)
UI component library based on [tailwindcss](https://tailwindcss.com/), [heroicons](https://heroicons.com/). Topaz is a [MIT licensed](https://opensource.org/license/mit/) project that is developed and maintained by [Antônio Zanotti](https://www.linkedin.com/in/antoniozanotti/).
# Install Topaz React
```sh
npm i -D topaz-react
```
Install Tailwind CSS [(instructions here)](https://tailwindcss.com/docs/installation)
Update the tailwind.config.ts file:
```ts
import type { Config } from "tailwindcss";
import presetTopazReact from "topaz-react/src/preset/tailwind-preset-topaz-react";
const config: Config = {
content: ["./node_modules/topaz-react/src/components/**/*.{js,ts,jsx,tsx,mdx}"],
presets: [presetTopazReact],
};
export default config;
```
That's all! Topaz's components can be imported in your .tsx files.
```jsx
import { TzButton } from 'topaz-react';
export default function Home() {
return ;
}
```
# Tailwind CSS Preset Topaz React
You can customize **colours** and **font sizes**, just update the tailwind.config.ts file.
```ts
import type { Config } from "tailwindcss";
import presetTopazReact from "topaz-react/src/preset/tailwind-preset-topaz-react";
const config: Config = {
content: ["./node_modules/topaz-react/src/components/*.{js,ts,jsx,tsx,mdx}"],
presets: [presetTopazReact],
theme: {
fontSize: {
c1: '10px',
c2: '12px',
c3: '14px',
c4: '16px',
c5: '20px',
c6: '24px',
c7: '32px',
c8: '36px',
c9: '40px',
c10: '48px',
c11: '64px',
c12: '96px',
},
colors: {
accent: {
DEFAULT: '#0891B2',
1: '#06B6D4',
2: '#22D3EE',
},
'dark-accent': {
DEFAULT: '#22D3EE',
1: '#06B6D4',
2: '#0891B2',
},
primary: {
DEFAULT: '#083344',
1: '#164E63',
2: '#155E75',
},
'dark-primary': {
DEFAULT: '#E2E8F0',
1: '#CBD5E1',
2: '#94A3B8',
},
secondary: {
DEFAULT: '#94A3B8',
1: '#CBD5E1',
2: '#E2E8F0',
},
'dark-secondary': {
DEFAULT: '#155E75',
1: '#164E63',
2: '#083344',
},
negative: {
DEFAULT: '#B91C1C',
1: '#DC2626',
2: '#EF4444',
},
'dark-negative': {
DEFAULT: '#EF4444',
1: '#DC2626',
2: '#B91C1C',
},
dark: {
DEFAULT: '#E5E7EB',
1: '#F3F4F6',
2: '#FFFFFF',
},
'dark-dark': {
DEFAULT: '#000000',
1: '#111827',
2: '#1F2937',
},
light: {
DEFAULT: '#000000',
1: '#111827',
2: '#1F2937',
},
'dark-light': {
DEFAULT: '#FFFFFF',
1: '#F3F4F6',
2: '#E5E7EB',
},
'inverse-accent': '#000000',
'inverse-dark-accent': '#000000',
'inverse-primary': '#FFFFFF',
'inverse-dark-primary': '#000000',
'inverse-secondary': '#000000',
'inverse-dark-secondary': '#FFFFFF',
'inverse-negative': '#FFFFFF',
'inverse-dark-negative': '#000000',
'inverse-dark': '#000000',
'inverse-dark-dark': '#FFFFFF',
'inverse-light': '#FFFFFF',
'inverse-dark-light': '#000000',
},
},
};
export default config;
```
### Design Point of View
The components was designed to work with these variants:
Light Theme:
- **accent**: colors for greatest emphasis.
- **primary**: colors for medium emphasis.
- **secondary**: colors for lowest emphasis.
- **negative**: colors for emphasizing actions that can be destructive.
- **dark**: light colors.
- **light**: dark colors.
- **inverse-accent**: text color above a accent background.
- **inverse-primary**: text color above a primary background.
- **inverse-secondary**: text color above a secondary background.
- **inverse-negative**: text color above a negative background.
- **inverse-dark**: text color above a dark background.
- **inverse-light**: text color above a light background.
Dark Theme:
- **dark-accent**: accent colors on dark theme.
- **dark-primary**: primary colors on dark theme.
- **dark-secondary**: secondary colors on dark theme.
- **dark-negative**: negative colors on dark theme.
- **dark-dark**: light colors.
- **dark-light**: dark colors.
- **inverse-dark-accent**: text color above a accent background on dark theme.
- **inverse-dark-primary**: text color above a primary background on dark theme.
- **inverse-dark-secondary**: text color above a secondary background on dark theme.
- **inverse-dark-negative**: text color above a negative background on dark theme.
- **inverse-dark-dark**: text color above a dark background on dark theme.
- **inverse-dark-light**: text color above a light background on dark theme.
**_You can use a [color contrast checker](https://colorkit.co/contrast-checker/) to help calculate the contrast. The colours dark-2 and dark-dark-2 are used for background._**
# Features
- **Components**: visit the [official documentation](https://topaz-react.netlify.app/) to see available components.
- **Dark and Light Theme**: it uses [class strategy](https://tailwindcss.com/docs/dark-mode) of [tailwindcss](https://tailwindcss.com/).
- **Responsive**: some components on screens larger than or equal to 1024px will be ~20% smaller than mobile version.
**_The colours swap with each other by 'dark-' prefix._**
# Inpired In
- [Spectrum](https://spectrum.adobe.com/), Adobe’s design system
- [Vitamin](https://github.com/Decathlon/vitamin-web), Decathlon's design system
- [Vuetify](https://github.com/vuetifyjs/vuetify), Vue Component Framework