Orange Core UI

A React component library built with Tailwind CSS that strictly adheres to Orange Design System guidelines. The library supports Next.js 15+, React 19 Server Components, and can be easily integrated into any React project.

Installation

npm install orange-core-ui

Quick Start

import { Button, Input, Card } from 'orange-core-ui';
import 'orange-core-ui/styles';

export default function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Enter your name" />
        <Button variant="primary">Submit</Button>
      </CardContent>
    </Card>
  );
}

Features

• 🎨 Strict Design Compliance - Follows Orange Design System guidelines exactly
• ⚛️ React 19+ with Server Component support
• 🚀 Next.js 15+ App Router compatible
• 🎯 TypeScript - Full type safety
• ♿ Accessible - WCAG 2.1 AA compliant
• 📝 Form Validation - React Hook Form + Zod integration
• 🎨 Tailwind CSS - Utility-first styling with Orange design tokens

Components

Form Components

• Button - All variants (primary, secondary, success, danger, warning, info, light, dark, outline)
• Input - Text inputs with validation states
• Form - React Hook Form + Zod integration
• FormField, FormItem, FormLabel, FormMessage, FormDescription - Form building blocks

Layout Components

• Card - Container component with header, body, footer
• Container - Responsive container
• Grid & GridItem - Responsive grid system
• Typography - Heading and text components

Feedback Components

• Alert - Notification messages with variants
• Modal - Dialog component

Navigation Components

• Navbar - Navigation component
• Dropdown - Dropdown menu

Usage Examples

Button

import { Button } from 'orange-core-ui';

<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline-primary">Outline Button</Button>
<Button size="lg">Large Button</Button>

Form with Validation

import { Form, FormField, FormItem, FormLabel, FormMessage, Input, Button } from 'orange-core-ui';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Invalid email'),
  name: z.string().min(2, 'Name must be at least 2 characters'),
});

<Form
  schema={schema}
  defaultValues={{ email: '', name: '' }}
  onSubmit={(data) => console.log(data)}
>
  {(methods) => (
    <>
      <FormField
        control={methods.control}
        name="email"
        render={({ field, fieldState }) => (
          <FormItem>
            <FormLabel required>Email</FormLabel>
            <Input {...field} type="email" error={fieldState.invalid} />
            <FormMessage error={fieldState.error?.message} />
          </FormItem>
        )}
      />
      <Button type="submit">Submit</Button>
    </>
  )}
</Form>

Card

import { Card, CardHeader, CardTitle, CardContent, CardFooter } from 'orange-core-ui';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Card content goes here</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Styling

Import Styles

You must import the library styles in your application:

import 'orange-core-ui/styles';

Tailwind Configuration

The library uses Tailwind CSS with Orange design tokens. Your project should have Tailwind configured:

// tailwind.config.js
module.exports = {
  content: [
    './node_modules/orange-core-ui/dist/**/*.{js,ts,jsx,tsx}',
    // ... your other content paths
  ],
  // ... rest of your config
};

Design System Compliance

All components strictly follow:

• Orange Design System color palette
• Orange spacing scale (1.25rem base = 20px)
• Orange typography system
• Boosted Bootstrap component variants
• WCAG 2.1 AA accessibility standards

TypeScript Support

Full TypeScript support with exported types:

import { Button, type ButtonProps } from 'orange-core-ui';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Peer Dependencies

This library requires the following peer dependencies:

{
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "react-hook-form": "^7.0.0",
  "zod": "^3.22.0",
  "@hookform/resolvers": "^3.3.0"
}

Install them in your project:

npm install react react-dom react-hook-form zod @hookform/resolvers

Next.js Integration

For Next.js projects, configure transpilePackages in next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['orange-core-ui'],
};

module.exports = nextConfig;

Development

Building the Library

cd orange-core-ui
npm run build

Running Tests

npm run test

Storybook

npm run storybook

Documentation

• Design System: Orange Design System
• Boosted Docs: Boosted Bootstrap

License

MIT

Contributing

This library follows strict Orange Design System guidelines. All components must:

• Use Orange design tokens exclusively
• Follow WCAG 2.1 AA accessibility standards
• Include comprehensive tests
• Be documented in Storybook