H
Hitesh Vaghela
hitesh@launchpad.dev
person My Profile settings Settings help Help & Support
logout Sign Out
search ESC

Component Showcase

Every component, single scroll. Flip the theme from the sidebar footer to verify Light, Dark, and Sidebar‑dark in one pass. Use the nested “Component Showcase” menu in the sidebar to jump straight to any component.

UI Controls

Button
Solid
Outline
Soft
Ghost
Link
Sizes
Shapes
States
Hover effects (hover to trigger)
Button group
Badge
Solid
PrimarySecondarySuccessDangerWarningInfoDarkLight
Soft
PrimarySecondarySuccessDangerWarningInfoDarkLight
Outline
PrimarySecondarySuccessDangerWarningInfoDarkLight
Sizes & shapes
Small Default Large Pill Dot Pulse
Pill
Solid
PrimarySecondarySuccessDangerWarningInfoDarkLight
Soft
PrimarySecondarySuccessDangerWarningInfoDarkLight
Outline
PrimarySecondarySuccessDangerWarningInfoDarkLight
Sizes
Small Default Large
Label
Solid
PrimarySecondarySuccessDangerWarningInfoDarkLight
Soft
PrimarySecondarySuccessDangerWarningInfoDarkLight
Chip
Solid
PrimarySecondarySuccessDangerWarningInfoDarkLight
Soft
PrimarySecondarySuccessDangerWarningInfoDarkLight
Outline
PrimarySecondarySuccessDangerWarningInfoDarkLight
Sizes & states
Small Default Large Selectable Selected Disabled
Avatar
Sizes
JD JD JD JD JD JD
Colors (soft)
PRSESUDAWAINDALI
Square
PRSESUDAWAINDALI
Spinner
Sizes
Colors
Dots variant
Progress
Sizes
Colors
Striped & indeterminate

Notifications

Alert
Soft
Primary: This is a primary alert.
Success: This is a success alert.
Danger: This is a danger alert.
Warning: This is a warning alert.
Info: This is a info alert.
Solid
Heads up! Solid primary alert.
Heads up! Solid success alert.
Heads up! Solid danger alert.
Heads up! Solid warning alert.
Heads up! Solid info alert.
Dismissible
Your changes have been saved.
Toast
Inline preview (normally fixed-positioned)
●
Primary toast
Operation completed successfully.
●
Success toast
Operation completed successfully.
●
Danger toast
Operation completed successfully.
●
Warning toast
Operation completed successfully.
●
Info toast
Operation completed successfully.
Dropdown
Variants
Profile Settings Billing
Logout
Option A Option B Disabled
Section
Item 1 Item 2
Copy
Click to copy
npm install @launchpad/frontend

Layout

Card
Basic
Card title

Some quick example text to build on the card title.

Last updated 3 mins ago
Colored backgrounds
Primary
Body
Footer
Secondary
Body
Footer
Success
Body
Footer
Danger
Body
Footer
Warning
Body
Footer
Info
Body
Footer
Dark
Body
Footer
Light
Body
Footer
Border colors
Primary
Body content
Secondary
Body content
Success
Body content
Danger
Body content
Warning
Body content
Info
Body content
Dark
Body content
Light
Body content
Header colors
Primary
Body
Secondary
Body
Success
Body
Danger
Body
Warning
Body
Info
Body
Dark
Body
Light
Body
Style modifiers
Flat
Elevated
Bordered
Hover me
Clickable
Modal & Drawer
Modal triggers
Drawer triggers

Default modal

Modal body content for theme verification.

Small

Compact dialog.

Large

Wider dialog for richer forms.

Centered

Vertically centered.

Scrollable

Long content paragraph 1.

Long content paragraph 2.

Long content paragraph 3.

Long content paragraph 4.

Long content paragraph 5.

Long content paragraph 6.

Long content paragraph 7.

Long content paragraph 8.

