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

``bash
npm install orange-core-ui
`

Quick Start

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

export default function MyComponent() {
return (


Welcome



Submit


);
}
`

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

$3

- 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

$3

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

$3

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

$3

- Navbar - Navigation component
- Dropdown - Dropdown menu

Usage Examples

$3

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

Primary Button
Secondary Button
Outline Button
Large Button
`

$3

`tsx
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'),
});

schema={schema}
defaultValues={{ email: '', name: '' }}
onSubmit={(data) => console.log(data)}
>
{(methods) => (
<>
control={methods.control}
name="email"
render={({ field, fieldState }) => (

Email



)}
/>
Submit

)}

`

$3

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



Card Title




Card content goes here




Action


`

Styling

$3

You must import the library styles in your application:

`tsx
import 'orange-core-ui/styles';
`

$3

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

`js
// 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:

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

const MyButton: React.FC = (props) => {
return ;
};
`

Peer Dependencies

This library requires the following peer dependencies:

`json
{
"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:

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

Next.js Integration

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

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

module.exports = nextConfig;
`

Development

$3

`bash
cd orange-core-ui
npm run build
`

$3

`bash
npm run test
`

$3

`bash
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