infinity-ui-elements
Advanced tools
A comprehensive React TypeScript component library with a modern design system built on Tailwind CSS. Perfect for building consistent, accessible, and beautiful user interfaces for Infinity products.
Infinity UI Elements is not just a component library—it's a complete design system that serves as the single source of truth for all design tokens, CSS variables, and styling for Infinity products.
When you integrate this library:
yarn upgrade infinity-ui-elements to get latest design changesimport 'infinity-ui-elements/dist/index.css';
This single import gives you access to hundreds of CSS variables:
/* Colors (300+ tokens) */
var(--color-teal-500)
var(--color-action-fill-primary-default)
var(--color-surface-ink-neutral-normal)
/* Typography */
var(--font-functional)
var(--text-200)
var(--leading-500)
/* Spacing */
var(--spacing-5)
var(--size-32)
/* Borders & Radius */
var(--border-width-thin)
var(--radius-large)
Use these variables anywhere in your custom CSS—no need to redefine them!
📚 See DESIGN_TOKENS.md for complete reference
🚀 See INTEGRATION.md for integration guide
yarn add infinity-ui-elements
# or
npm install infinity-ui-elements
Install the required peer dependencies:
yarn add react react-dom clsx tailwind-merge class-variance-authority
# or
npm install react react-dom clsx tailwind-merge class-variance-authority
For Table component (optional):
yarn add @tanstack/react-table
In your main application file (e.g., App.tsx or index.tsx):
import 'infinity-ui-elements/dist/index.css';
import { Button, TextField, Badge } from 'infinity-ui-elements';
function App() {
return (
<div>
<Button variant="primary" color="primary">
Get Started
</Button>
<TextField
label="Email"
placeholder="Enter your email"
type="email"
/>
<Badge color="positive" variant="light">
Active
</Badge>
</div>
);
}
The library uses custom utility classes that are pre-built. Configure your Tailwind setup to avoid conflicts:
// tailwind.config.js
export default {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
// Don't include node_modules - CSS is already compiled
],
}
// tailwind.config.js
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
],
safelist: [
{ pattern: /^(font-size|leading|font-functional|font-display|text-surface|text-action|bg-action|border-action)/ },
],
}
A versatile button component with multiple variants, colors, sizes, and loading states.
Key Features:
primary, secondary, tertiaryprimary, positive, negative, notice, info, neutralxsmall, small, medium, largeimport { Button } from 'infinity-ui-elements';
<Button variant="primary" color="positive" size="medium">
Save Changes
</Button>
<Button variant="secondary" color="negative" isLoading>
Deleting...
</Button>
<Button variant="tertiary" leadingIcon={<PlusIcon />}>
Add Item
</Button>
A text input component with validation, icons, and helper text.
Key Features:
positive, negativeimport { TextField } from 'infinity-ui-elements';
<TextField
label="Email Address"
placeholder="Enter your email"
type="email"
isRequired
helperText="We'll never share your email"
showClearButton
/>
<TextField
label="Amount"
prefix="$"
suffix="USD"
validationState="positive"
successText="Valid amount"
/>
A multi-line text input with auto-resize capability.
Key Features:
import { TextArea } from 'infinity-ui-elements';
<TextArea
label="Description"
placeholder="Enter description..."
rows={4}
maxLength={500}
showCharCount
/>
A dropdown select component with keyboard navigation.
Key Features:
import { Select } from 'infinity-ui-elements';
const options = [
{ value: 'us', label: 'United States' },
{ value: 'uk', label: 'United Kingdom' },
{ value: 'ca', label: 'Canada' },
];
<Select
label="Country"
options={options}
placeholder="Select a country"
onChange={(value, option) => console.log(value)}
showClearButton
/>
An advanced dropdown with built-in search functionality.
Key Features:
import { SearchableDropdown } from 'infinity-ui-elements';
<SearchableDropdown
label="Select Users"
options={users}
searchable
placeholder="Search users..."
onChange={(selected) => setSelectedUsers(selected)}
/>
A checkbox component with indeterminate state support.
Key Features:
small, medium, largeimport { Checkbox } from 'infinity-ui-elements';
<Checkbox
label="Accept terms and conditions"
isRequired
validationState="error"
errorText="You must accept the terms"
/>
<Checkbox
label="Select all"
isIndeterminate={someSelected && !allSelected}
checked={allSelected}
/>
A radio button component for single selection.
Key Features:
import { Radio } from 'infinity-ui-elements';
<Radio
label="Option 1"
name="choice"
value="option1"
checked={selected === 'option1'}
onChange={(e) => setSelected(e.target.value)}
/>
A toggle switch component for boolean states.
Key Features:
import { Switch } from 'infinity-ui-elements';
<Switch
label="Enable notifications"
checked={isEnabled}
onChange={(checked) => setIsEnabled(checked)}
/>
A powerful data table built on TanStack Table with advanced features.
Key Features:
import { Table } from 'infinity-ui-elements';
import { useReactTable, getCoreRowModel, createColumnHelper } from '@tanstack/react-table';
const columnHelper = createColumnHelper<User>();
const columns = [
columnHelper.accessor('name', {
header: 'Name',
cell: info => info.getValue(),
}),
columnHelper.accessor('email', {
header: 'Email',
}),
];
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
});
<Table
table={table}
enableRowSelection
showRowHover
stickyHeader
detailPanel={(row) => <UserDetails user={row.original} />}
/>
A small status indicator component.
Key Features:
light, filledsmall, medium, largeimport { Badge } from 'infinity-ui-elements';
<Badge variant="filled" color="positive">
Active
</Badge>
<Badge variant="light" color="notice" showDot>
Pending
</Badge>
A user avatar component with status indicators.
Key Features:
small, mediumimport { Avatar } from 'infinity-ui-elements';
<Avatar
src="/user-avatar.jpg"
alt="John Doe"
size="medium"
showStatus
statusColor="positive"
/>
<Avatar color="a1" size="small">
JD
</Avatar>
<Avatar
src="/user.jpg"
label="John Doe"
trailingComponent={<ChevronDown />}
/>
A numeric counter with increment/decrement controls.
Key Features:
import { Counter } from 'infinity-ui-elements';
<Counter
value={count}
onChange={setCount}
min={0}
max={100}
step={1}
/>
A typography component with consistent styling.
Key Features:
display, heading, body, label, captionregular, medium, semibold, boldas propimport { Text } from 'infinity-ui-elements';
<Text variant="heading" size="xlarge" weight="bold">
Welcome Back
</Text>
<Text variant="body" size="medium" color="muted">
This is a description
</Text>
<Text variant="label" as="label" htmlFor="input-id">
Field Label
</Text>
A styled link component with various visual states.
Key Features:
import { Link } from 'infinity-ui-elements';
<Link href="/dashboard" variant="primary">
Go to Dashboard
</Link>
<Link href="https://example.com" external>
Visit Website
</Link>
Tab navigation components for organizing content.
Key Features:
import { Tabs, TabItem } from 'infinity-ui-elements';
<Tabs>
<TabItem active>Overview</TabItem>
<TabItem>Settings</TabItem>
<TabItem disabled>Analytics</TabItem>
</Tabs>
A pagination component for navigating through pages.
Key Features:
import { Pagination } from 'infinity-ui-elements';
<Pagination
currentPage={page}
totalPages={10}
onPageChange={setPage}
showFirstLast
/>
A component for grouping related buttons.
Key Features:
import { ButtonGroup, Button } from 'infinity-ui-elements';
<ButtonGroup>
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Save</Button>
</ButtonGroup>
A visual separator component.
Key Features:
import { Divider } from 'infinity-ui-elements';
<Divider />
<Divider orientation="vertical" />
<Divider>OR</Divider>
A modal dialog component for overlays.
Key Features:
import { Modal } from 'infinity-ui-elements';
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Confirm Action"
description="Are you sure you want to proceed?"
size="medium"
footer={
<>
<Button variant="secondary" onClick={() => setIsOpen(false)}>
Cancel
</Button>
<Button variant="primary" onClick={handleConfirm}>
Confirm
</Button>
</>
}
>
<p>Modal content goes here...</p>
</Modal>
A tooltip component for displaying contextual information.
Key Features:
import { Tooltip } from 'infinity-ui-elements';
<Tooltip content="This is helpful information">
<Button>Hover me</Button>
</Tooltip>
A list item component for building lists.
Key Features:
import { ListItem } from 'infinity-ui-elements';
<ListItem
leadingIcon={<UserIcon />}
title="John Doe"
description="john@example.com"
trailingContent={<ChevronRight />}
onClick={() => console.log('Clicked')}
/>
A form header component with label and info tooltip.
Key Features:
import { FormHeader } from 'infinity-ui-elements';
<FormHeader
label="Email Address"
isRequired
infoHeading="Why we need this"
infoDescription="We use your email for account recovery"
linkText="Privacy Policy"
linkHref="/privacy"
/>
A form footer component for helper text and validation messages.
Key Features:
import { FormFooter } from 'infinity-ui-elements';
<FormFooter
helperText="Password must be at least 8 characters"
validationState="negative"
/>
A flexible dropdown menu component.
Key Features:
import { Dropdown } from 'infinity-ui-elements';
<Dropdown
trigger={<Button>Options</Button>}
items={[
{ title: 'Edit', onClick: handleEdit },
{ title: 'Delete', onClick: handleDelete, color: 'negative' },
]}
/>
After importing the library CSS, use design tokens anywhere in your application:
/* YourCustomComponent.css */
.my-card {
background: var(--color-surface-fill-neutral-intense);
border: var(--border-width-thin) solid var(--color-surface-outline-neutral-muted);
border-radius: var(--radius-large);
padding: var(--spacing-7);
color: var(--color-surface-ink-neutral-normal);
}
.my-button {
background: var(--color-action-fill-primary-default);
color: var(--color-action-ink-on-primary-normal);
padding: var(--spacing-3) var(--spacing-6);
font-family: var(--font-functional);
font-size: var(--text-100);
border-radius: var(--radius-medium);
}
.my-button:hover {
background: var(--color-action-fill-primary-hover);
}
<div style={{
backgroundColor: 'var(--color-teal-500)',
padding: 'var(--spacing-5)',
borderRadius: 'var(--radius-medium)',
fontFamily: 'var(--font-functional)',
}}>
Styled with design tokens
</div>
Only override if absolutely necessary for app-specific themes:
/* app-overrides.css - Import AFTER the library CSS */
:root {
/* Override specific tokens for your app */
--app-specific-color: var(--color-teal-700);
}
⚠️ Important: Do NOT duplicate design tokens in your app. Always use the tokens from this package to maintain consistency. When designers make changes, update the package version to get the latest design system.
📚 Complete Token Reference: See DESIGN_TOKENS.md for all available variables.
# Install dependencies
yarn install
# Start Storybook for development
yarn storybook
# Build the library
yarn build
# Type checking
yarn type-check
src/
├── components/ # All UI components
│ ├── Button/
│ │ ├── Button.tsx # Component implementation
│ │ ├── Button.stories.tsx # Storybook stories
│ │ └── index.ts # Exports
│ └── ...
├── lib/ # Utilities and helpers
│ ├── utils.ts # Utility functions
│ └── icons.tsx # Icon system
├── styles/ # Global styles
│ ├── theme/ # Theme variables
│ ├── animations.css # Animations
│ └── utilities/ # Utility classes
└── index.ts # Main entry point
src/components/index.tssrc/index.tsView interactive documentation and examples:
yarn storybook
Or visit the deployed Storybook (if available).
# For bug fixes (1.0.0 -> 1.0.1)
yarn publish:patch
# For new features (1.0.0 -> 1.1.0)
yarn publish:minor
# For breaking changes (1.0.0 -> 2.0.0)
yarn publish:major
# For beta releases
yarn publish:beta
# 1. Login to npm
npm login
# 2. Update version
yarn version:patch # or version:minor, version:major
# 3. Build
yarn build
# 4. Publish
npm publish
yarn type-check)Contributions are welcome! Please follow these guidelines:
git checkout -b feature/amazing-featuregit commit -m 'Add amazing feature'git push origin feature/amazing-featureindex.ts)MIT © Himanshu Barmola
cn() utility for conditional classesimport 'infinity-ui-elements/dist/index.css'className propNeed help? Have questions?
Built with:
Made with ❤️ by the Infinity Team
FAQs
A React TypeScript component library with Tailwind CSS design system
We found that infinity-ui-elements demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.