Accordion

Are the components accessible?

Yes, the components are designed with accessibility in mind, but you'll need to adjust them as you customize to ensure they meet your project's needs.

Are they unstyled?

Yes, the components are completely unstyled, providing you with a blank canvas to apply your own design and branding.

Are they animated?

Yes, the components are ready to be animated, allowing you to easily add custom animations that fit your project’s style.

Alert Dialog

View in docs

Delete account

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

Cancel

Yes, delete account

Aspect Ratio

View in docs

Portait 2:3	Square 1:1	Landscape 3:2	Widescreen 16:9

Avatar

View in docs

Image	Solid	Bitmoji	Text	Icon
			GC

Neutral			GC
Accent			GC
Red			GC
Orange			GC
Green			GC
Blue			GC

2XSmall				G
XSmall				G
Small				GC
Regular				GC
Medium				GC
Large				GC
XLarge				GC
2XLarge				GC
3XLarge				GC

No radius				G
Small				G
Medium				G
Large				G
Full				G

	Normal	Fill
2XSmall	+25	+250
XSmall	+25	+250
Small	+25	+250
Regular	+25	+250
Medium	+25	+250
Large	+25	+250
XLarge	+25	+250
2XLarge	+25	+250
3XLarge	+25	+250

Badge

View in docs

	Normal	Dot	Icon left	Icon right
Solid	Badge	Badge	Badge	Badge
Soft	Badge	Badge	Badge	Badge
Outline	Badge	Badge	Badge	Badge

	Solid				Soft				Outline
Gray	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge
Accent	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge
Error	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge
Warning	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge
Success	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge
Information	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge
Disabled	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge	Badge

	Normal		Fill
Completed	Completed	Completed	Completed	Completed
Pending	Pending	Pending	Pending	Pending
Failed	Failed	Failed	Failed	Failed
Disabled	Badge	Badge	Badge	Badge

Blockquote

View in docs

Accent	Normal
Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.

Neutral	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Accent	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Red	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Orange	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Green	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Blue	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.

XSmall	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Small	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Regular	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Medium	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Large	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
XLarge	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.

Light	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Normal	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Medium	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.
Bold	Blockquotes emphasize key information, adding visual distinction while enhancing the overall message in a design.

Button

View in docs

	Accent	Neutral	Error	Warning	Disabled	Loading
Primary	Button	Button	Button	Button	Button	Loading
Secondary	Button	Button	Button	Button	Button	Loading
Tertiary	Button	Button	Button	Button	Button	Loading
Link	Button	Button	Button	Button	Button	Loading

Icon left	Icon right	Icon only
Button	Button

XSmall	Small	Medium	Large
Button	Button	Button	Button
Button	Button	Button	Button
Button	Button	Button	Button

Button	Button	Button	Button

	Primary	Secondary
Apple	Sign up with Apple	Sign up with Apple
X (Twitter)	Sign up with X	Sign up with X
Google	Sign up with Google	Sign up with Google
Facebook	Sign up with Facebook	Sign up with Facebook
Linkedin	Sign up with Linkedin	Sign up with Linkedin
Github	Sign up with Github	Sign up with Github

Close button	Primary	Secondary	Tertiary
Small
Normal

Collapse button	Primary	Secondary	Tertiary
Small
Normal

Toggle button	Primary	Secondary	Tertiary
Small
Normal

Button group

Regular	Button Button Button Button Button
Small	Button Button Button Button Button
XSmall	Button Button Button Button Button

	Normal	Icon left	Icon right	Active	Disabled
Regular	Button	Button	Button	Button	Button
Small	Button	Button	Button	Button	Button
XSmall	Button	Button	Button	Button	Button

Card

View in docs

	Classic	Sunken
Div	Card title Card content description goes here.	Card title Card content description goes here.
Link	Card title Card content description goes here.	Card title Card content description goes here.

Regular	Card title Card content description goes here.	Card title Card content description goes here.
Large	Card title Card content description goes here.	Card title Card content description goes here.

Card title Card content description goes here.	Card title Card content description goes here.
Card title Card content description goes here.	Card title Card content description goes here.
Typography is the foundation of effective design, playing a critical role in conveying information and setting the tone of the brand.	Typography is the foundation of effective design, playing a critical role in conveying information and setting the tone of the brand.

