A UI library supplies reusable visual elements for an application. In React, it sits in the user-interface part of the ecosystem, alongside tools such as animation libraries. A shared library can give multiple products a consistent brand and make new features faster to prototype. section 1.4.1 section 13.0
Choose the form of library to match the design work:
- A component library such as Material UI supplies React components ready to import. section 7.1.5
- An opinionated stylesheet such as Bootstrap supplies predefined designs applied through class names. It is a better fit when those designs are close to what you want. section 7.1.5
- A utilitarian stylesheet such as Tailwind CSS offers base classes with broad styling freedom. It can become messy for one component with many variations. section 7.1.5
Libraries in the same category are not automatically useful together. Material UI and Ant Design have largely overlapping responsibilities, though separate parts of a large application might use each. Building a library instead gives a team control over unsupported variants and bug fixes, at the cost of doing that work itself. section 1.4.2 section 13.0
A small library with a demanding button
One Button interface supports normal, outline, disabled, wide, and custom-styled uses. The normal button includes a styled chevron that animates on hover; the outline variant serves as a less prominent action. Even this single component exposes decisions about styling, variants, and how callers express them. section 7.2
import Button from "./Button";
function App() {
return (
<>
<fieldset>
<legend>Normal button</legend>
<Button>Send</Button> #1
</fieldset>
<fieldset>
<legend>Outline button</legend>
<Button outline>Send</Button> #2
</fieldset>
<fieldset>
<legend>Disabled button</legend>
<Button disabled>Send</Button> #3
</fieldset>
<fieldset>
<legend>Wide button</legend>
<Button width={400}>Send</Button> #4
</fieldset>
<fieldset>
<legend>Custom button</legend>
<Button hasCustomStyle>Send</Button> #5
</fieldset>
</>
);
}
export default App;
The JSX shows the five uses of the same Button component, including props for outline, disabled, width, and custom styling. section 7.2
For a shared library, start with product specifications and designs, then define the components and variants its consumers need. Storybook composition and thorough component testing are part of the proposed work—not substitutes for deciding whether an existing library already fits. section 13.0 section 7.1.5
