A React TypeScript component library with Tailwind CSS design system
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.
- π¨ Comprehensive Design System: 25+ production-ready components with consistent styling
- π¦ Tree-shakable: ESM + CJS builds optimized with Rollup
- π TypeScript: Full type safety and IntelliSense support
- βΏ Accessible: ARIA compliant components following WAI-ARIA guidelines
- π Flexible: Support for variants, sizes, colors, and custom styling
- π Well Documented: Interactive Storybook documentation
- β‘ Performance: Optimized bundle size with zero runtime overhead
- π Theme Support: CSS custom properties for easy theming
---
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:
- β
All design tokens (colors, typography, spacing, borders) are automatically available
- β
Designers update once β changes propagate to all apps via package updates
- β
No duplication β maintain consistency across products
- β
Easy updates β yarn upgrade infinity-ui-elements to get latest design changes
``tsx`
import 'infinity-ui-elements/dist/index.css';
This single import gives you access to hundreds of CSS variables:
`css
/ 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
---
`bash`
yarn add infinity-ui-elementsor
npm install infinity-ui-elements
Install the required peer dependencies:
`bash`
yarn add react react-dom clsx tailwind-merge class-variance-authorityor
npm install react react-dom clsx tailwind-merge class-variance-authority
For Table component (optional):
`bash`
yarn add @tanstack/react-table
---
In your main application file (e.g., App.tsx or index.tsx):
`tsx`
import 'infinity-ui-elements/dist/index.css';
`tsx
import { Button, TextField, Badge } from 'infinity-ui-elements';
function App() {
return (
$3
The library uses custom utility classes that are pre-built. Configure your Tailwind setup to avoid conflicts:
#### For Tailwind CSS v4:
`js
// tailwind.config.js
export default {
content: [
'./src/*/.{js,ts,jsx,tsx}',
// Don't include node_modules - CSS is already compiled
],
}
`#### For Tailwind CSS v3:
`js
// 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)/ },
],
}
`---
π§© Components
$3
#### Button
A versatile button component with multiple variants, colors, sizes, and loading states.
Key Features:
- 3 variants:
primary, secondary, tertiary
- 6 color options: primary, positive, negative, notice, info, neutral
- 4 sizes: xsmall, small, medium, large
- Leading/trailing icons support
- Loading states with spinners
- Icon-only mode
- Full-width option`tsx
import { Button } from 'infinity-ui-elements';}>
Add Item
`#### TextField
A text input component with validation, icons, and helper text.
Key Features:
- Label with required/optional indicators
- Prefix and suffix support
- Validation states:
positive, negative
- Clear button option
- Helper text and error messages
- Info tooltip integration
- Link support`tsx
import { TextField } from 'infinity-ui-elements'; label="Email Address"
placeholder="Enter your email"
type="email"
isRequired
helperText="We'll never share your email"
showClearButton
/>
label="Amount"
prefix="$"
suffix="USD"
validationState="positive"
successText="Valid amount"
/>
`#### TextArea
A multi-line text input with auto-resize capability.
Key Features:
- Auto-resize option
- Character count display
- Validation states
- Helper text support
- All TextField features
`tsx
import { TextArea } from 'infinity-ui-elements'; label="Description"
placeholder="Enter description..."
rows={4}
maxLength={500}
showCharCount
/>
`#### Select
A dropdown select component with keyboard navigation.
Key Features:
- Searchable options
- Custom option rendering
- Prefix/suffix support
- Loading state
- Empty state customization
- Keyboard navigation
- Clear button
`tsx
import { Select } from 'infinity-ui-elements';const options = [
{ value: 'us', label: 'United States' },
{ value: 'uk', label: 'United Kingdom' },
{ value: 'ca', label: 'Canada' },
];
label="Country"
options={options}
placeholder="Select a country"
onChange={(value, option) => console.log(value)}
showClearButton
/>
`#### SearchableDropdown
An advanced dropdown with built-in search functionality.
Key Features:
- Real-time search filtering
- Multiple selection support
- Custom option rendering
- Grouped options
- Async data loading
`tsx
import { SearchableDropdown } from 'infinity-ui-elements'; label="Select Users"
options={users}
searchable
placeholder="Search users..."
onChange={(selected) => setSelectedUsers(selected)}
/>
`#### Checkbox
A checkbox component with indeterminate state support.
Key Features:
- Indeterminate state for "select all"
- 3 sizes:
small, medium, large
- Validation states
- Helper text and error messages
- Disabled state`tsx
import { Checkbox } from 'infinity-ui-elements'; label="Accept terms and conditions"
isRequired
validationState="error"
errorText="You must accept the terms"
/>
label="Select all"
isIndeterminate={someSelected && !allSelected}
checked={allSelected}
/>
`#### Radio
A radio button component for single selection.
Key Features:
- Custom styling
- Validation states
- Helper text support
- Disabled state
- Multiple sizes
`tsx
import { Radio } from 'infinity-ui-elements'; label="Option 1"
name="choice"
value="option1"
checked={selected === 'option1'}
onChange={(e) => setSelected(e.target.value)}
/>
`#### Switch
A toggle switch component for boolean states.
Key Features:
- Multiple sizes
- Disabled state
- Label support
- Custom colors
- Loading state
`tsx
import { Switch } from 'infinity-ui-elements'; label="Enable notifications"
checked={isEnabled}
onChange={(checked) => setIsEnabled(checked)}
/>
`---
$3
#### Table
A powerful data table built on TanStack Table with advanced features.
Key Features:
- Sorting, filtering, pagination
- Row selection
- Expandable detail panels
- Sticky headers
- Loading and empty states
- Custom cell rendering
- Horizontal scrolling
- Row hover effects
`tsx
import { Table } from 'infinity-ui-elements';
import { useReactTable, getCoreRowModel, createColumnHelper } from '@tanstack/react-table';const columnHelper = createColumnHelper();
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}
enableRowSelection
showRowHover
stickyHeader
detailPanel={(row) => }
/>
`#### Badge
A small status indicator component.
Key Features:
- 2 variants:
light, filled
- 6 color options
- 3 sizes: small, medium, large
- Optional dot indicator
- Custom content support`tsx
import { Badge } from 'infinity-ui-elements';
Active
Pending
`#### Avatar
A user avatar component with status indicators.
Key Features:
- Image or text initials
- Status indicator with custom icons
- 5 color variants
- 2 sizes:
small, medium
- Label and trailing component support
- Fallback for broken images`tsx
import { Avatar } from 'infinity-ui-elements'; src="/user-avatar.jpg"
alt="John Doe"
size="medium"
showStatus
statusColor="positive"
/>
JD
src="/user.jpg"
label="John Doe"
trailingComponent={ }
/>
`#### Counter
A numeric counter with increment/decrement controls.
Key Features:
- Min/max value constraints
- Step control
- Disabled state
- Custom formatting
- Size variants
`tsx
import { Counter } from 'infinity-ui-elements'; value={count}
onChange={setCount}
min={0}
max={100}
step={1}
/>
`#### Text
A typography component with consistent styling.
Key Features:
- Multiple variants:
display, heading, body, label, caption
- Size options for each variant
- Weight options: regular, medium, semibold, bold
- Color options
- Polymorphic as prop`tsx
import { Text } from 'infinity-ui-elements';
Welcome Back
This is a description
Field Label
`---
$3
#### Link
A styled link component with various visual states.
Key Features:
- Multiple variants
- External link support
- Disabled state
- Icon support
- Underline options
`tsx
import { Link } from 'infinity-ui-elements';
Go to Dashboard
Visit Website
`#### Tabs / TabItem
Tab navigation components for organizing content.
Key Features:
- Horizontal and vertical layouts
- Active state management
- Icon support
- Disabled tabs
- Keyboard navigation
`tsx
import { Tabs, TabItem } from 'infinity-ui-elements';
Overview
Settings
Analytics
`#### Pagination
A pagination component for navigating through pages.
Key Features:
- Page number display
- Previous/Next buttons
- First/Last page navigation
- Custom page size
- Controlled and uncontrolled modes
`tsx
import { Pagination } from 'infinity-ui-elements'; currentPage={page}
totalPages={10}
onPageChange={setPage}
showFirstLast
/>
`---
$3
#### ButtonGroup
A component for grouping related buttons.
Key Features:
- Horizontal and vertical layouts
- Connected or separated styles
- Size variants
- Full-width option
`tsx
import { ButtonGroup, Button } from 'infinity-ui-elements';
`#### Divider
A visual separator component.
Key Features:
- Horizontal and vertical orientations
- With or without text
- Custom styling
- Spacing control
`tsx
import { Divider } from 'infinity-ui-elements';
OR
`#### Modal
A modal dialog component for overlays.
Key Features:
- Multiple size options
- Header with title and description
- Footer support
- Close on overlay click
- Escape key support
- Scroll locking
- Animation transitions
`tsx
import { Modal } from 'infinity-ui-elements'; isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Confirm Action"
description="Are you sure you want to proceed?"
size="medium"
footer={
<>
>
}
>
Modal content goes here...
`#### Tooltip
A tooltip component for displaying contextual information.
Key Features:
- Multiple placement options
- Trigger on hover or click
- Delay control
- Arrow indicator
- Custom styling
`tsx
import { Tooltip } from 'infinity-ui-elements';
`#### ListItem
A list item component for building lists.
Key Features:
- Leading and trailing content
- Multi-line support
- Clickable/interactive
- Custom styling
- Icon support
`tsx
import { ListItem } from 'infinity-ui-elements'; leadingIcon={ }
title="John Doe"
description="john@example.com"
trailingContent={ }
onClick={() => console.log('Clicked')}
/>
`---
$3
#### FormHeader
A form header component with label and info tooltip.
Key Features:
- Required/optional indicators
- Info tooltip
- Link support
- Size variants
- Custom styling
`tsx
import { FormHeader } from 'infinity-ui-elements'; label="Email Address"
isRequired
infoHeading="Why we need this"
infoDescription="We use your email for account recovery"
linkText="Privacy Policy"
linkHref="/privacy"
/>
`#### FormFooter
A form footer component for helper text and validation messages.
Key Features:
- Validation state styling
- Error/success messages
- Helper text
- Size variants
`tsx
import { FormFooter } from 'infinity-ui-elements'; helperText="Password must be at least 8 characters"
validationState="negative"
/>
`---
$3
#### Dropdown / DropdownMenu
A flexible dropdown menu component.
Key Features:
- Custom trigger
- Nested menus
- Keyboard navigation
- Dividers and sections
- Icon support
- Custom item rendering
`tsx
import { Dropdown } from 'infinity-ui-elements'; trigger={}
items={[
{ title: 'Edit', onClick: handleEdit },
{ title: 'Delete', onClick: handleDelete, color: 'negative' },
]}
/>
`---
π¨ Using Design Tokens in Your App
$3
After importing the library CSS, use design tokens anywhere in your application:
`css
/ 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);
}
`$3
`tsx
backgroundColor: 'var(--color-teal-500)',
padding: 'var(--spacing-5)',
borderRadius: 'var(--radius-medium)',
fontFamily: 'var(--font-functional)',
}}>
Styled with design tokens
$3
Only override if absolutely necessary for app-specific themes:
`css
/ 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.
---
π οΈ Development
$3
- Node.js 18+
- Yarn 4.5.2 (managed via Corepack)$3
`bash
Install dependencies
yarn installStart Storybook for development
yarn storybookBuild the library
yarn buildType checking
yarn type-check
`$3
`
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
`$3
1. Create component folder in
src/components/
2. Implement component with TypeScript
3. Add Storybook stories for documentation
4. Export from component's index.ts
5. Add export to main src/index.ts---
π Storybook
View interactive documentation and examples:
`bash
yarn storybook
`Or visit the deployed Storybook (if available).
---
π€ Publishing
$3
`bash
For bug fixes (1.0.0 -> 1.0.1)
yarn publish:patchFor new features (1.0.0 -> 1.1.0)
yarn publish:minorFor breaking changes (1.0.0 -> 2.0.0)
yarn publish:majorFor beta releases
yarn publish:beta
`$3
`bash
1. Login to npm
npm login2. Update version
yarn version:patch # or version:minor, version:major3. Build
yarn build4. Publish
npm publish
`$3
- β
All tests pass
- β
Type checking passes (
yarn type-check)
- β
Storybook builds successfully
- β
CHANGELOG.md updated
- β
Version bumped in package.json---
π€ Contributing
Contributions are welcome! Please follow these guidelines:
1. Fork the repository
2. Create a feature branch:
git checkout -b feature/amazing-feature
3. Make your changes following the coding standards
4. Add tests if applicable
5. Update documentation (README, Storybook)
6. Commit changes: git commit -m 'Add amazing feature'
7. Push to branch: git push origin feature/amazing-feature
8. Open a Pull Request$3
- Use TypeScript with strict mode
- Follow existing naming conventions
- Use Tailwind CSS for styling via class-variance-authority
- Include proper prop types and JSDoc comments
- Create comprehensive Storybook stories
- Ensure accessibility (ARIA attributes, keyboard navigation)
- Export from barrel files (
index.ts)---
π Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
---
π License
MIT Β© Himanshu Barmola
---
π Links
- NPM Package
- GitHub Repository
- Storybook Documentation
- Report Issues
---
π‘ Tips & Best Practices
$3
- Import only the components you need (tree-shaking enabled)
- Use the cn() utility for conditional classes
- Avoid inline styles when possible$3
- Always import the main CSS file: import 'infinity-ui-elements/dist/index.css'
- Use the provided design tokens for consistency
- Extend with custom classes using className` prop---
Need help? Have questions?
- π§ Email: support@infinityapp.com
- π¬ GitHub Discussions
- π Report bugs via GitHub Issues
---
Built with:
- React
- TypeScript
- Tailwind CSS
- Storybook
- TanStack Table
- Lucide Icons
- Class Variance Authority
---
Made with β€οΈ by the Infinity Team