A set of beautifully-designed, accessible components. Works with your favorite frameworks.
A design system is a collection of pre-built, reusable assets—components, patterns, guidance, and code—that allows its users to build consistent digital experiences faster. By using natmfat, the time teams spend designing and building is minimized. Instead of building and re-building basic elements, they can spend that time customizing their products to address specific client use cases.
Motivation
natmfat is a closed-source design system that provides a uniform surface for all projects associated with my brand. I provide documentation for others to create similar apps, but ultimately all components are built to serve my needs and purposes.This is a React component library, built on Radix Primitives and CSS Modules. Unlike "open code" component registries like shadcn/ui, design and implementation are intertwined and packaged together. This ensures designs are consistent across many projects. You should not be modifying components or their implementation - natmfat provides a near exhaustive list of components that continues grows as I use and develop the library. Additionally, should a component not be implemented, I provide composable component utilities, tokens, and CSS layers to make building similarly themed components and overriding styles relatively trivial.
Composition
Every component in natmfat shares a composable interface based on Radix Primitives. If a commonly used component does not exist, I'll bring it in and adjust its style to match the rest of the design system. Every component should feel familiar and easy to learn.
Beautiful Defaults
natmfat comes with a large collection of components. They are designed to look good on their own and come together naturally as a consistent design system. Because CSS tokens are used exclusively as a source of truth, you can also create sitewide themes that alter the style of all components.