DocsGithub

Animus

Animus is a configuration driven toolkit for creating component languages as
expressive
as the UIs they describe.

  • Prop Cascade: Declarative component builder with structured specification and execution order.
  • Comprehensively Typed: Animus is the foundation for exhaustively typing your entire design system as you configure it. The more specific you are the smarter it gets.
  • Modes and Themes: Animus is built with CSS variable color modes support out of the box either through @animus-ui/theming or your own implementation.
  • Completely Customizable: Customize props, themes, and patterns without losing interoperability.
const FlexBox = animus
  .styles({ display: 'flex' })
  .states({
    inline: {
      display: 'inline-flex',
    },
  })
  .groups({
    space: true,
  })
  .props({
    gap: {
      property: 'gap',
      scale: {
        md: 12,
        lg: 24,
      },
    },
  })
  .asElement('div');
<FlexBox p="2rem" gap="md" inline>
  <FlexBox px="1rem">Center</FlexBox>
</FlexBox>