Neon UI components examples

Neon

A dark-themed dropdown menu displaying a list of product features. Each item includes a line-art icon inside a rounded square, a title, and a short descriptive subtitle.

• Flyout menu

Neon

A dark-themed hero section featuring a prominent headline, subheadline, primary CTA button, and a two-column feature grid with abstract illustrations.

• Hero section

Neon

A radio group presenting three visual theme options: System, Light, and Dark. Each option includes a stylized thumbnail preview of the interface and a radio button.

• Theme settings

Neon

A radio group for selecting the UI theme, featuring visual previews for System, Light, and Dark modes.

• Theme settings

Neon

A data table displaying database records with a toolbar for filtering, column management, adding records, and pagination.

• Table

Neon

A progress bar showing compute usage against a monthly limit, accompanied by a title, detailed description, and a numeric usage ratio.

• Progress indicator

Neon

A progress indicator showing resource usage, specifically database branches, with an alert indicating the allowance has been exceeded.

• Progress indicator

Neon

A slider control for selecting a history retention period, with a label showing the current selection and a button to set a custom value.

• Slider

Neon

User account dropdown menu

• Theme settings

Neon

A card displaying a list of features available on a paid plan, with a link to upgrade.

• Upgrade your plan

Neon

A line chart displaying RAM usage over time, with a tooltip showing specific allocated and used values at a selected timestamp.

• Charts

Neon

A card listing the features of a paid plan, with an outline button to upgrade.

• Upgrade your plan