@gofynd/nitrozen-react
A React component library inspired from Nitrozen design system
🤔 Getting started
To install @gofynd/nitrozen-react
in your project, you will need to run the following
command using npm:
npm install -S @gofynd/nitrozen-react
If you prefer Yarn, use the following command instead:
yarn add @gofynd/nitrozen-react
- Nitrozen component library can be consumed by all React / React with Typescript projects.
Usage
The @gofynd/nitrozen-react
package provides components and icons for the Nitrozen Design
System.
To use a component, you can import it directly from the package:
import { Button } from "@gofynd/nitrozen-react";
function MyComponent() {
return <Button rounded>Button</Button>;
}
Example:
🚨 Note:
The library uses default font size as 10px. Hence if you are planning to use 10px as base font size, you need to add the same to your code as well.
html,
body {
font-size: 10px;
}
If you wish to use any other base font-size apart from 10px, you need to add these following:
:root {
--BaseFontSize: <your font size>; /* number as integer without unit */
}
html,
body {
font-size: <your font size>; /* number with unit */
}
🔥 Components List:
- Alert
- Autocomplete
- Badge
- Button
- Card
- Checkbox
- OTP Code Input
- Chip
- Checkbox
- Dialog
- Dropdown
- Icon
- Input
- Menu
- Validation Text
- Pagination
- Radio
- Nudge
- Stepper
- Tab
- ToggleBtn
- Tooltip
- Toast
- Table
- Grid
- Typography
For a full list of components available & it's detailed documentation, checkout our Storybook.
🏆 Contributors
- Rohan Shah
- Aayush Jain
- Aadesh Kulkarni
- Roshan Prajapt
- Sujoy Dev
- Amarjit Singh
- Rushabh Shah
- Ashutosh Kumar
- Raj Savsani
- Meet Dhanani
- Ritik Soni
- Kinshuk Shah
- Saurabh Mamidwar
- Rupesh Aagde
- Zissan Chowdhary
- Pooran Suthar
- Rakesh Yadav
- Dipanshu Suman
- Subhomoy Choudhury
📖 API Documentation
If you're looking for @gofynd/nitrozen-react
API documentation, check out:
📝 License
Licensed under the Apache 2.0 License