Skip to main content

1UI

Welcome to the 1UI documentation. This package provides a comprehensive set of UI components and utilities for building beautiful Intuition applications. All components are fully customizable, accessible, and follow modern design principles.

Check out our Storybook for interactive examples and detailed component documentation.

Installation

npm install @intuition/1ui

Getting Started

Import and use components in your application:

import { Button, Card, Input } from '@intuition/1ui';

function MyComponent() {
  return (
    <Card>
      <Input placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Component Categories

Layout Components

  • Container - Responsive container with max-width
  • Grid - Flexible grid system
  • Stack - Vertical or horizontal stacking
  • Card - Container with elevation and padding

Form Components

  • Input - Text input field
  • Select - Dropdown selection
  • Checkbox - Checkbox input
  • Radio - Radio button group

Interactive Components

  • Button - Various button styles
  • Modal - Dialog box
  • Dropdown - Dropdown menu
  • Tabs - Tabbed interface

Theming

Customize the look and feel of components using our theming system:

import { ThemeProvider } from '@intuition/1ui';

const theme = {
  colors: {
    primary: '#007AFF',
    secondary: '#5856D6',
    // ... other colors
  },
  spacing: {
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
    // ... other spacing values
  },
  // ... other theme properties
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app components */}
    </ThemeProvider>
  );
}

Responsive Design

All components are responsive by default. Use our responsive utilities:

import { useBreakpoint } from '@intuition/1ui';

function ResponsiveComponent() {
  const isMobile = useBreakpoint('md');
  
  return (
    <Stack direction={isMobile ? 'vertical' : 'horizontal'}>
      {/* Your content */}
    </Stack>
  );
}

Accessibility

  • All components follow WCAG 2.1 guidelines
  • Keyboard navigation support
  • Screen reader friendly
  • ARIA attributes included by default

Best Practices

  • Use semantic HTML elements when possible
  • Maintain consistent spacing using theme values
  • Follow the component composition pattern
  • Use responsive utilities for mobile-first design

Need Help?

If you need assistance with 1UI, you can: