Loop UI

Modern, customizable React component library for Loop projects with white-label support.

Installation

npm install @navetas-loop/loop-ui formik yup styled-components

Quick Start

import { ThemeProvider, TextField, Checkbox } from '@navetas-loop/loop-ui';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';

const schema = Yup.object({
  email: Yup.string().email().required(),
  password: Yup.string().min(8).required(),
});

export default function LoginForm() {
  return (
    <ThemeProvider>
      <Formik
        initialValues={{ email: '', password: '', remember: false }}
        validationSchema={schema}
        onSubmit={console.log}
      >
        <Form>
          <TextField name="email" type="email" label="Email" required />
          <TextField name="password" type="password" label="Password" required />
          <Checkbox name="remember" label="Remember me" />
          <button type="submit">Sign In</button>
        </Form>
      </Formik>
    </ThemeProvider>
  );
}

Features

• ✅ Fully Customizable - Theme, className, style, styles props
• ✅ White-Label Ready - Complete brand customization
• ✅ TypeScript First - Full type safety and IntelliSense
• ✅ Formik Integration - Optional, works standalone too
• ✅ Tree Shakeable - Import only what you need
• ✅ Accessible - ARIA compliant, keyboard navigation

Documentation

📚 View Full Documentation in Storybook

Run Storybook locally:

git clone https://github.com/navetas-loop/loop-ui.git
cd loop-ui
yarn install
yarn storybook

Components

• TextField - Text, email, password, and other input types
• Checkbox - Custom checkbox
• FormGroup - Section container
• FormLabel - Styled label
• FormError - Error messages
• FormHelperText - Helper text
• ThemeProvider - Theme context

Customization

import { ThemeProvider, defaultTheme } from '@navetas-loop/loop-ui';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#FF5A35',
  },
};

<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>;

See Storybook documentation for complete customization guide.

Development

yarn storybook    # Start Storybook
yarn build        # Build library
yarn lint         # Lint code

License

MIT © Loop

Links

• GitHub
• NPM
• Storybook
• Issues