Origin UI components

Components

640

Framework

React

Stack

React, TypeScript, Tailwind

License

MIT

GitHub stars

10,669

Source

https://github.com/cosscom/ui

Website

https://coss.com/origin

Install

npx shadcn@latest add @coss/{name}

All Origin UI components

• Accordion: A set of collapsible panels with headings and content.
• Alert Dialog: A dialog that requires user response to proceed.
• Avatar: An image element with a fallback for representing the user.
• Badge: A badge or a component that looks like a badge.
• Breadcrumb: Displays the path to the current resource using a hierarchy of links.
• Button: A button or a component that looks like a button.
• Calendar: A date picker component with range and multi-select support.
• Calendar Rac
• Checkbox: A control allowing the user to toggle between checked and not checked.
• Checkbox Tree
• Collapsible: A collapsible panel controlled by a button trigger.
• Command: A command palette component built with Dialog and Autocomplete for searching and executing commands.
• Comp 01
• Comp 02
• Comp 03
• Comp 04
• Comp 05
• Comp 06
• Comp 07
• Comp 08
• Comp 09
• Comp 10
• Comp 100
• Comp 101
• Comp 102
• Comp 103
• Comp 104
• Comp 105
• Comp 106
• Comp 107
• Comp 108
• Comp 109
• Comp 11
• Comp 110
• Comp 111
• Comp 112
• Comp 113
• Comp 114
• Comp 115
• Comp 116
• Comp 117
• Comp 118
• Comp 119
• Comp 12
• Comp 120
• Comp 121
• Comp 122
• Comp 123
• Comp 124
• Comp 125
• Comp 126
• Comp 127
• Comp 128
• Comp 129
• Comp 13
• Comp 130
• Comp 131
• Comp 132
• Comp 133
• Comp 134
• Comp 135
• Comp 136
• Comp 137
• Comp 138
• Comp 139
• Comp 14
• Comp 140
• Comp 141
• Comp 142
• Comp 143
• Comp 144
• Comp 145
• Comp 146
• Comp 147
• Comp 148
• Comp 149
• Comp 15
• Comp 150
• Comp 151
• Comp 152
• Comp 153
• Comp 154
• Comp 155
• Comp 156
• Comp 157
• Comp 158
• Comp 159
• Comp 16
• Comp 160
• Comp 161
• Comp 162
• Comp 163
• Comp 164
• Comp 165
• Comp 166
• Comp 167
• Comp 168
• Comp 169
• Comp 17
• Comp 170
• Comp 171
• Comp 172
• Comp 173
• Comp 174
• Comp 175
• Comp 176
• Comp 177
• Comp 178
• Comp 179
• Comp 18
• Comp 180
• Comp 181
• Comp 182
• Comp 183
• Comp 184
• Comp 185
• Comp 186
• Comp 187
• Comp 188
• Comp 189
• Comp 19
• Comp 190
• Comp 191
• Comp 192
• Comp 193
• Comp 194
• Comp 195
• Comp 196
• Comp 197
• Comp 198
• Comp 199
• Comp 20
• Comp 200
• Comp 201
• Comp 202
• Comp 203
• Comp 204
• Comp 205
• Comp 206
• Comp 207
• Comp 208
• Comp 209
• Comp 21
• Comp 210
• Comp 211
• Comp 212
• Comp 213
• Comp 214
• Comp 215
• Comp 216
• Comp 217
• Comp 218
• Comp 219
• Comp 22
• Comp 220
• Comp 221
• Comp 222
• Comp 223
• Comp 224
• Comp 225
• Comp 226
• Comp 227
• Comp 228
• Comp 229
• Comp 23
• Comp 230
• Comp 231
• Comp 232
• Comp 233
• Comp 234
• Comp 235
• Comp 236
• Comp 237
• Comp 238
• Comp 239
• Comp 24
• Comp 240
• Comp 241
• Comp 242
• Comp 243
• Comp 244
• Comp 245
• Comp 246
• Comp 247
• Comp 248
• Comp 249
• Comp 25
• Comp 250
• Comp 251
• Comp 252
• Comp 253
• Comp 254
• Comp 255
• Comp 256
• Comp 257
• Comp 258
• Comp 259
• Comp 26
• Comp 260
• Comp 261
• Comp 262
• Comp 263
• Comp 264
• Comp 265
• Comp 266
• Comp 267
• Comp 268
• Comp 269
• Comp 27
• Comp 270
• Comp 271
• Comp 272
• Comp 273
• Comp 274
• Comp 275
• Comp 276
• Comp 277
• Comp 278
• Comp 279
• Comp 28
• Comp 280
• Comp 281
• Comp 282
• Comp 283
• Comp 284
• Comp 285
• Comp 286
• Comp 287
• Comp 288
• Comp 289
• Comp 29
• Comp 290
• Comp 291
• Comp 292
• Comp 293
• Comp 294
• Comp 295
• Comp 296
• Comp 297
• Comp 298
• Comp 299
• Comp 30
• Comp 300
• Comp 301
• Comp 302
• Comp 303
• Comp 304
• Comp 305
• Comp 306
• Comp 307
• Comp 308
• Comp 309
• Comp 31
• Comp 310
• Comp 311
• Comp 312
• Comp 313
• Comp 314
• Comp 315
• Comp 316
• Comp 317
• Comp 318
• Comp 319
• Comp 32
• Comp 320
• Comp 321
• Comp 322
• Comp 323
• Comp 324
• Comp 325
• Comp 326
• Comp 327
• Comp 328
• Comp 329
• Comp 33
• Comp 330
• Comp 331
• Comp 332
• Comp 333
• Comp 334
• Comp 335
• Comp 336
• Comp 337
• Comp 338
• Comp 339
• Comp 34
• Comp 340
• Comp 341
• Comp 342
• Comp 343
• Comp 344
• Comp 345
• Comp 346
• Comp 347
• Comp 348
• Comp 349
• Comp 35
• Comp 350
• Comp 351
• Comp 352
• Comp 353
• Comp 354
• Comp 355
• Comp 356
• Comp 357
• Comp 358
• Comp 359
• Comp 36
• Comp 360
• Comp 361
• Comp 362
• Comp 363
• Comp 364
• Comp 365
• Comp 366
• Comp 367
• Comp 368
• Comp 369
• Comp 37
• Comp 370
• Comp 371
• Comp 372
• Comp 373
• Comp 374
• Comp 375
• Comp 376
• Comp 377
• Comp 378
• Comp 379
• Comp 38
• Comp 380
• Comp 381
• Comp 382
• Comp 383
• Comp 384
• Comp 385
• Comp 386
• Comp 387
• Comp 388
• Comp 389
• Comp 39
• Comp 390
• Comp 391
• Comp 392
• Comp 393
• Comp 394
• Comp 395
• Comp 396
• Comp 397
• Comp 398
• Comp 399
• Comp 40
• Comp 400
• Comp 401
• Comp 402
• Comp 403
• Comp 404
• Comp 405
• Comp 406
• Comp 407
• Comp 408
• Comp 409
• Comp 41
• Comp 410
• Comp 411
• Comp 412
• Comp 413
• Comp 414
• Comp 415
• Comp 416
• Comp 417
• Comp 418
• Comp 419
• Comp 42
• Comp 420
• Comp 421
• Comp 422
• Comp 423
• Comp 424
• Comp 425
• Comp 426
• Comp 427
• Comp 428
• Comp 429
• Comp 43
• Comp 430
• Comp 431
• Comp 432
• Comp 433
• Comp 434
• Comp 435
• Comp 436
• Comp 437
• Comp 438
• Comp 439
• Comp 44
• Comp 440
• Comp 441
• Comp 442
• Comp 443
• Comp 444
• Comp 445
• Comp 446
• Comp 447
• Comp 448
• Comp 449
• Comp 45
• Comp 450
• Comp 451
• Comp 452
• Comp 453
• Comp 454
• Comp 455
• Comp 456
• Comp 457
• Comp 458
• Comp 459
• Comp 46
• Comp 460
• Comp 461
• Comp 462
• Comp 463
• Comp 464
• Comp 465
• Comp 466
• Comp 467
• Comp 468
• Comp 469
• Comp 47
• Comp 470
• Comp 471
• Comp 472
• Comp 473
• Comp 474
• Comp 475
• Comp 476
• Comp 477
• Comp 478
• Comp 479
• Comp 48
• Comp 480
• Comp 481
• Comp 482
• Comp 483
• Comp 484
• Comp 485
• Comp 486
• Comp 487
• Comp 488
• Comp 489
• Comp 49
• Comp 490
• Comp 491
• Comp 492
• Comp 493
• Comp 494
• Comp 495
• Comp 496
• Comp 497
• Comp 498
• Comp 499
• Comp 50
• Comp 500
• Comp 501
• Comp 502
• Comp 503
• Comp 504
• Comp 505
• Comp 506
• Comp 507
• Comp 508
• Comp 509
• Comp 51
• Comp 510
• Comp 511
• Comp 512
• Comp 513
• Comp 514
• Comp 515
• Comp 516
• Comp 517
• Comp 518
• Comp 519
• Comp 52
• Comp 520
• Comp 521
• Comp 522
• Comp 523
• Comp 524
• Comp 525
• Comp 526
• Comp 527
• Comp 528
• Comp 529
• Comp 53
• Comp 530
• Comp 531
• Comp 532
• Comp 533
• Comp 534
• Comp 535
• Comp 536
• Comp 537
• Comp 538
• Comp 539
• Comp 54
• Comp 540
• Comp 541
• Comp 542
• Comp 543
• Comp 544
• Comp 545
• Comp 546
• Comp 547
• Comp 548
• Comp 549
• Comp 55
• Comp 550
• Comp 551
• Comp 552
• Comp 553
• Comp 554
• Comp 555
• Comp 556
• Comp 557
• Comp 558
• Comp 559
• Comp 56
• Comp 560
• Comp 561
• Comp 562
• Comp 563
• Comp 564
• Comp 565
• Comp 566
• Comp 567
• Comp 568
• Comp 569
• Comp 57
• Comp 570
• Comp 571
• Comp 572
• Comp 573
• Comp 574
• Comp 575
• Comp 576
• Comp 577
• Comp 578
• Comp 579
• Comp 58
• Comp 580
• Comp 581
• Comp 582
• Comp 583
• Comp 584
• Comp 585
• Comp 586
• Comp 587
• Comp 588
• Comp 589
• Comp 59
• Comp 590
• Comp 591
• Comp 592
• Comp 593
• Comp 594
• Comp 595
• Comp 596
• Comp 597
• Comp 598
• Comp 599
• Comp 60
• Comp 61
• Comp 62
• Comp 63
• Comp 64
• Comp 65
• Comp 66
• Comp 67
• Comp 68
• Comp 69
• Comp 70
• Comp 71
• Comp 72
• Comp 73
• Comp 74
• Comp 75
• Comp 76
• Comp 77
• Comp 78
• Comp 79
• Comp 80
• Comp 81
• Comp 82
• Comp 83
• Comp 84
• Comp 85
• Comp 86
• Comp 87
• Comp 88
• Comp 89
• Comp 90
• Comp 91
• Comp 92
• Comp 93
• Comp 94
• Comp 95
• Comp 96
• Comp 97
• Comp 98
• Comp 99
• Cropper
• Datefield Rac
• Dialog: A popup that opens on top of the entire page.
• Dropdown Menu
• Hover Card
• Input: A native input element.
• Label: Renders an accessible label associated with controls.
• Multiselect
• Navigation Menu
• Pagination: A pagination with page navigation, next and previous links.
• Popover: An accessible popup anchored to a button.
• Progress: Displays the status of a task that takes a long time.
• Radio Group: A set of checkable buttons where no more than one of the buttons can be checked at a time.
• Scroll Area: A native scroll container with custom scrollbars.
• Select: A common form component for choosing a predefined value in a dropdown menu.
• Select Native
• Slider: An input where the user selects a value from within a given range.
• Sonner
• Stepper
• Switch: A control that indicates whether a setting is on or off.
• Table: A simple table component for displaying tabular data.
• Tabs: A component for toggling between related panels on the same page.
• Textarea: A native textarea element.
• Timeline
• Toast: A temporary notification that appears on screen to inform users.
• Toggle: A two-state button that can be toggled on or off.
• Toggle Group: Provides a shared state to a series of toggle buttons.
• Tooltip: A popup that appears when an element is hovered or focused, showing a hint for sighted users.
• Tree

Browse by category

• Input Components
• Data Display Components
• Navigation Components
• Feedback Components
• Overlay Components
• Action Components
• Button Components
• Text Input Components
• Form Field Components
• Select Components
• Avatar Components
• Calendar Components
• Date Picker Components
• Slider Components
• Toast Components
• Modal Components
• Checkbox Components
• Notification Components
• Accordion Components
• Form Components