Infinity Design System

A mathematical viewport-based design system for React with zero breakpoints. Built with Vite and optimized for fluid, responsive layouts.

Features

• Viewport-Based Scaling: Mathematics-driven responsive design without traditional breakpoints
• Zero Configuration: Works out of the box with sensible defaults
• Component Library: Pre-built components including Box, Button, Card, Grid, and Text
• Context-Based Theme: Global styling through React Context
• Modular Architecture: Import only what you need
• CSS-in-JS Ready: Styled with customizable CSS

Installation

npm install lemnyscate

Quick Start

1. Wrap Your App with InfinityProvider

import React from 'react'
import { InfinityProvider } from 'lemnyscate'
import './index.css'

function App() {
  return (
    <InfinityProvider>
      <YourComponent />
    </InfinityProvider>
  )
}

export default App

2. Import and Use Components

import { InfinityBox, InfinityButton, InfinityText } from 'lemnyscate'

function MyComponent() {
  return (
    <InfinityBox>
      <InfinityText>Welcome to Infinity Design System</InfinityText>
      <InfinityButton>Click Me</InfinityButton>
    </InfinityBox>
  )
}

Components

InfinityBox

Container component for layout and spacing.

InfinityButton

Interactive button component with built-in styling.

InfinityCard

Card component for content grouping and elevation.

InfinityGrid

Grid layout system for responsive multi-column layouts.

InfinityText

Typography component with fluid scaling.

Hooks

useInfinity

Access the Infinity context and configuration throughout your components.

import { useInfinity } from 'lemnyscate'

function MyComponent() {
  const config = useInfinity()
  // Use config values
}

Styling

Import the default styles:

import 'lemnyscate/styles'

Or customize through the InfinityConfig provider.

Development

# Development server
npm run dev

# Build for production
npm run build

# Run tests
npm run test

Architecture

• components/: Pre-built UI components
• core/: Context, Provider, and configuration
• hooks/: Custom React hooks
• styles/: CSS definitions
• utils/: Helper functions

Browser Support

Works with all modern browsers supporting ES6+.