![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1254 1254" role="img" aria-label="Qeet logo">%0A <title>Qeet</title>%0A <defs>%0A %3C!-- Mask carves a true transparent hole through the bowl -->%0A <mask id="qBowlHole" maskUnits="userSpaceOnUse">%0A <rect width="1254" height="1254" fill="%23FFFFFF"/>%0A <path fill="%23000000" d="%0A M669.964722,338.242981%0A C714.535645,351.395386 751.471863,375.501129 779.470825,412.042328%0A C814.503479,457.763184 828.529907,509.627594 821.508301,567.354248%0A C815.037964,614.333862 796.163635,655.232849 763.035339,688.671509%0A C715.514587,736.637695 657.793396,758.218994 590.453552,749.188904%0A C504.824402,737.706116 436.176788,675.264038 417.429352,590.163330%0A C398.281219,503.243683 423.564056,429.604553 493.036591,373.787628%0A C542.333557,334.180542 599.844727,323.023224 661.836060,336.080780%0A C664.430725,336.627319 666.966248,337.454285 669.964722,338.242981 z"/>%0A </mask>%0A </defs>%0A%0A %3C!-- Bowl + descender curve (dark) with hole masked out -->%0A <path mask="url(%23qBowlHole)" fill="%230A0A0A" d="%0A M821.791687,894.018799%0A C803.326172,903.166809 785.336975,913.478882 766.312927,921.261658%0A C682.977112,955.354797 597.577454,960.575989 510.776794,936.458923%0A C427.137451,913.220154 358.319214,867.022827 303.655487,799.771240%0A C259.619385,745.594543 231.852402,683.929749 219.855377,615.135681%0A C205.246201,531.363037 215.390701,450.569489 250.641022,373.361603%0A C287.752838,292.076569 346.057434,229.640503 423.650269,185.486679%0A C489.535767,147.994873 560.685242,131.387634 636.355042,134.347610%0A C667.607117,135.570114 698.193970,141.258041 728.247498,149.842102%0A C729.508179,150.202209 730.704346,150.788620 731.848389,151.967499%0A C730.448730,152.746170 729.071960,153.118286 727.822754,152.863968%0A C709.200012,149.072678 691.179749,151.872894 674.192566,159.455490%0A C609.452271,188.353607 598.711670,273.967438 647.019897,320.610840%0A C654.005493,327.355682 662.567566,332.467743 669.964722,338.242981%0A C666.966248,337.454285 664.430725,336.627319 661.836060,336.080780%0A C599.844727,323.023224 542.333557,334.180542 493.036591,373.787628%0A C423.564056,429.604553 398.281219,503.243683 417.429352,590.163330%0A C436.176788,675.264038 504.824402,737.706116 590.453552,749.188904%0A C657.793396,758.218994 715.514587,736.637695 763.035339,688.671509%0A C796.163635,655.232849 815.037964,614.333862 821.583984,568.151245%0A C821.813477,570.053894 822.135437,571.531555 822.135864,573.009338%0A C822.152954,633.669861 822.122437,694.330322 822.139038,754.990845%0A C822.151672,800.985046 822.219727,846.979187 822.106567,893.217285%0A C821.897339,893.647034 821.844543,893.832886 821.791687,894.018799 z"/>%0A%0A %3C!-- Bright orange (brand) -->%0A <path fill="%23F26D0E" d="%0A M822.263123,892.973389%0A C822.219727,846.979187 822.151672,800.985046 822.139038,754.990845%0A C822.122437,694.330322 822.152954,633.669861 822.135864,573.009338%0A C822.135437,571.531555 821.813477,570.053894 821.565674,567.779114%0A C828.529907,509.627594 814.503479,457.763184 779.470825,412.042328%0A C751.471863,375.501129 714.535645,351.395386 670.400085,338.335388%0A C662.567566,332.467743 654.005493,327.355682 647.019897,320.610840%0A C598.711670,273.967438 609.452271,188.353607 674.192566,159.455490%0A C691.179749,151.872894 709.200012,149.072678 727.822754,152.863968%0A C729.071960,153.118286 730.448730,152.746170 731.992310,152.316010%0A C769.401550,160.954422 803.019836,177.923462 834.791809,198.657364%0A C880.962646,228.787796 919.463745,266.834351 950.460815,312.497620%0A C982.820740,360.168488 1003.902954,412.329163 1013.963745,469.046661%0A C1020.018982,503.183136 1020.544678,537.589294 1019.593262,572.806763%0A C1019.448914,575.015015 1019.590332,576.503357 1019.731812,577.991638%0A C1019.772949,580.350159 1019.814148,582.708679 1019.428955,585.628662%0A C1017.683411,593.105652 1016.613953,600.080200 1014.998474,606.925842%0A C1009.980408,628.190918 1005.808533,649.733887 999.348572,670.561157%0A C990.918884,697.739197 978.245422,723.197205 964.169678,747.999512%0A C946.413818,779.286499 923.983276,806.907410 899.392212,832.849548%0A C890.630920,842.092285 880.599915,850.155457 870.943115,858.519897%0A C855.853760,871.589722 839.671936,883.159241 822.263123,892.973389 z"/>%0A%0A %3C!-- Dark orange shadow -->%0A <path fill="%23D85301" d="%0A M822.106567,893.217285%0A C839.671936,883.159241 855.853760,871.589722 870.943115,858.519897%0A C880.599915,850.155457 890.630920,842.092285 899.392212,832.849548%0A C923.983276,806.907410 946.413818,779.286499 964.169678,747.999512%0A C978.245422,723.197205 990.918884,697.739197 999.348572,670.561157%0A C1005.808533,649.733887 1009.980408,628.190918 1014.998474,606.925842%0A C1016.613953,600.080200 1017.683411,593.105652 1019.364136,586.065613%0A C1019.808838,604.428406 1019.960144,622.915649 1019.964478,641.402893%0A C1019.996887,779.531555 1020.306824,917.661377 1019.819763,1055.788208%0A C1019.679565,1095.540405 1004.006104,1128.543701 969.487183,1150.236328%0A C923.479797,1179.148682 863.557739,1162.918457 837.012451,1115.253418%0A C826.966858,1097.215454 822.142151,1077.902100 822.083740,1057.398804%0A C821.929504,1003.248413 821.950806,949.097534 821.846924,894.482788%0A C821.844543,893.832886 821.897339,893.647034 822.106567,893.217285 z"/>%0A%0A <path fill="%23D85301" d="%0A M1019.828918,577.584717%0A C1019.590332,576.503357 1019.448914,575.015015 1019.526367,573.272095%0A C1019.805603,574.404175 1019.865845,575.791016 1019.828918,577.584717 z"/>%0A</svg>%0A){kind=small}
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1254 1254" role="img" aria-label="Qeet logo">%0A <title>Qeet</title>%0A <defs>%0A <mask id="qBowlHole" maskUnits="userSpaceOnUse">%0A <rect width="1254" height="1254" fill="%23FFFFFF"/>%0A <path fill="%23000000" d="%0A M669.964722,338.242981%0A C714.535645,351.395386 751.471863,375.501129 779.470825,412.042328%0A C814.503479,457.763184 828.529907,509.627594 821.508301,567.354248%0A C815.037964,614.333862 796.163635,655.232849 763.035339,688.671509%0A C715.514587,736.637695 657.793396,758.218994 590.453552,749.188904%0A C504.824402,737.706116 436.176788,675.264038 417.429352,590.163330%0A C398.281219,503.243683 423.564056,429.604553 493.036591,373.787628%0A C542.333557,334.180542 599.844727,323.023224 661.836060,336.080780%0A C664.430725,336.627319 666.966248,337.454285 669.964722,338.242981 z"/>%0A </mask>%0A </defs>%0A%0A %3C!-- Bowl + descender curve (white) with hole masked out -->%0A <path mask="url(%23qBowlHole)" fill="%23FCFCFC" d="%0A M821.791687,894.018799%0A C803.326172,903.166809 785.336975,913.478882 766.312927,921.261658%0A C682.977112,955.354797 597.577454,960.575989 510.776794,936.458923%0A C427.137451,913.220154 358.319214,867.022827 303.655487,799.771240%0A C259.619385,745.594543 231.852402,683.929749 219.855377,615.135681%0A C205.246201,531.363037 215.390701,450.569489 250.641022,373.361603%0A C287.752838,292.076569 346.057434,229.640503 423.650269,185.486679%0A C489.535767,147.994873 560.685242,131.387634 636.355042,134.347610%0A C667.607117,135.570114 698.193970,141.258041 728.247498,149.842102%0A C729.508179,150.202209 730.704346,150.788620 731.848389,151.967499%0A C730.448730,152.746170 729.071960,153.118286 727.822754,152.863968%0A C709.200012,149.072678 691.179749,151.872894 674.192566,159.455490%0A C609.452271,188.353607 598.711670,273.967438 647.019897,320.610840%0A C654.005493,327.355682 662.567566,332.467743 669.964722,338.242981%0A C666.966248,337.454285 664.430725,336.627319 661.836060,336.080780%0A C599.844727,323.023224 542.333557,334.180542 493.036591,373.787628%0A C423.564056,429.604553 398.281219,503.243683 417.429352,590.163330%0A C436.176788,675.264038 504.824402,737.706116 590.453552,749.188904%0A C657.793396,758.218994 715.514587,736.637695 763.035339,688.671509%0A C796.163635,655.232849 815.037964,614.333862 821.583984,568.151245%0A C821.813477,570.053894 822.135437,571.531555 822.135864,573.009338%0A C822.152954,633.669861 822.122437,694.330322 822.139038,754.990845%0A C822.151672,800.985046 822.219727,846.979187 822.106567,893.217285%0A C821.897339,893.647034 821.844543,893.832886 821.791687,894.018799 z"/>%0A%0A %3C!-- Bright orange (brand) -->%0A <path fill="%23F26D0E" d="%0A M822.263123,892.973389%0A C822.219727,846.979187 822.151672,800.985046 822.139038,754.990845%0A C822.122437,694.330322 822.152954,633.669861 822.135864,573.009338%0A C822.135437,571.531555 821.813477,570.053894 821.565674,567.779114%0A C828.529907,509.627594 814.503479,457.763184 779.470825,412.042328%0A C751.471863,375.501129 714.535645,351.395386 670.400085,338.335388%0A C662.567566,332.467743 654.005493,327.355682 647.019897,320.610840%0A C598.711670,273.967438 609.452271,188.353607 674.192566,159.455490%0A C691.179749,151.872894 709.200012,149.072678 727.822754,152.863968%0A C729.071960,153.118286 730.448730,152.746170 731.992310,152.316010%0A C769.401550,160.954422 803.019836,177.923462 834.791809,198.657364%0A C880.962646,228.787796 919.463745,266.834351 950.460815,312.497620%0A C982.820740,360.168488 1003.902954,412.329163 1013.963745,469.046661%0A C1020.018982,503.183136 1020.544678,537.589294 1019.593262,572.806763%0A C1019.448914,575.015015 1019.590332,576.503357 1019.731812,577.991638%0A C1019.772949,580.350159 1019.814148,582.708679 1019.428955,585.628662%0A C1017.683411,593.105652 1016.613953,600.080200 1014.998474,606.925842%0A C1009.980408,628.190918 1005.808533,649.733887 999.348572,670.561157%0A C990.918884,697.739197 978.245422,723.197205 964.169678,747.999512%0A C946.413818,779.286499 923.983276,806.907410 899.392212,832.849548%0A C890.630920,842.092285 880.599915,850.155457 870.943115,858.519897%0A C855.853760,871.589722 839.671936,883.159241 822.263123,892.973389 z"/>%0A%0A %3C!-- Dark orange shadow -->%0A <path fill="%23D85301" d="%0A M822.106567,893.217285%0A C839.671936,883.159241 855.853760,871.589722 870.943115,858.519897%0A C880.599915,850.155457 890.630920,842.092285 899.392212,832.849548%0A C923.983276,806.907410 946.413818,779.286499 964.169678,747.999512%0A C978.245422,723.197205 990.918884,697.739197 999.348572,670.561157%0A C1005.808533,649.733887 1009.980408,628.190918 1014.998474,606.925842%0A C1016.613953,600.080200 1017.683411,593.105652 1019.364136,586.065613%0A C1019.808838,604.428406 1019.960144,622.915649 1019.964478,641.402893%0A C1019.996887,779.531555 1020.306824,917.661377 1019.819763,1055.788208%0A C1019.679565,1095.540405 1004.006104,1128.543701 969.487183,1150.236328%0A C923.479797,1179.148682 863.557739,1162.918457 837.012451,1115.253418%0A C826.966858,1097.215454 822.142151,1077.902100 822.083740,1057.398804%0A C821.929504,1003.248413 821.950806,949.097534 821.846924,894.482788%0A C821.844543,893.832886 821.897339,893.647034 822.106567,893.217285 z"/>%0A%0A <path fill="%23D85301" d="%0A M1019.828918,577.584717%0A C1019.590332,576.503357 1019.448914,575.015015 1019.526367,573.272095%0A C1019.805603,574.404175 1019.865845,575.791016 1019.828918,577.584717 z"/>%0A</svg>%0A){kind=small}
QeetrixColor Swatch
Beta
Ready to use, but its API may still change before it is marked stable.
Usage
Import
import { ColorSwatch } from "@qeetrix/ui";It can also be imported on its own from @qeetrix/ui/components/color-swatch.
Variant props
| Prop | Values |
|---|---|
size | xs · sm · md · lg |
States
hover · focus-visible · disabled · selected
Support
| Feature | Status |
|---|---|
| Right-to-left | Not applicable |
| Dark mode | Supported |
| Density | Not applicable |
| Server rendering | Client component |
| Reduced motion | Supported |
Accessibility
No ARIA widget pattern. Not yet audited.
Tests
Covered by unit, accessibility (axe) and visual tests.