What is Primo UI?

primo-ui is a React design system built with Stitches and Radix UI, with design tokens and Storybook docs. It is an unfinished learning project, as the repo description says: 9 components are done and more are on a to-do list.

The @primo-ui/react and @primo-ui/tokens packages declare MIT on npm, but the repository has no license file. Install with npm install @primo-ui/react @primo-ui/tokens.

What it does

1. 01Ready components: Text, Heading, Box, Button, TextInput, TextArea, Checkbox, Avatar and MultiStep
2. 02Tokens package with colors, fonts, font sizes, weights, line heights, radii and spacing
3. 03Styled with Stitches, with Avatar and Checkbox built on Radix UI primitives
4. 04Phosphor icons
5. 05Storybook docs published on GitHub Pages
6. 06Turborepo monorepo with Changesets versioning

FAQ

How do I install primo-ui?

The packages are on npm: npm install @primo-ui/react @primo-ui/tokens. The latest versions are @primo-ui/react 1.0.0 and @primo-ui/tokens 1.0.1, both from October 2022.

Which React version does it support?

It was built against React 18.2 and treats React as an external dependency. It targets the web, not React Native.

What is the license?

The package.json files and npm declare MIT, but the repository has no LICENSE file.

How is it different from other design systems?

It is a small personal design system, made to learn how tokens, components and docs fit together in a monorepo. It does not have the coverage or upkeep of libraries like Radix Themes or Chakra.

Is it maintained?

No. The last commit is from October 2022, and Select, Slider, Tabs, Tooltip, Popover, Modal and Context Menu are still on the to-do list.

Documentation

README from the lucianodiisouza/primo-ui repository, refreshed on every deploy.