Installation & Usage

Get started with Reactify and integrate beautiful, accessible components into your project.

Installation

Follow these simple steps to add Reactify to your project.

Reactify components are designed to be easily integrated. Currently, they are part of this starter project. If this were an external library, you would typically install it via npm or yarn:

1# Using npm 
2npm install @reactify/components 
3  
4# Using yarn 
5yarn add @reactify/components

Since the components are included locally in @/components/reactify, you can directly import them.

Basic Usage

Learn how to import and use Reactify components in your application.

Import any Reactify component into your React/Next.js files and use them like standard components:

1import { ReactifyButton } from '@/components/reactify/button'; 
2import { ReactifyInput } from '@/components/reactify/input'; 
3  
4function MyFormComponent() { 
5  return ( 
6    <form> 
7      <label htmlFor="name">Name:</label> 
8      <ReactifyInput type="text" id="name" placeholder="Enter your name" /> 
9      <ReactifyButton variant="primary" type="submit" className="mt-4"> 
10        Submit 
11      </ReactifyButton> 
12    </form> 
13  ); 
14} 
15  
16export default MyFormComponent;

Each component comes with various props to customize its behavior and appearance. Check the "Components" page for detailed examples and prop lists for each component.

Theming

Customize the look and feel of Reactify components using CSS variables.

Reactify uses CSS custom properties (variables) for styling, primarily defined in src/app/globals.css. You can override these variables to create custom themes.

1:root { 
2  /* Primary Colors */ 
3  --primary: 209 100% 60%; /* HSL value for Deep Sky Blue */ 
4  --primary-foreground: 210 40% 98%; 
5  
6  /* Accent Colors */ 
7  --accent: 266 100% 46%; /* HSL value for Electric Indigo */ 
8  --accent-foreground: 210 40% 98%; 
9  
10  /* Background & Foreground */ 
11  --background: 210 29% 95%; /* Light Gray */ 
12  --foreground: 222.2 84% 4.9%; 
13   
14  /* ... and more for border, input, card, etc. */ 
15}

Visit the "Theming" page for an interactive demonstration of how changing these variables affects the components live. The theme switcher tool allows you to use hex color codes as well.

Key Principles

Unstyled Core: Components provide structure and behavior, with minimal opinionated styling, allowing easy integration into any design system.

Accessibility: Built with WAI-ARIA standards in mind, ensuring components are usable by everyone, including those using assistive technologies.

Composability: Designed to be mixed and matched to build complex UIs.

Developer Experience: Clear props, good documentation (like this page!), and TypeScript support make development smoother.