xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"DocsDescription"] 1c:I[266557,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"LLMCopyButton"] 1d:I[266557,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"ViewOptions"] 1e:I[987355,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"DocsBody"] 1f:I[655601,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"ComponentRenderPreview"] 20:I[321269,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"ColorPicker"] 21:I[655601,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"ComponentRenderCode"] 22:I[674056,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"CodeBlock"] 2c:I[674056,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"Pre"] 2d:I[192969,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"Heading"] 39:I[38234,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"Popover"] 3a:I[38234,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"PopoverTrigger"] 3b:I[463037,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"Button"] 3c:I[38234,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js","/_next/static/immutable/chunks/19lbt_5idh5y4.js","/_next/static/immutable/chunks/0q_9n2ufahmkd.js","/_next/static/immutable/chunks/2udoh2rvykgcs.js","/_next/static/immutable/chunks/2pk8hpz1xqubo.js","/_next/static/immutable/chunks/0tm1hg_7u0g7y.js","/_next/static/immutable/chunks/20-dpl84xkz4t.js"],"PopoverContent"] 5a:I[253056,["/_next/static/immutable/chunks/2euby72lpvo29.js","/_next/static/immutable/chunks/3a2_wid692aan.js","/_next/static/immutable/chunks/1l4_pjm2zifig.js","/_next/static/immutable/chunks/0r758sp_ytk86.js","/_next/static/immutable/chunks/2maguxep4j1ia.js","/_next/static/immutable/chunks/2lcvyiztg6-15.js","/_next/static/immutable/chunks/1qp45r_0d__w7.js","/_next/static/immutable/chunks/3v1sj9it_drj6.js"],"IconMark"] 7:["$","$L10",null,{"href":"/","className":"inline-flex items-center gap-2 font-medium","children":[["$","svg",null,{"viewBox":"0 0 120.09 141.73","className":"size-5","children":[["$","title",null,{"children":"Tulip Logo Icon"}],["$","defs",null,{"children":[["$","linearGradient",null,{"id":"tulip-symbol-gradient","x1":"60.5","y1":"0","x2":"60.5","y2":"141.73","gradientUnits":"userSpaceOnUse","children":[["$","stop",null,{"offset":"0","stopColor":"#ffc754"}],["$","stop",null,{"offset":"1","stopColor":"#ff1800"}]]}],["$","linearGradient",null,{"id":"tulip-symbol-gradient-2","x1":"72.4","y1":"5.81","x2":"72.4","y2":"141.73","xlinkHref":"#tulip-symbol-gradient"}],["$","linearGradient",null,{"id":"tulip-symbol-gradient-3","x1":"47.69","y1":"5.81","x2":"47.69","y2":"141.73","xlinkHref":"#tulip-symbol-gradient"}]]}],["$","g",null,{"children":["$","g",null,{"children":[["$","path",null,{"d":"M107.88,93.09c0-35.95-47.38-93.09-47.38-93.09,0,0-47.39,57.14-47.38,93.09,0,26.17,21.21,48.64,47.38,48.64,26.17,0,47.39-22.47,47.38-48.64Z","style":{"fill":"url(#tulip-symbol-gradient)","opacity":0.75}}],["$","path",null,{"d":"M116.68,109.5c12.3-33.78-12.69-103.68-12.69-103.68,0,0-64.07,37.49-76.37,71.27-8.95,24.59,3.3,52.97,27.89,61.92,24.59,8.95,52.21-4.91,61.16-29.5Z","style":{"fill":"url(#tulip-symbol-gradient-2)","opacity":0.75}}],["$","path",null,{"d":"M92.46,77.09C80.16,43.3,16.09,5.81,16.09,5.81c0,0-24.98,69.9-12.69,103.68,8.95,24.59,36.57,38.45,61.16,29.5,24.59-8.95,36.84-37.32,27.89-61.92Z","style":{"fill":"url(#tulip-symbol-gradient-3)","opacity":0.75}}]]}]}]]}],["$","span",null,{"children":"Tulip"}]]}] 8:["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}] 9:["$","$1","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] a:["$","$1","c",{"children":["$L11",[["$","script","script-0",{"src":"/_next/static/immutable/chunks/20-dpl84xkz4t.js","async":true,"nonce":"$undefined"}]],["$","$L12",null,{"children":["$","$13",null,{"name":"Next.MetadataOutlet","children":"$@14"}]}]]}] c:["$","$1","h",{"children":[null,["$","$L15",null,{"children":"$L16"}],["$","div",null,{"hidden":true,"children":["$","$L17",null,{"children":["$","$13",null,{"name":"Next.Metadata","children":"$L18"}]}]}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}] e:["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/3o4k02w_o-c_o.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] f:["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/2fk_viigeddax.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] b:C 23:Tb41,11:["$","$L19",null,{"toc":[{"depth":2,"url":"#usage","title":"Usage"},{"depth":2,"url":"#examples","title":"Examples"},{"depth":3,"url":"#with-popover","title":"With Popover"}],"full":"$undefined","children":[["$","$L1a",null,{"children":"Color Picker"}],["$","$L1b",null,{"className":"mb-0","children":"Pick a color using a hex picker and presets."}],["$","div",null,{"className":"flex flex-row items-center gap-2 border-b pb-6","children":[["$","$L1c",null,{"markdownUrl":"/llms.mdx/docs/main/ui/color-picker"}],["$","$L1d",null,{"markdownUrl":"/llms.mdx/docs/main/ui/color-picker","githubUrl":"https://github.com/NewCodeDevelopment/tulip/blob/main/apps/docs/src/content/docs/main/ui/color-picker.mdx"}]]}],["$","$L1e",null,{"children":[["$","$L1f",null,{"children":["$","$L20",null,{}]}],"\n",["$","$L21",null,{"children":["$","$L22",null,{"className":"shiki shiki-themes github-light github-dark","style":{"--shiki-light":"#24292e","--shiki-dark":"#e1e4e8","--shiki-light-bg":"#fff","--shiki-dark-bg":"#24292e"},"tabIndex":"0","icon":"$23","children":"$L24"}]}],"\n","$L25","\n","$L26","\n","$L27","\n","$L28","\n","$L29","\n","$L2a","\n","$L2b"]}]]}] 24:["$","$L2c",null,{"children":["$","code",null,{"children":[["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":"\"use client\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"className":"line"}],"\n",["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"import"}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":" *"}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":" as"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" React "}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"from"}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":" \"react\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"import"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" { ColorPicker } "}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"from"}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":" \"@tulip-systems/ui/color-picker\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"className":"line"}],"\n",["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":" function"}],["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" ColorPickerDemo"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"() {"}]]}],"\n",["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":" const"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" ["}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"color"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":", "}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"setColor"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"] "}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" React."}],["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":"useState"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"("}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":"\"#2563eb\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":");"}]]}],"\n",["$","span",null,{"className":"line"}],"\n",["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":" return"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"ColorPicker"}],["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" color"}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"{color} />;"}]]}],"\n",["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"}"}]}]]}]}] 25:["$","$L2d",null,{"as":"h2","id":"usage","children":"Usage"}] 2e:Tb41,26:["$","$L22",null,{"className":"shiki shiki-themes github-light github-dark","style":{"--shiki-light":"#24292e","--shiki-dark":"#e1e4e8","--shiki-light-bg":"#fff","--shiki-dark-bg":"#24292e"},"tabIndex":"0","icon":"$2e","children":["$","$L2c",null,{"children":["$","code",null,{"children":["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"import"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" { ColorPicker } "}],"$L2f","$L30","$L31"]}]}]}]}] 32:Tb41,27:["$","$L22",null,{"className":"shiki shiki-themes github-light github-dark","style":{"--shiki-light":"#24292e","--shiki-dark":"#e1e4e8","--shiki-light-bg":"#fff","--shiki-dark-bg":"#24292e"},"tabIndex":"0","icon":"$32","children":["$","$L2c",null,{"children":["$","code",null,{"children":["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"<"}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"ColorPicker"}],"$L33","$L34","$L35","$L36","$L37","$L38"]}]}]}]}] 28:["$","$L2d",null,{"as":"h2","id":"examples","children":"Examples"}] 29:["$","$L2d",null,{"as":"h3","id":"with-popover","children":"With Popover"}] 2a:["$","$L1f",null,{"children":["$","$L39",null,{"children":[["$","$L3a",null,{"asChild":true,"children":["$","$L3b",null,{"variant":"outline","children":"Select a color"}]}],["$","$L3c",null,{"className":"w-fit","children":["$","$L20",null,{}]}]]}]}] 3d:Tb41,2b:["$","$L21",null,{"children":["$","$L22",null,{"className":"shiki shiki-themes github-light github-dark","style":{"--shiki-light":"#24292e","--shiki-dark":"#e1e4e8","--shiki-light-bg":"#fff","--shiki-dark-bg":"#24292e"},"tabIndex":"0","icon":"$3d","children":["$","$L2c",null,{"children":["$","code",null,{"children":[["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":"\"use client\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":";"}]]}],"\n","$L3e","\n","$L3f","\n","$L40","\n","$L41","\n","$L42","\n","$L43","\n","$L44","\n","$L45","\n","$L46","\n","$L47","\n","$L48","\n","$L49","\n","$L4a","\n","$L4b","\n","$L4c","\n","$L4d","\n","$L4e","\n","$L4f","\n","$L50","\n","$L51","\n","$L52","\n","$L53","\n","$L54","\n","$L55","\n","$L56","\n","$L57","\n","$L58","\n","$L59"]}]}]}]}] 2f:["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"from"}] 30:["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":" \"@tulip-systems/ui/color-picker\""}] 31:["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":";"}] 33:["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" color"}] 34:["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="}] 35:["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"{color} "}] 36:["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":"onValueChange"}] 37:["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="}] 38:["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"{setColor} />"}] 3e:["$","span",null,{"className":"line"}] 3f:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"import"}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":" *"}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":" as"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" React "}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"from"}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":" \"react\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":";"}]]}] 40:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"import"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" { ColorPicker } "}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"from"}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":" \"@tulip-systems/ui/color-picker\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":";"}]]}] 41:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"import"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" { Button } "}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"from"}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":" \"@tulip-systems/ui/button\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":";"}]]}] 42:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"import"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" {"}]]}] 43:["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" Popover,"}]}] 44:["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" PopoverContent,"}]}] 45:["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" PopoverDescription,"}]}] 46:["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" PopoverHeader,"}]}] 47:["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" PopoverTitle,"}]}] 48:["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" PopoverTrigger,"}]}] 49:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"} "}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"from"}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":" \"@tulip-systems/ui/popover\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":";"}]]}] 4a:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"import"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" { Popover, PopoverContent, PopoverTrigger } "}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"from"}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":" \"@tulip-systems/ui/popover\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":";"}]]}] 4b:["$","span",null,{"className":"line"}] 4c:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"export"}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":" function"}],["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" ColorPickerControlled"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"() {"}]]}] 4d:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":" const"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" ["}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"color"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":", "}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"setColor"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"] "}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" React."}],["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":"useState"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"("}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":"\"#2563eb\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":");"}]]}] 4e:["$","span",null,{"className":"line"}] 4f:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":" return"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" ("}]]}] 50:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"Popover"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":">"}]]}] 51:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"PopoverTrigger"}],["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" asChild"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":">"}]]}] 52:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"Button"}],["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" variant"}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":"\"outline\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":">Select a color"}]]}] 53:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" "}]]}] 54:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"PopoverContent"}],["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" className"}],["$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="}],["$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":"\"w-fit\""}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":">"}]]}] 55:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"ColorPicker"}],["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" />"}]]}] 56:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" "}]]}] 57:["$","span",null,{"className":"line","children":[["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" "}]]}] 58:["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" );"}]}] 59:["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"}"}]}] 16:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 14:null 18:[["$","title","0",{"children":"Color Picker"}],["$","meta","1",{"name":"description","content":"Pick a color using a hex picker and presets."}],["$","meta","2",{"property":"og:title","content":"Color Picker"}],["$","meta","3",{"property":"og:description","content":"Pick a color using a hex picker and presets."}],["$","meta","4",{"property":"og:image","content":"https://www.tulip.systems/og/docs/main/ui/color-picker/image.png"}],["$","meta","5",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","6",{"name":"twitter:title","content":"Color Picker"}],["$","meta","7",{"name":"twitter:description","content":"Pick a color using a hex picker and presets."}],["$","meta","8",{"name":"twitter:image","content":"https://www.tulip.systems/og/docs/main/ui/color-picker/image.png"}],["$","link","9",{"rel":"icon","href":"/favicon.ico?favicon.1zg0pgdky2x3c.ico","sizes":"32x32","type":"image/x-icon"}],["$","link","10",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.319ul96b5r_og.png","sizes":"180x180","type":"image/png"}],["$","$L5a","11",{}]]

Color Picker

View Code

Usage

Examples

With Popover

View Code

On this page