carnation-ds v1.0.0-alpha.4

Carnation

Carnation is an accessible framework for building universal React design systems.

For more information, visit our docs.

Design Systems

A design system is a hierarchy of styles, components, and patterns that can be used by designers and engineers to build any number of applications. At the core of any digital experience is a design system: it's in the text, in the buttons, it's everywhere.

Check out our Design Systems doc for more in-depth information and examples.

Philosophy

Design systems are scalable and their implementations should be too. Managing multiple codebases that implement the same design system can get tedious, especially for smaller teams or solo engineers. What if you could design once, code once, and have it appear everywhere? That is the promise of Carnation.

Check out our Motivation doc for more in-depth information on how we landed on our approach.

Web-first

Unlike other universal design system frameworks, Carnation is web-first. No more writing View or Text components; you'll be writing real DOM elements:

<c.article>
  <c.h1>Carnation Is Changing the Design Space</c.h1>
  <c.p>
    By <c.a href="/authors/josh">Josh Pensky</c.a>
  </c.p>
  <c.img src="..." alt="A sunrise over a snowy mountain." />
</c.article>

Check out the Primitives section for more about our core components.

Tailwind-first

Carnation leverages the power of Tailwind CSS to make defining the styles of your universal design system easy. On native, Tailwind classes are compiled at build time to native StyleSheets via NativeWind.

<c.p className="font-sans text-black dark:text-white">
  Lorem ipsum dolor sit amet.
</c.p>

Motion-first

Carnation brings a universal API for motion to design systems, brought to you by Framer Motion on web and Reanimated on native.

<m.div
  ariaLabel="Loading..."
  initial={{ rotate: 0 }}
  animate={{ rotate: 360 }}
  transition={{ type: "timing", ease: "linear", repeat: Infinity }}
>
  <LoadingIcon />
</m.div>

Accessibility-first

Beyond exposing semantic components and ARIA props, we also take inspiration from Radix UI to export composable components that implement accessible patterns not built into the web and/or native.

<Tabs.Root>
  <Tabs.List ariaLabel="Feeds">
    <Tabs.Trigger value="following">Following</Tabs.Trigger>
    <Tabs.Trigger value="explore">Explore</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="following">...</Tabs.Content>
  <Tabs.Content value="explore">...</Tabs.Content>
</Tabs.Root>