DOCSEARCHbyAlgolia
Submit Docs

Minerva UI Documentation

website·Indexed 30 days ago

https://minerva-ui-docs.vercel.app/

A React component library and utility set featuring accessibility-focused components like Modal, Menu, and Tabs, alongside custom hooks such as useDisclosure, useLocalStorage, and useClipboard. Built using styled-system and Tailwind CSS font size scaling, it provides a comprehensive set of UI primitives including Box, Flex, and various form inputs.

Tokens
23.9K
Snippets
145
Records
151
Agent score
25%

What's inside Minerva UI

  1. Use the Heading component for semantic typography

    The Heading component replaces standard HTML <h1> through <h4> tags. It decouples the visual size of the text from the HTML tag used, allowing developers to maintain a proper heading hierarchy for SEO and accessibility purposes regardless of the desired font size.
    import { Heading } from 'minerva-ui';

<Heading>Heading Text</Heading>

  2. Use the Text component for typography

    The <Text /> component is a replacement for standard HTML <p> or <div> elements. It utilizes Tailwind CSS font size scaling to manage text dimensions.
    import { Text } from 'minerva-ui';

<Text>Text</Text>

  3. Accessibility and WAI-ARIA compliance in Minerva UI

    Minerva UI components are built to be accessible and WAI-ARIA compliant, leveraging Reach UI as a foundation. This ensures that standard user expectations—such as pressing the esc key to close a Modal or Dialog—are handled automatically, providing a consistent experience for keyboard users and those using assistive technologies.

  4. Use the Button component in minerva-ui

    The <Button /> component is a replacement for the standard HTML <button /> tag and extends all standard button props. It also composes the PseudoBox component, allowing it to accept PseudoBox styling props.
    import { Button } from 'minerva-ui';

const MyComponent = () => (
  <Button>Button</Button>
);

  5. Use the Skeleton component for loading states

    The <Skeleton /> component renders a subtly animated placeholder used to indicate that content is being fetched. It can be used as a conditional replacement for actual content (like text or images) based on a loading state.
    import { Skeleton, Text } from 'minerva-ui';

const MyComponent = () => {
  const [data, setData] = useState('');
  return <div>{data ? <Text>test</Text> : <Skeleton />}</div>;
};

  6. Use the Stack component to manage spacing between elements

    The <Stack /> component is a wrapper that automatically adds margins between its immediate child elements. By default, it stacks elements vertically.
    import { Stack } from 'minerva-ui';

render(
  <Stack>
    <Card>Item 1</Card>
    <Card>Item 2</Card>
    <Card>Item 3</Card>
  </Stack>
);

  7. Use Minerva UI color tokens in components

    Minerva UI uses a token-based system for colors. You can apply these tokens to component props such as bg (background), color (text color), and borderColor. Tokens typically follow the format colorName.weight (e.g., teal.700), where weight ranges from 50 to 900.
    () => (
  <Block>
    <Flex
      backgroundColor="#edf2f7"
      padding="10px"
      justifyContent="space-between"
      color="#fff"
    >
      {/* Using color tokens for background and border */}
      <Button color="#fff" bg="teal.700" borderColor="teal.700">
        teal.700
      </Button>
      <Button color="#fff" bg="purple.800" borderColor="purple.800">
        purple.800
      </Button>
      {/* Using the transparent token */}
      <Button bg="transparent" borderWidth="1px" color="gray.600">
        transparent
      </Button>
    </Flex>
  </Block>
);

  8. Use InputField to wrap an Input with labels and errors

    The <InputField /> component acts as a wrapper for an <Input /> component, providing a consistent structure for labels and error messages (similar to Bootstrap's form-control). It manages the visual association between the label, the input field, and any validation error text.
    import { InputField, Input } from 'minerva-ui';
import React, { useState } from 'react';

const MyComponent = () => {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  return (
    <InputField label="Label" errorText={error}>
      <Input
        placeholder="Basic Input"
        value={name}
        onBlur={!name ? () => setError('This field cannot be empty') : null}
        onChange={e => {
          setError('');
          setName(e.target.value);
        }}
      />
    </InputField>
  );
};

  9. Persist state using the useLocalStorage hook

    The useLocalStorage hook from minerva-ui allows you to store and synchronize state with the browser's Local Storage. It behaves similarly to useState, where the first argument is the unique key for the local storage entry and the second argument is the initial default value.
    import { useLocalStorage } from 'minerva-ui';

function Example() {
  // 'click-count' is the Local Storage key, 0 is the initial value
  const [count, setCount] = useLocalStorage('click-count', 0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Add To Count</button>
      <p>You've clicked the button {count} times.</p>
    </>
  );
}

  10. Implement a closeable Alert

    To create an alert that can be dismissed, manage the visibility state (e.g., using useState) and provide a close button within the Alert content. While the documentation mentions a canBeClosed prop, the provided implementation example shows manual state management with a button.
    import React, { useState } from 'react';
import { Alert, Button, Icon } from 'minerva-ui';

const CloseableAlertExample = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Alert</Button>
      {open && (
        <Alert status="error" title="Whoa!">
          Something not great is happening!
          <Button
            bg="transparent"
            padding={1}
            border={0}
            name="Close Alert"
            marginLeft="auto"
            onClick={() => setOpen(false)}
          >
            <Icon name="x" size="20px" />
          </Button>
        </Alert>
      )}
    </>
  );
};

  11. Install Minerva UI

    Install the Minerva UI component library using yarn or npm.
    # Using yarn
yarn add minerva-ui

# Using npm
npm install --save minerva-ui

  12. Implement responsive styles in Minerva components

    Minerva components use styled-system for responsive styling. You can define styles that change based on the browser width using either an array or an object syntax.

    Default Breakpoints:

    • base: 0px
    • sm: 640px
    • md: 768px
    • lg: 1024px
    • xl: 1280px

    Array Syntax: Values are applied sequentially from the smallest breakpoint upwards. Object Syntax: Use the breakpoint aliases (base, sm, md, lg, xl) as keys for more explicit control.

    // Array Syntax: [base, sm, md, lg, xl]
<Box
  width={['100%', '50%', '33%', '25%', '20%']}
>
  Responsive Content
</Box>

// Object Syntax: Explicitly mapping breakpoints
<Box
  width={{
    base: '100%', // < 640px
    sm: '50%',    // >= 640px
    md: '33%',    // >= 768px
    lg: '25%',    // >= 1024px
    xl: '20%',    // >= 1280px
  }}
>
  Responsive Content
</Box>