Getting Started
Learn about all of Prismane's components. Explore all of the components that we ordered by their type.Typography
Inputs
ActionButtonActionButton displays a square call-to-action button.AutocompleteFieldAutocompleteField displays a field that has a set of options, which can be filtered.ButtonButton displays a styled button.CheckboxCheckbox displays a field that has a set of options, which can be filtered.CloseButtonCloseButton displays a square close button.ColorFieldColor field displays a field that has a set of colors, which can be chosen.FieldField displays a field that is used as the base component to create fields.FormForm displays a form container that groups a given set of fields.NativeDateFieldNativeDateField displays a native date field.NativeSelectFieldNativeSelectField displays a native select field.NumberFieldNumberField displays a field that handles numbers, allowing incrementing and decrementing the value.PasswordFieldPasswordField displays a field that handles passwords, allowing for showing and hiding the password.PinFieldPinField displays a field that handles pins, allowing for easily typing in number combinations.RadioRadio displays a group of fields that handles toggling between multiple values.SegmentedFieldSegmentedField displays a field that handles toggling between multiple values.SelectFieldSelectField displays a field that handles choosing a value from a set values.SwitchSwitch displays a field that handles toggling between true or false.TextareaFieldTextareaField displays a field that handles toggling between multiple values.TextFieldTextField displays a field that handles toggling between multiple values.
Layout
AspectRatioAspectRatio renders a responsive container.BoxBox displays a versatile container, by default a div.CenterCenter displays a container that places it's content in the center.CircleCircle displays a circle that renders it's content in the center.ContainerContainer displays a container that constrains the content, whilst still remaining fluid.FlexFlex displays a container that has a display of flex.FooterFooter displays a footer element.GridGrid displays a container that has a display of grid.HeaderHeader displays a header element.HiddenHidden displays a container that hides it's content.HideHide displays a container that hides under a breakpoint.MainMain displays a main element.ShowShow displays a container that hides under a breakpoint.SquareSquare displays a square container.
Data Display
AccordionAccordion displays a list of options that can be expanded or collapsed.AvatarAvatar displays a profile picture or a color background with initials.BadgeBadge displays a small badge with short information to it's children.CardCard displays a container that groups and displays content.ChipChip displays a container that is used to highlight some important short information.CollapseCollapse displays a container that can hide and show content.GradientGradient displays a container with gradient background.IconIcon displays a container that can be used as a frame for an icon and provides consistency in sizing.ImageImage displays an image element.KeyKey displays a container that is used to display keyboard key combinations.ListList displays a container that groups elements in a list.PaperPaper displays a container with background and shadow.ProgressProgress displays a container that shows the progress of a process.StackStack displays a container that groups elements together and puts space around them.TableTable displays a table container that is used to organize and display data in a convenient way.TabsTabs displays a container that allows the user to switch between different screens.
Overlay
BackdropBackdrop displays a container that is used to limit the user's actions and make them focus on it's content.DialogDialog displays a container that displays a notification.DrawerDrawer displays a container that slides from the side and occupies the users attention.MenuMenu displays a menu container that displays different actions the user can perform.ModalModal displays a container that displays a notification.PopoverPopover displays a dialog container that is shown around a control.PortalPortal displays a container that is displayed outside of the current DOM tree.TooltipTooltip display a container that shows additional information on hover.
Feedback