RocketUI - Snippets of common UI elements

Learn how to create useful UI components with ready-to-use code snippets.

Alerts

Alert: Basic

Basic
VSC snippet: re-alert-1

Alert: Basic with icon

Basic with icon
VSC snippet: re-alert-2

Alert: Basic with title

Basic with title
VSC snippet: re-alert-3

Badges

Badge: Basic

Basic
VSC snippet: re-badge-1

Badge: Circle

Circle
VSC snippet: re-badge-2

Badge: Basic with gradient

Basic with gradient
VSC snippet: re-badge-3

Badge: Basic with icon

Basic with icon
VSC snippet: re-badge-4

Breadcrumbs

Breadcrumb: Basic

Basic
VSC snippet: re-breadcrumb-1

Breadcrumb: Arrows

Arrows
VSC snippet: re-breadcrumb-2

Breadcrumb: Arrows and highlight

Arrows and highlight
VSC snippet: re-breadcrumb-3

Breadcrumb: Arrows with icon

Arrows with icon
VSC snippet: re-breadcrumb-4

Breadcrumb: Steps with icons

Steps with icons
VSC snippet: re-breadcrumb-5

Buttons

Button: Basic

Basic
VSC snippet: re-button-1

Button: Outline

Outline
VSC snippet: re-button-2

Button: Gradient

Gradient
VSC snippet: re-button-3

Button: Shadow

Shadow
VSC snippet: re-button-4

Button: With icon

With icon
VSC snippet: re-button-5

Button: Disabled

Disabled
VSC snippet: re-button-6

Button group

Button group
VSC snippet: re-button-7

Cards

Card: Vertical - Basic

Vertical - Basic
VSC snippet: re-card-1

Card: Vertical - Inset

Vertical - Inset
VSC snippet: re-card-2

Card: Vertical - Group

Vertical - Group
VSC snippet: re-card-3

Card: Horizontal - Basic

Horizontal - Basic
VSC snippet: re-card-4

Card: Horizontal - Inset

Horizontal - Inset
VSC snippet: re-card-5

Card: Horizontal - Group

Horizontal - Group
VSC snippet: re-card-6

Forms

Form: Search

Search
VSC snippet: re-form-1

Form: Search with icon

Search with icon
VSC snippet: re-form-2

Form: Search multiple options

Search multiple options
VSC snippet: re-form-3

Navigations

Navigation: Basic

Basic
VSC snippet: re-navigation-1

Navigation: Tabs

Tabs
VSC snippet: re-navigation-2

Paginations

Pagination: Basic

Basic
VSC snippet: re-pagination-1

Pagination: With icons

With icons
VSC snippet: re-pagination-2

Pagination: With circle

With circle
VSC snippet: re-pagination-3

Pagination: Page of total

Page of total
VSC snippet: re-pagination-4

Tables

Table: Basic

Basic
VSC snippet: re-table-1

Table: Rounded

Rounded
VSC snippet: re-table-2

Table: Zebra

Zebra
VSC snippet: re-table-3

Table: Zebra and hover

Zebra and hover
VSC snippet: re-table-4

Table: Data group

Data group
VSC snippet: re-table-5