@ourtrip/ui v1.0.17
@ourtrip/ui
A modern React component library built with Tailwind CSS, providing a comprehensive set of UI components for building beautiful and responsive user interfaces.
Installation
# Using npm
npm install @ourtrip/ui
# Using yarn
yarn add @ourtrip/ui
# Using pnpm
pnpm add @ourtrip/ui
Setup
Tailwind CSS Configuration
This component library requires Tailwind CSS. If you don't have it installed in your project, please follow the official Tailwind CSS installation guide.
Once Tailwind CSS is installed, update your tailwind.config.js
or tailwind.config.ts
file to include the following configuration:
/** @type {import('tailwindcss').Config} */
const config = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@ourtrip/ui/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [],
};
export default config;
This ensures Tailwind CSS processes the styles used in the @ourtrip/ui components.
Usage
Import components from the library as follows:
import { Button, Card, Input } from "@ourtrip/ui";
function App() {
return (
<Card>
<h2>Hello World</h2>
<Input label="Name" placeholder="Enter your name" />
<Button>Submit</Button>
</Card>
);
}
Components
Accordion
Expandable content sections for organizing information.
<Accordion title="Frequently Asked Questions" text="This is the content of the accordion" />
Alert
Provides contextual feedback messages for user actions.
<Alert type="success" variant="fill">
Your data has been successfully saved!
</Alert>
Props:
type
: 'info' | 'success' | 'danger' | 'warning'variant
: 'fill' | 'outline'
Badge
Compact element to represent status, count, or categorization.
<Badge type="success" size="normal">New</Badge>
Props:
type
: 'success' | 'warning' | 'danger' | 'info' | 'white' | 'primary' | 'secondary'size
: 'small' | 'normal' | 'large'icon
: ReactNode (optional)
Breadcrumbs
Navigation element to show the user's location in the site hierarchy.
const items = [
{ id: "1", text: "Home", href: "/" },
{ id: "2", text: "Products", href: "/products" },
{ id: "3", text: "Product Details", href: "/products/1" }
];
<Breadcrumbs items={items} />
Button
Interactive element for user actions.
<Button
variant="fill"
color="primary"
size="normal"
onClick={() => console.log('Button clicked!')}
>
Click Me
</Button>
Props:
variant
: 'fill' | 'outline'color
: 'primary' | 'secondary' | 'danger' | 'gray' | 'white'size
: 'small' | 'normal' | 'large' | 'icon'loading
: booleandisabled
: booleanfullWidth
: boolean
Card
Container for content with predefined styling.
<Card>
<h3>Card Title</h3>
<p>Card content goes here</p>
</Card>
Checkbox
Selection component for multiple choices.
<Checkbox
label="I agree to terms and conditions"
onChange={(checked) => console.log(checked)}
/>
Props:
value
: booleanonChange
: (checked: boolean) => voidlabel
: ReactNodetrailing
: string | number (optional)
Collapse
Toggleable content area.
<Collapse
title="More Information"
content="This content can be hidden or shown"
togglePosition="bottom"
showPreview={true}
/>
Divider
Horizontal or vertical line to separate content.
<Divider orientation="horizontal" />
Props:
orientation
: 'horizontal' | 'vertical'fullHeight
: boolean
Input
Text input field for user data entry.
<Input
label="Email Address"
placeholder="Enter your email"
type="email"
color="gray"
/>
Props:
label
: stringcolor
: 'white' | 'gray'error
: stringdisabled
: boolean
Modal
Dialogs for important information or actions.
const [isOpen, setIsOpen] = useState(false);
<>
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
showCloseButton={true}
>
<h3>Modal Title</h3>
<p>Modal content</p>
</Modal>
</>
PhoneInput
Specialized input for phone numbers with country codes.
<PhoneInput
t={translation}
DDI="+55"
phoneDDIKey="phone.ddi"
phoneAreaCodeKey="phone.areaCode"
phoneNumberKey="phone.number"
registerWithMask={registerWithMask}
setFocus={setFocus}
errors={errors}
/>
Popover
Floating content that appears on interaction.
<Popover>
<PopoverTrigger asChild>
<Button>Open Popover</Button>
</PopoverTrigger>
<PopoverContent>
<p>Popover content</p>
</PopoverContent>
</Popover>
Radio
Selection component for single choices.
<Radio label="Option 1" name="options" value="1" />
<Radio label="Option 2" name="options" value="2" />
Props:
label
: stringsize
: 'small' | 'normal' | 'large'
Range
Slider for selecting a value or range.
<Range
min={0}
max={100}
initialValues={[20, 80]}
onChange={(values) => console.log(values)}
/>
Select
Dropdown selection component.
<Select>
<SelectTrigger>
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
</SelectContent>
</Select>
Sheet
Slide-in panel from the edge of the screen.
<Sheet>
<SheetTrigger asChild>
<Button>Open Sheet</Button>
</SheetTrigger>
<SheetContent side="right">
<h3>Sheet Title</h3>
<p>Sheet content</p>
</SheetContent>
</Sheet>
Stars
Rating component for displaying ratings.
<Stars rate={4.5} />
StepMarker
Visual indicator for multi-step processes.
<StepMarker
step={1}
title="Personal Information"
subtitle="Enter your details"
checked={false}
active={true}
onClick={() => goToStep(1)}
/>
Switch
Toggle between two states.
<Switch
on={isEnabled}
onChange={(on) => setIsEnabled(on)}
label="Enable notifications"
/>
Tag
Label element for categorization.
<Tag color="primary" onClick={() => console.log('Tag clicked')}>
Featured
</Tag>
Props:
color
: 'primary' | 'secondary' | 'white'iconLeft
: ReactNodeiconRight
: ReactNode
Tooltip
Information that appears on hover.
<Tooltip text="Additional information" active={true}>
<Button>Hover me</Button>
</Tooltip>
Utility Functions
The library provides some utility functions:
Validation
import { isValidEmail, isValidCpf, isFullName } from '@ourtrip/ui';
const isEmail = isValidEmail('user@example.com'); // Returns true
Available validation functions:
isValidCpf
: Validates a Brazilian CPFisValidCNPJ
: Validates a Brazilian CNPJisCPF
: Checks if a string is a valid CPFisCNPJ
: Checks if a string is a valid CNPJisFullName
: Validates if a string is a full nameisValidName
: Validates if a string is a valid nameisValidEmail
: Validates email formatisValidPhoneNumber
: Validates phone number formatisValidNumberCode
: Validates a numeric codeisValidDDD
: Validates Brazilian area codesisValidChildDate
: Validates if a date is for a minorisValidAdult
: Validates if a date is for an adult
Classes
import { cn } from '@ourtrip/ui';
const className = cn('base-class', condition && 'conditional-class');
Browser Support
This library supports modern browsers including:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
License
ISC
Dependencies
This library builds on several excellent packages including:
- React and React DOM
- @phosphor-icons/react
- Radix UI components
- Tailwind CSS
- Framer Motion
- date-fns
You don't need to install these dependencies separately as they are included in the package.
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago