Components
Components are reusable building blocks that together can be used to build
your application. They implement our principles
and use our colors. They can be used together to implement our patterns.
See getting started to learn how to use our components.
HTML components
HTML components are like mini-patterns using standard HTML elements and
custom classes.
Web components
Web components
is a suite of technologies for building reusable native custom elements that
work together with most UI systems, be it React, Vue, Angular, or pure HTML
+ javascript. We build our components using Stencil.
All our web components are prefixed with `fun-`.
We also supply a React wrapper round our web components so they can be
used in React. See Getting started: React + Vite for more.
Want to create new components? Read
Authoring new components!
fun-accordion
Accordions can be used to make content take up less space, since they can be expanded and collapse
fun-backdrop
Show a backdrop over the entire window. This is useful for putting behind modals and popovers and ot
fun-badge
Badges convey dynamic information, such as counts or status. A badge can include labels or numbers.
fun-brand-icon
Render a Brand icon, 48x48px.
fun-brand-logo
Render a brand logo, size 400x149 px.
fun-breadcrumbs
Breadcrumbs are used as part of page headers (/patterns/page header) to help users navigate the app
fun-button
Buttons trigger actions in the application by being clicked or tapped by the user. <fun button>Lore
fun-chip
Chips are used for making selections or filtering content. They have two modes:
**single sel
fun-field-icon
Field Icon renders a field icon, usually the brand icon associated with the field but can also be a
fun-field-label
Field label is used to render a consistent representation of a Funnel field wherever it is used in t
fun-field-unit
Field Unit is used to display a consistent icon and style for field units across the application.
fun-header-controller
Component that switches content depending on the scroll position, for creating dynamic page headers.
fun-hero-modal
A hero modal is used to show extra information as well as the actual content, for instance a preview
fun-modal-auto-size
A modal is a dialog that takes over the screen, positioning itself over the rest of the content. Whi
fun-modal-controller
Controls the position and dismissal of modal dialogs. This component has no opinions about the actua
fun-modal
A modal is a dialog that takes over the screen, positioning itself over the rest of the content. Whi
fun-popover
Popover component that shows a dialog over the rest of the page on demand. Note that the `open` pro
fun-progress-circle
Component to show progress with an estimated time to completion in seconds. The circle will be 'fill
fun-progress-controller
fun progress-controller is a container component for showing different loading states over time. For
fun-source-label
Renders a data source label.
fun-theme-container
Utility component that wraps the content in a span with a class containing the current theme (light
fun-toggle
For turning things on and off. Similiar to a checkbox, but changes should be immediate. It won't jus
fun-tooltip
Tooltips are commonly used to give more information about an icon or button when the user hovers ove
fun-user
This component displays a user name along with its avatar. If there is no url the avatar falls back
fun-wizard-step
fun wizard-step represents a single step in a wizard flow. It is designed to be used inside a Wiza
fun-wizard-stepper
This component displays a wizard stepper, also known as a progress bar, to help a user understand:
React components
If you are using React we recommend using the React versions of our web
components. In actual fact the React versions are just wrappers around the
web components, but they give you a better developer experience with
intellisense and proper typing, and much better support for connecting up
event handlers.
We also have a number of components written specifically for React. These
are listed below. They live in a number of different packages so see the
installation instructions per component.
CSS Utilities
Built on top of Tailwind CSS, we also provide a number of CSS utility
classes to avoid repetition and aid consistency.