Typography is the foundation of effective design, playing a critical role in conveying information and setting the tone of the brand.

Code

View in docs

Solid	`Hello, World!`
Soft	`Hello, World!`
Outline	`Hello, World!`
Ghost	`Hello, World!`

	Solid	Soft	Outline	Ghost
Neutral	`Hello, World!`	`Hello, World!`	`Hello, World!`	`Hello, World!`
Accent	`Hello, World!`	`Hello, World!`	`Hello, World!`	`Hello, World!`
Red	`Hello, World!`	`Hello, World!`	`Hello, World!`	`Hello, World!`
Orange	`Hello, World!`	`Hello, World!`	`Hello, World!`	`Hello, World!`
Green	`Hello, World!`	`Hello, World!`	`Hello, World!`	`Hello, World!`
Blue	`Hello, World!`	`Hello, World!`	`Hello, World!`	`Hello, World!`

XSmall	`Hello, World!`
Small	`Hello, World!`
Regular	`Hello, World!`
Medium	`Hello, World!`
Large	`Hello, World!`
XLarge	`Hello, World!`

Normal	`Hello, World!`
Bold	`Hello, World!`

Dropdown menu

View in docs

	Accent	Neutral
Primary	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫
Secondary	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫
Tertiary	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫

	Primary	Secondary	Tertiary
Small	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫
Regular	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫	Dropdown Edit ⌘ E Duplicate ⌘ D Share Add to library Delete ⌘ ⌫

Emphasis

View in docs

Emphasis text, often styled using the <em> tag in HTML, is used to draw attention to specific words or phrases within a paragraph. It subtly alters the text's appearance, typically through italics, to highlight important information or convey a particular tone. This helps guide the reader's focus and ensures that critical points are not overlooked. Emphasis text is an essential tool in creating a dynamic and engaging narrative flow.

Eyebrow

View in docs

RiseVerse V1.0

Heading

View in docs

Headings set the tone and guide the reader.

Typography is the foundation of effective design, playing a critical role in conveying information and setting the tone for a brand or project.

Headings set the tone and guide the reader.

Typography is the foundation of effective design, playing a critical role in conveying information and setting the tone for a brand or project.

Headings set the tone and guide the reader.

Typography is the foundation of effective design, playing a critical role in conveying information and setting the tone for a brand or project.

Headings set the tone and guide the reader.

Typography is the foundation of effective design, playing a critical role in conveying information and setting the tone for a brand or project.

Small	Headings set the tone and guide the reader.
Size H6	Headings set the tone and guide the reader.
Size H5	Headings set the tone and guide the reader.
Size H4	Headings set the tone and guide the reader.
Size H3	Headings set the tone and guide the reader.
Size H2	Headings set the tone and guide the reader.
Size H1	Headings set the tone and guide the reader.
Display	Headings set the tone and guide the reader.

Primary	Headings set the tone and guide the reader.
Secondary	Headings set the tone and guide the reader.
Disabled	Headings set the tone and guide the reader.
Accent	Headings set the tone and guide the reader.
Error	Headings set the tone and guide the reader.
Warning	Headings set the tone and guide the reader.
Success	Headings set the tone and guide the reader.
Information	Headings set the tone and guide the reader.
Alternate	Headings set the tone and guide the reader.

Light	Headings set the tone and guide the reader.
Normal	Headings set the tone and guide the reader.
Medium	Headings set the tone and guide the reader.
Bold	Headings set the tone and guide the reader.

H6	Headings set the tone and guide the reader.
H5	Headings set the tone and guide the reader.
H4	Headings set the tone and guide the reader.
H3	Headings set the tone and guide the reader.
H2	Headings set the tone and guide the reader.
H1	Headings set the tone and guide the reader.

Icon

View in docs

Small
Small/Fill
Small/Square
Small/Fill/Square
Regular
Regular/Fill
Regular/Square
Regular/Fill/Square
Medium
Medium/Fill
Medium/Square
Medium/Fill/Square
Large
Large/Fill
Large/Square
Large/Fill/Square
XLarge
XLarge/Fill
XLarge/Square
XLarge/Fill/Square

2XSmall
XSmall
Small
Medium
Large
XLarge
2XLarge

