Flash CMS - Component Showcase

Buttons

Button Colors

Button Sizes

Button Variants

Interactive Controls

Current Variant: solid

Current Size: md

All Combinations

Form Controls

Interactive Form Builder

Variant

Color

Size

Live Preview:

Input Variants

Switch & Checkbox Variants

Advanced Elements

Textarea Variants

Radio Group Variants

Data Display

Chips & Badges

Default
Primary
Secondary
Success
Warning
Danger
avatar5
avatarNew

Avatars

avataravataravatar
avataravataravataravataravatar

Progress & Spinner

32%
55%
78%

Navigation

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Breadcrumbs & Pagination

Interactive Components

Modal

Dropdown

Tooltip & Popover

Code & Typography

Code Display

npm install @heroui/reactconst theme = "primary"function Component()
$ npm install @heroui/react
import {Button} from "@heroui/react";

Keyboard & Links

Press K to search

Press P for command palette

Press T to toggle

Tables & Data

Data Table

NameRoleStatusActions
avatar
Tony Reichert
tony@example.com
CEO
Active
avatar
Zoey Lang
zoey@example.com
Technical Lead
Paused
avatar
Jane Fisher
jane@example.com
Senior Developer
Active

Card Examples

Daily Mix

12 Tracks

Frontend Radio

Music Cover
avatar

Zoey Lang

@zoeylang

Frontend developer and UI/UX enthusiast. Join me on this coding adventure!

4

Following

97.1K

Followers

New

Flash CMS Camera

Product Image

Available soon.

Get notified.

Loading & Feedback

Spinners

Small spinner
Medium primary
Large secondary
Success color

Progress Bars

Default
Primary
Success
Warning

Status Chips

Default
Primary
Secondary
Success
Warning
Danger
Light Primary
Light Secondary
Light Success
Flat Warning
Flat Danger
Flat Default

Layout & Structure

Dividers & Spacing

Section 1


Section 2


Section 3

Content Areas

Content 1

Primary content area

Content 2

Secondary content

Content 3

Tertiary content

Content 4

Quaternary content

Accordion & Collapse

Accordion Example

What is Flash CMS?
Flash CMS is a modern content management system built for speed and flexibility.
How to install?
Install Flash CMS using npm: npm install flash-cms
About our components?
Our component library is professionally designed for client projects and showcases our development capabilities.

Input Range & Slider

Component Showcase

This showcase demonstrates our custom theme designs and components that we use in our client projects. Switch themes using the selector above to see how components adapt to different brand requirements.