Long content paragraph 9.

Long content paragraph 10.

Long content paragraph 11.

Long content paragraph 12.

Long content paragraph 13.

Long content paragraph 14.

Long content paragraph 15.

Long content paragraph 16.

Long content paragraph 17.

Long content paragraph 18.

Long content paragraph 19.

Long content paragraph 20.

Right drawer

Slides in from the right.

Left drawer

Slides in from the left.
Table
Default
#NameRoleStatus
1AliceEngineerActive
2BobDesignerPending
3CarolManagerActive
4DaveSupportInactive
5EveEngineerBlocked
Striped + hover + bordered
#NameRoleStatus
1AliceEngineerActive
2BobDesignerPending
3CarolManagerActive
4DaveSupportInactive
5EveEngineerBlocked
Borderless
#NameRoleStatus
1AliceEngineerActive
2BobDesignerPending
3CarolManagerActive
4DaveSupportInactive
5EveEngineerBlocked
Compact
#NameRoleStatus
1AliceEngineerActive
2BobDesignerPending
3CarolManagerActive
4DaveSupportInactive
5EveEngineerBlocked
Timeline
Default

  • Deployed to staging

    10 minutes ago

  • Build succeeded

    15 minutes ago

  • Lint warnings

    20 minutes ago

  • Test failure

    30 minutes ago

Centered

  • Step 1

    Started.

  • Step 2

    Processing.

  • Step 3

    Completed.

Tabs
Default

Overview content.

Details content.

Activity content.

Pills
Daily metrics.
Weekly metrics.
Monthly metrics.
Bordered
One
Two
Three

Interactive

Collapse
Toggle
Content revealed by the collapse component.
Accordion
Default
Content for section 1.
Content for section 2.
Content for section 3.
Flush
Flush item 1.
Flush item 2.
Flush item 3.
Separated
Separated card 1.
Separated card 2.
Separated card 3.
Pagination
Default
Small
Large
Minimal
Stepper
Horizontal
  1. 1
    Account
  2. 2
    Profile
  3. 3
    Confirm
  4. 4
    Done
Compact
  1. 1
  2. 2
  3. 3
  4. 4
Vertical
  1. 1
    Start
  2. 2
    In progress
  3. 3
    Finish
Slider
Colors
Sizes
Disabled
Rating
Interactive
Readonly
Tree View
Basic
  • src/
    • components/
      • Button.js
      • Card.js
      • Modal.js
    • index.js
  • package.json

Specialized

Autocomplete
Apple
Banana
Cherry
Dragonfruit
Elderberry
Fig
Grape
Select
Native
Custom (enhanced)
Apple
Banana
Cherry
Mango
Papaya
Sizes
One
Two
One
Two
Breadcrumb
Default
  1. Home
  2. Library
  3. Data
  4. Current
Arrow
  1. Home
  2. Library
  3. Data
  4. Current
Dot
  1. Home
  2. Library
  3. Data
  4. Current
Dash
  1. Home
  2. Library
  3. Data
  4. Current
Skeleton
Primitives
Composed card
Empty State
Default
📭

No messages

Your inbox is empty. When you receive messages, they'll appear here.

Compact
🔎

No results

Try adjusting your search terms.

Carousel
Slide 1
Slide 2
Slide 3
Context Menu
Right-click target
Right-click me
Cut
Copy
Paste
Delete
Properties
List Group
Default
  • First item
  • Active item
  • Third item
  • Disabled item
Color variants
  • Success
  • Danger
  • Warning
  • Info
Flush
  • First
  • Second
  • Third
Horizontal
  • One
  • Two
  • Three
Tooltip
Positions (hover to trigger)

Forms

Inputs, Textarea & Form Groups
We'll never share your email.
That username is taken.
Looks good.
Approaching 500 character limit.
Checkbox & Radio
Checkboxes
Radios
Switch
Sizes & states
OTP Input
6-digit