BlueVoid.pl - Shadcn Test

accordion

alert

Alert

Alert description

Alert

Alert description

alert-dialog

aspect-ratio

attachment

workspace.pngPNG · 820 KB

message-renderer.tsxTypeScript · 12 KB

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

sales-dashboard.pdfUploading · 64%

avatar

Avatar

MK

Avatar Fallback text

MK

Avatar Fallback Icon

badge

primary

secondary

outline

destructive

custom color

breadcrumb

bubble

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Reply to message

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Like

button

button-group

Prefix

Suffix

calendar

November 2026

S	M	T	W	T	F	S

Event Date, November 2026

card

Card Title

Card Description

Create project

Deploy your new project in one-click.

carousel

1

2

3

4

5

chart

Bar Chart - Interactive

Line Chart - Time Series

Grouped Bar - Multiple Series

checkbox

Unchecked

Checked

code-block

app/api/chat/route.ts

// ...// code here// ...

collapsible

@peduarte starred 3 repositories

@radix-ui/primitives

combobox

command

context-menu

Right click here

dialog

drawer

dropdown-menu

empty

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

field

Profile

This appears on invoices and emails.

Subscribe to the newsletter

Preferences

Dark mode

form

hover-card

input

Picture

input-group

https://

input-otp

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

item

Project Files

Contains source code, assets, and configuration files.

Settings

Manage your preferences and account details.

kbd

Currently pressed:None

Example:Ctrl+Cto copy

label

Picture

Unchecked

marker

This is a default marker with an icon and content.

Section ASection BSection C

Bordered marker with content spanning multiple lines.

menubar

message

A

Alex

Hello! How are you today?

10:00 AM

You

I'm doing great, thanks! How about you?

10:01 AM

A

Alex

Pretty good. Want to grab coffee later?

10:02 AM

message-scroller

You

This is message 2 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

2

User

This is message 3 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

You

This is message 4 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

4

User

This is message 5 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

You

This is message 6 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

6

User

This is message 7 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

You

This is message 8 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

8

User

This is message 9 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

You

This is message 10 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

10

User

This is message 11 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

You

This is message 12 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

12

User

This is message 13 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

You

This is message 14 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

14

User

This is message 15 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

You

This is message 16 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

16

User

This is message 17 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

You

This is message 18 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

18

User

This is message 19 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

You

This is message 20 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

20

User

This is message 21 in the scroller. It demonstrates the message scroller component with auto-scroll behavior.

native-select

navigation-menu

pagination

pagination-primitive

popover

progress

questionnaire

radio-group

Select your preferred contact method

Email

Phone

SMS

Choose a plan

Free

Pro

Enterprise

resizable

One

Two

Three

scroll-area

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

select

separator

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

sheet

sidebar

skeleton

slider

sonner

spinner

Default

Size 6

Size 8

switch

Airplane Mode

table

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

Shadcn Test Components

accordion

Test

Test2

alert

alert-dialog

aspect-ratio

attachment

avatar

Avatar

Avatar Fallback text

Avatar Fallback Icon

badge

breadcrumb

bubble

button

button-group

calendar

card

Card Title

Create project

carousel

chart

Bar Chart - Interactive

Line Chart - Time Series

Grouped Bar - Multiple Series

checkbox

code-block

collapsible

@peduarte starred 3 repositories

combobox

command

context-menu

dialog

drawer

dropdown-menu

empty

field

form

hover-card

input

input-group

input-otp

item

kbd

label

marker

menubar

message

message-scroller

native-select

navigation-menu

pagination

pagination-primitive

popover

progress

questionnaire

radio-group

resizable

scroll-area

Tags

select

separator

Radix Primitives

sheet

sidebar

skeleton

slider

sonner

spinner

switch

table

tabs

Account

textarea

toggle

toggle-group

Multiple

Single

Sizes