Primary
Secondary
Disabled
Accent
Error
Warning
Success
Information
Alternate strong

Kbd

View in docs

Press ⌘ + S to save your document, or press ⌘ + Q to quit the application.

XSmall	Shift + Tab
Small	Shift + Tab
Regular	Shift + Tab
Medium	Shift + Tab
Large	Shift + Tab
XLarge	Shift + Tab

Link

View in docs

Accent	Neutral
Text links are crucial for creating interactive content, enabling users to access related information seamlessly. Well-styled links enhance the user experience by guiding readers to relevant pages and resources.	Text links are crucial for creating interactive content, enabling users to access related information seamlessly. Well-styled links enhance the user experience by guiding readers to relevant pages and resources.

Neutral	RiseVerse Library	RiseVerse Library
Accent	RiseVerse Library	RiseVerse Library
Alternate	RiseVerse Library	RiseVerse Library

XSmall	RiseVerse Library
Small	RiseVerse Library
Regular	RiseVerse Library
Medium	RiseVerse Library
Large	RiseVerse Library
XLarge	RiseVerse Library

Light	RiseVerse Library
Normal	RiseVerse Library
Medium	RiseVerse Library
Bold	RiseVerse Library

List

View in docs

Unordered	Ordered
Lists organize information clearly and concisely, making it easier to understand. A three-item list highlights key points effectively, ensuring important details stand out. Using lists enhances readability, making your content more engaging and accessible.	Lists organize information clearly and concisely, making it easier to understand. A three-item list highlights key points effectively, ensuring important details stand out. Using lists enhances readability, making your content more engaging and accessible.

Pagination

View in docs

...

Rating

View in docs

	4.8 ∙ 112 Ratings 18 reviews	4.8 ∙ 112 Ratings 18 reviews
	4.8 ∙ 112 Ratings 18 reviews	4.8 ∙ 112 Ratings 18 reviews

Segmented Control

View in docs

	Tab	Link
Small	List Board Gallery	System Light Dark
Regular	List Board Gallery	System Light Dark
Large	List Board Gallery	System Light Dark

Select

View in docs

	Accent	Neutral
Strong	Select a service* (Agency) Select option Select link Thank you! Your submission has been received! Oops! Something went wrong while submitting the form.	Select a service* (Agency) Select option Select link Thank you! Your submission has been received! Oops! Something went wrong while submitting the form.
Soft	Select a service* (Agency) Select option Select link Thank you! Your submission has been received! Oops! Something went wrong while submitting the form.	Select a service* (Agency) Select option Select link Thank you! Your submission has been received! Oops! Something went wrong while submitting the form.

	Strong	Soft
Small	Web Design* (Responsive Sites) Select option Select link Thank you! Your submission has been received! Oops! Something went wrong while submitting the form.	Web Design* (Responsive Sites) Select option Select link Thank you! Your submission has been received! Oops! Something went wrong while submitting the form.
Regular	Web Design* (Responsive Sites) Select option Select link Thank you! Your submission has been received! Oops! Something went wrong while submitting the form.	Web Design* (Responsive Sites) Select option Select link Thank you! Your submission has been received! Oops! Something went wrong while submitting the form.

Separator

View in docs

Divider

Button

Strong

View in docs

The key takeaway is, focus on what matters most.

Tabs

View in docs

Accent	Neutral
Home Profile Settings	Home Profile Settings
Home Profile Settings	Home Profile Settings

Small	Home Profile Settings	Home Profile Settings
Regular	Home Profile Settings	Home Profile Settings

Tab nav

View in docs

Accent	Neutral
Home Profile Settings	Home Profile Settings
Home Profile Settings	Home Profile Settings

Card	List
Select menu Dashboard Messages Notifications Settings Help	Select menu Dashboard Messages Notifications Settings Help

Small	Home Profile Settings	Home Profile Settings
Normal	Home Profile Settings	Home Profile Settings

Tag

View in docs

Dev

France

RiseVerse

CEO

Text

View in docs

Typography is the foundation of effective design, playing a critical role in conveying information and setting the tone for a brand or project. The art of typography lies in balancing various elements like font size, weight, spacing, and hierarchy to create a visually cohesive and readable layout.