repository·main·Indexed 18 days ago
https://github.com/contentful/forma-36An open-source design system by Contentful providing a collection of React components and tools for building consistent user interfaces. It includes specialized packages for avatars, badges, buttons, cards, datetime utilities, forms, icons, modals, typography, and AI-generated content indicators, as well as a codemod for automating version migrations.
@contentful/f36-components library.@contentful/f36-forms package provides a collection of specialized UI components for building forms within the Forma 36 design system. It includes input controls, layout components, and validation feedback elements to ensure consistent form behavior and styling.The @contentful/f36-badge package provides components for displaying status or category labels within an interface. It includes two primary components:
Badge: A general-purpose badge component.EntityStatusBadge: A specialized badge component designed to represent the status of an entity.DisplayText is a typography component designed for special text scenarios, such as empty states or promotional/featured items.
Important: Do not use DisplayText as a replacement for headings or page titles; use the Heading component for those purposes instead.
The @contentful/f36-datetime package provides components and utilities for handling and displaying date and time information within the Forma 36 design system. It includes:
DateTime: A component for displaying date and time.RelativeDateTime: A component for displaying dates in a relative format (e.g., "2 hours ago").date utils: A set of utility functions for date manipulation and formatting.The @contentful/f36-typography package provides a set of specialized components for managing text styles and hierarchy within your application. Use these components instead of raw HTML tags to ensure consistent typography according to the Forma 36 design system.
Available components include:
DisplayText: For specific display-level text.Heading: For primary headings.Paragraph: For standard body text blocks.SectionHeading: For headings that define specific sections.Subheading: For secondary headings.Text: For inline or general text elements.The @contentful/f36-button package provides several button-related components for building user interfaces. You can use the following components:
Button: The standard button component.ButtonGroup: A component for grouping multiple buttons together.IconButton: A button containing only an icon.ToogleButton: A toggleable button component.@contentful/f36-icons package provides a collection of icons for use within the Forma 36 design system. To use these icons in your project, you must install the package via your preferred package manager.The @contentful/f36-modal package provides two primary components for managing modal dialogs:
Modal: The core component used to render the modal content and structure.ModalLauncher: A component designed to trigger the opening of a modal, typically used to manage the state of whether the modal is visible or not.Refer to the component source directories for detailed API specifications and usage patterns.
The @contentful/f36-card package provides several specialized card components for displaying different types of content within the Contentful design system. Depending on your data model, you can use one of the following components:
AssetCard: For displaying media assets.Card: A generic card component.EntryCard: For displaying content entries.InlineEntryCard: For displaying entries in an inline format.@contentful/f36-utils package provides a collection of utility functions and hooks designed to assist with common tasks in the Forma 36 design system, such as color manipulation, DOM interaction, and accessibility hooks.