Component Documentation

Showcase of UI components in the Colossal Forge Template design system.

Typography

Heading Levels:

Heading Level 1

Heading Level 2

Heading Level 3

Text Styles:

Primary text

Secondary text

Success text

Error text

Links:

Internal Link External Link Unstyled Link

Buttons

Button Variants:

Button Sizes:

Toggle Buttons:

Form Inputs

Text Input

Required Field *

With Error

This field is required

Message

Choose Option

Enable Notifications

Feedback Components

Alerts:

This is an informational alert

Success! Action completed

Warning: Please review

Error: Something went wrong

Badges:

PrimarySuccessWarningError

Interactive Form Components

Interactive Text Inputs:

Interactive Text Input

Interactive Textarea

Interactive Select

Interactive Controls:

Basic Checkbox

Initially Checked

Toggle Switch

Initially On

Choose Size

Small

Medium

Large

Static Form Components

Checkboxes:

Option 1

Option 2

Option 3 (Disabled)

Option 4 (Disabled)

Radio Groups:

First Option

Second Option

Third Option

Interactive Form Components

Interactive Text Inputs:

Interactive Text Input

Interactive Textarea

Interactive Select

Interactive Controls:

Basic Checkbox

Initially Checked

Toggle Switch

Initially On

Choose Size

Small

Medium

Large

Additional Controls

Special Buttons:

Overlay Components

Interactive Modal:

Loading & Progress

Spinners:

Small

Medium

Large

Progress Bars:

25% Complete

50%

90%

Skeleton Loaders:

Data Display

Avatars:

Tags:

Default Tag

Primary Tag

Closable

Card Example:

Sample Card

This is the card content area where you can put any content like text, images, or other components.

Media Components

Icons:

🏠⭐🎉🚀

Images:

Advanced Form Inputs

Combobox (Select with Search):

Choose Framework

▼

Multiple Selection

▼

Date Picker:

Select Date

Date Range

From

Select a start and end date

Advanced Data Display

Basic Table:

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User

Advanced Data Grid:

ID	Name	Email	Role	Status
1	Alice Cooper	alice@example.com	Admin	Active
2	Bob Dylan	bob@example.com	User	Active
3	Charlie Brown	charlie@example.com	User	Inactive

Surface Components

Accordion:

This is the content for the first accordion item. It can contain any components or text.

This is the content for the second accordion item. Accordions are great for organizing information in collapsible sections.

This is the content for the third accordion item. You can have as many items as needed.

Multiple Open Accordion:

This is the content for the first accordion item. It can contain any components or text.

This is the content for the second accordion item. Accordions are great for organizing information in collapsible sections.

This is the content for the third accordion item. You can have as many items as needed.

Navigation Components

Navigation Bar:

Tabs:

Tab 1

Tab 2

Tab 3

Content for Tab 1

Overlay Components

Drawer:

Toast:

Tooltip:

Performance Components

Virtual List (for large datasets):

Item 1 - Description for item 1

Item 2 - Description for item 2

Item 3 - Description for item 3

Item 4 - Description for item 4

Item 5 - Description for item 5

Item 6 - Description for item 6

Item 7 - Description for item 7

Item 8 - Description for item 8

Item 9 - Description for item 9

Item 10 - Description for item 10

Item 11 - Description for item 11

Lazy Load (deferred content loading):

Infinite Scroll:

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Error Boundary: