@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:

• Storybook

📝 License

Licensed under the Apache 2.0 License