@start-base/react-form-elements

Unlock a robust collection of form-focused React components, thoughtfully crafted for maximum ease of use and flexibility. Built with Next.js compatibility, these components streamline the website development process, enhancing efficiency and empowering you to create custom, user-friendly forms effortlessly.

--- ![](form.gif) ## Documentation For full documentation, please visit [start-ui.startbase.dev](https://start-ui.startbase.dev/docs). ## Installation To install, you can use [npm](https://npmjs.org) or [yarn](https://yarnpkg.com): ```bash title='Terminal' $ npm install @start-base/react-form-elements # or $ yarn add @start-base/react-form-elements ``` Make sure to import `styles.css` to your app root: ```tsx import '@start-base/react-form-elements/styles.css'; ``` ## Features - CSS variables for theming. - Classnames for fine tuning. - Built-in dark mode support. - Variants for different styles. ## Styling ### With CSS Variables You can use CSS variables to customize the look and feel of the components. Here's a list of all available variables: ```css title="global.css" --rfe-transparent: transparent; --rfe-white: #fff; --rfe-white-rgb: 255 255 255; --rfe-black: #000; --rfe-black-rgb: 0 0 0; --rfe-color: #000; --rfe-color-placeholder: #646464; --rfe-color-error: #ff383e; --rfe-border: #e6e6e6; --rfe-background: #fafafa; --rfe-background-selected: #f0f0f0; --rfe-background-disabled: #e1e1e1; --rfe-border-radius: 6px; --rfe-font-size: 16px; --rfe-placeholder-font-size: 14px; --rfe-focused-font-size: 12px; --rfe-error-font-size: 12px; --rfe-input-height: 56px; --rfe-spacing: 16px; --rfe-label-spacing: 10px; --rfe-focus: 0 0 10px #dcdcdc; --rfe-font-family: 'Arial', sans-serif; ``` ### With Classnames You can use classnames to customize the look and feel of the components. Here's an example of how to use classnames: ```css title="CustomInput.module.scss" .input { &:focus { } } .label { } ``` ```jsx title="CustomInput.js" import { forwardRef } from 'react'; import Input from '@start-base/react-form-elements/Input'; import styles from './CustomInput.module.scss'; const CustomInput = forwardRef((props, ref) => ( )); export default CustomInput; ``` Or for all form elements you can use single css file. ```css title="FormElements.module.scss" .input { &:focus { } } .inputFocused { } ``` ## Demos For live demos, please visit our [Storybook](https://react-form-elements-eosin.vercel.app/) page. ## Contributing Contributions are welcomed. Feel free to submit pull requests and improvements to the project!

_yunusozcan

_emreonursoy