{"id":19568325,"url":"https://github.com/sriracha-ui/sriracha","last_synced_at":"2025-04-27T02:33:00.550Z","repository":{"id":43501650,"uuid":"264510481","full_name":"Sriracha-UI/sriracha","owner":"Sriracha-UI","description":"A react style library built with styled-components. Focused on building beautiful user interfaces with speed, efficiency. Customization is a fist class citizen it the land of Sriracha!","archived":false,"fork":false,"pushed_at":"2023-01-05T11:23:15.000Z","size":3281,"stargazers_count":3,"open_issues_count":24,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-21T11:40:53.824Z","etag":null,"topics":["appwrapper","color-props","customizable","customization","customize","flex-box","hacktoberfest","hacktoberfest2020","javascript","next","nextjs","react","reactjs","sriracha-ui","style-props","styled-components","theme"],"latest_commit_sha":null,"homepage":"https://sriracha-docs.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sriracha-UI.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-16T19:23:05.000Z","updated_at":"2022-06-16T05:27:06.000Z","dependencies_parsed_at":"2023-02-04T03:03:25.641Z","dependency_job_id":null,"html_url":"https://github.com/Sriracha-UI/sriracha","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sriracha-UI%2Fsriracha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sriracha-UI%2Fsriracha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sriracha-UI%2Fsriracha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sriracha-UI%2Fsriracha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sriracha-UI","download_url":"https://codeload.github.com/Sriracha-UI/sriracha/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251080744,"owners_count":21533142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appwrapper","color-props","customizable","customization","customize","flex-box","hacktoberfest","hacktoberfest2020","javascript","next","nextjs","react","reactjs","sriracha-ui","style-props","styled-components","theme"],"created_at":"2024-11-11T06:03:31.571Z","updated_at":"2025-04-27T02:32:59.715Z","avatar_url":"https://github.com/Sriracha-UI.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# The Sriracha UI Styled Components Library 🎨\n\nSriracha UI is a design system built with accessability as the highest priority.\n\n## Getting Started\n\n### Installing\n\nTo install Sriracha UI to your project simply run `yarn add sriracha-ui` || `npm i sriracha-ui` and you're ready to hook it up!\n\nAdd `import \"sriracha-ui/css/main.css\";` to the top of your src/index.js.\n\n\u003e Note: This import includes a subtle style overhaul and a normalize.\n\n### Initial Setup with AppContainer\n\nAppContainer is a powerful component that lets you set the background and fonts of your application.\n\nExample:\n\n```javascript\n// src/App.js\nexport default function App() {\n  return (\n    \u003cAppContainer\n      bgSrc={/* This prop lets you easily set a responsive image as your background */}\n      bg={/* Lets you set the background color of the app */}\n      headFont={/* Lets you change the font of all the headers in the app */}\n      font={/* Lets you can the font of everything else in the app */}\n    \u003e\n      \u003cRoute path=\"/\" exact component={Dashboard} /\u003e\n    \u003c/AppContainer\u003e\n  );\n}\n```\n\n### Style Props and Maps\n\nSriracha UI comes with some unique style props and maps that make laying out and editing you page very easily.\n\nStyle props need to be given a value and the associated\n\nThese are the props you will probably use most often. I'll break them down into categories.\n\n#### Flex-box\n\n**Props:**\n\n| CSS Property Name | Prop Name | Default value |\n| ----------------- | --------- | ------------- |\n| flex-direction    | direction | row           |\n| justify-content   | justify   | flex-start    |\n| align-items       | align     | normal        |\n| align-content     | content   | stretch       |\n\nExample:\n\n```javascript\n\u003cFlex direction=\"column\" align=\"center\"\u003e\n  ...\n\u003c/Flex\u003e\n```\n\n**Style Maps:**\n\n| CSS Property Name | Style Prop | Property Value |\n| ----------------- | ---------- | -------------- |\n| flex-direction    | col        | column         |\n| flex-direction    | revrow     | row-reverse    |\n| flex-direction    | revcol     | column-reverse |\n| justify-content   | jcEnd      | center         |\n| justify-content   | jcCenter   | space-between  |\n| justify-content   | jcBetween  | space-around   |\n| justify-content   | jcAround   | space-evenly   |\n| justify-content   | jcEvenly   | flex-start     |\n| align-items       | aiCenter   | center         |\n| align-items       | aiStart    | flex-start     |\n| align-items       | aiEnd      | flex-end       |\n| align-items       | aiStretch  | stretch        |\n| align-content     | acCenter   | center         |\n| align-content     | acStart    | flex-start     |\n| align-content     | acEnd      | flex-end       |\n| align-content     | acBetween  | space-between  |\n| align-content     | acAround   | space-around   |\n| align-content     | acEvenly   | space-evenly   |\n| flex-direction    | drape      | column         |\n| align-items       | drape      | center         |\n\nExample:\n\n```javascript\n// col changes flex-direction to column\n// aiCenter changes align items to center\n\u003cFlex col aiCenter\u003e...\u003c/Flex\u003e\n// drape changes flex-direction to column and align-items to center\n\u003cFlex drape\u003e...\u003c/Flex\u003e\n```\n\n### Sizing and color props\n\n**Props:**\n\n| CSS Property Name   | Prop Name | Default value |\n| ------------------- | --------- | ------------- |\n| height              | h         | auto          |\n| width               | w         | auto          |\n| width \u0026\u0026 height     | sqr       | auto          |\n| border-radius       | radius    | 0.3rem        |\n| border              | border    | none          |\n| margin              | m         | 0             |\n| padding             | p         | 0             |\n| background          | bg        | none          |\n| color               | color     | auto          |\n| opacity             | opacity   | none          |\n| min-height          | minH      | none          |\n| max-width           | maxW      | none          |\n| min-width           | minW      | none          |\n| max-height          | maxH      | none          |\n| box-sizing          | boxSize   | border-box    |\n| box-shadow          | shadow    | none          |\n| overflow            | overflow  | hidden        |\n| font-family         | font      | Open Sans     |\n| font-size           | fSize     | 1.6rem        |\n| clip-path           | clip      | none          |\n| background-size     | bgSize    | auto          |\n| background-attach   | bgSize    | scroll        |\n| background-position | bgSize    | center        |\n\n\u003e The square prop changes width and height at the same time.\n\n**Style Maps:**\n\n| CSS Property Name | Style Prop    | Property Value                       |\n| ----------------- | ------------- | ------------------------------------ |\n| width             | stretch       | 100%                                 |\n| margin            | xsm           | 1rem                                 |\n| margin            | sm            | 2rem                                 |\n| margin            | mm            | 3rem                                 |\n| margin            | lm            | 4rem                                 |\n| margin            | xlm           | 5rem                                 |\n| padding           | xsp           | 1rem                                 |\n| padding           | sp            | 2rem                                 |\n| padding           | mp            | 3rem                                 |\n| padding           | lp            | 4rem                                 |\n| padding           | xlp           | 5rem                                 |\n| font-size         | xsf           | 0.6rem                               |\n| font-size         | sf            | 1rem                                 |\n| font-size         | mf            | 1.4rem                               |\n| font-size         | lf            | 2rem                                 |\n| font-size         | xlf           | 3rem                                 |\n| box-shadow        | shade         | 0 0.3rem 1rem \\${theme.colors.gray7} |\n| box-shadow        | backlight     | 0 0.3rem 1rem \\${theme.colors.gray0} |\n| box-sizing        | cbox          | content-box                          |\n| box-sizing        | init          | initial                              |\n| box-sizing        | inherit       | inherit                              |\n| overflow          | visible       | visible                              |\n| overflow          | scroll        | scroll                               |\n| overflow          | auto          | auto                                 |\n| text-align        | taRight       | right                                |\n| text-align        | taLeft        | left                                 |\n| text-align        | taCenter      | center                               |\n| text-align        | taJustify     | justify                              |\n| text-align        | taAll         | justify-all                          |\n| text-align        | taStart       | start                                |\n| text-align        | taEnd         | end                                  |\n| background-size   | sizeLen       | length                               |\n| background-size   | sizeCover     | cover                                |\n| background-size   | sizeContain   | contain                              |\n| background-size   | sizeInitial   | initial                              |\n| background-size   | sizeInherit   | inherit                              |\n| background-size   | sizeAuto      | auto                                 |\n| background-attach | attachFix     | fix                                  |\n| background-attach | attachLocal   | local                                |\n| background-attach | attachInherit | inherit                              |\n| background-attach | attachInitial | initial                              |\n| background-attach | attachScroll  | scroll                               |\n\n### AppContainer\n\nAppContainer is a div that is meant to wrap your app page, where you hold your routes. It's purpose is to easily change the font and background of the whole application.\n\n### Wrapper\n\nThis should wrap every parent component. It set's min height to 100% view height, and max width is set to 100% view width. This makes flexing items around your page a dream. Default flex-direction is set to column instead of row and align-items is set to.\n\n### Text\n\nA text component that lets you set size, font and font weight easily.\n\nExample:\n\n```javascript\n// Bold text, font size 2rem, text align center, font Georgia\n\u003cText bold lf taCenter font=\"Georgia\"\u003e\n  Some text here...\n\u003c/Text\u003e\n```\n\n### Box\n\nBox is a div with lots of useful props. Images inside the box are set to `width: 100%; height: auto;` so they will size responsively. Just adjust the with of the Box to size the image.\n\nExample:\n\n```javascript\n/* Placing the image in a Box with a width of 5rem\nwill responsively size it to a width of 50px */\n\u003cBox w=\"5rem\"\u003e\n  \u003cimg src={`image source`} alt=\"alt text\" \u003e\n\u003c/Box\u003e\n```\n\nBox's also have a prop for background, so you can set a background color, a width and a height and you have a colored box. One thing that makes Box \u0026 FlexBox unique is that you can set shape props on them! So just by adding the prop `star` you turn the div into a star. See list of style maps below for full list of shape props you can choose from. You can even create your own by using the clip-path prop, clip!\n\nExample:\n\n```javascript\n\u003cFlex w=\"20rem\" h=\"10rem\" jcAround aiCenter shade\u003e\n  \u003cBox star bg=\"red\" sqr=\"5rem\" /\u003e\n  \u003cBox message bg=\"green\" sqr=\"5rem\" /\u003e\n  \u003cBox octagon bg=\"blue\" sqr=\"5rem\" /\u003e\n\u003c/Flex\u003e\n```\n\nWill look like...\n\n![Shape image](./assets/../shapes.png)\n\n\u003e I also find that Box's make good spacers, between elements!\n\n```javascript\n// This puts a 20px spacer between Header, Body and Footer components\n\u003cFlex drape\u003e\n  \u003cHeader /\u003e\n  \u003cBox h=\"2rem\" /\u003e\n  \u003cBody /\u003e\n  \u003cBox h=\"2rem\" /\u003e\n  \u003cFooter /\u003e\n\u003c/Flex\u003e\n```\n\n### Card\n\nA beautiful card component that helps you lay out chunks of information across the page. Has flex properties; flex direction is column and align items is center by default. To change them to row and normal just add across prop.\n\nExample:\n\n```javascript\n\u003cCard across\u003e\u003c/Card\u003e\n```\n\nCard also has an invert color map that inverts the values making the background dark and the text light.\n\nExample:\n\n```javascript\n\u003cCard across\u003e\n  \u003ch1\u003eThis is a dark mode card.\u003c/h1\u003e\n\u003c/Card\u003e\n```\n\n### Text\n\nA text component that lets you set size, font and font weight easily.\n\nExample:\n\n```javascript\n// Bold text, font size 2rem, text align center, font Georgia\n\u003cText bold lf taCenter font=\"Georgia\"\u003e\n  Some text here...\n\u003c/Text\u003e\n```\n\n### Modal\n\nIn order to pull off a modal you're going to need 2 components: Modal and useModal. In order to make Modal work your going to need to pass it an \"isActive\" prop and a \"toggle\" prop. You can get both of these props off of useModal hook:\n\n```javascript\nimport { useModal } from \"adaptiv-ui\";\n\nconst [isActive, toggle] = useModal();\n```\n\nThen you can plug them into Modal and you're good to go!\n\nExample:\n\n```javascript\nimport React from \"react\";\nimport { useModal, Modal, Flex, Button, Text } from \"adaptiv-ui\";\n\nexport default function Component() {\n  const [isActive, toggle] = useModal();\n\n  return (\n    \u003c\u003e\n      \u003cButton onClick={toggle}\u003eToggle\u003c/Button\u003e\n      \u003cModal isActive={isActive} toggle={toggle}\u003e\n        \u003cFlex w=\"40rem\" h=\"40rem\" drape\u003e\n          \u003cText\u003eI'm a modal, yo!\u003c/Text\u003e\n          \u003cButton autoFocus onClick={() =\u003e alert(\"Thanks for clicking me!\")}\u003e\n            Click me!\n          \u003c/Button\u003e\n          \u003cButton onClick={toggle}\u003eClose\u003c/Button\u003e\n        \u003c/Flex\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n![Modal image](./assets/modal.png)\n\n### Tool Tip\n\nTooTip component has all the same props as Flex, but it has a special feature! After adding your element, you can place a div under it with a className of \"tooltip\". Whatever you put inside this \"tooltip\" div will be invisible until you hover over or focus on the element you nested inside your ToolTip component. In addition to the Flex props, there are a couple of extra props that ToolTip has so that you can edit your \"tooltip\" element and position.\n\nttW: edits the **width** of the tooltip\nttH: edits the **height** of the tooltip\nttColor: edits the **color** of the tooltip\nttBg: edits the **background color** of the tooltip\nttTop: edits the **top position** of the tooltip\nttRight: edits the **right position** of the tooltip\nttBottom: edits the **bottom position** of the tooltip\nttLeft: edits the **left position** of the tooltip\nttRadius: edits the **radius** of the tooltip\nttZindex: edits the **z index** of the tooltip\n\nExample:\n\n```javascript\n// using tt props to edit tool tip position and size\n\u003cToolTip ttLeft=\"105%\" tabIndex={0} ttW=\"12rem\" ttTop=\"25%\"\u003e\n  {/* These two Box's make up the content that we want to add a tooltip too */}\n  \u003cBox bg={theme.colors.primary} circle p=\"2rem\"\u003e\n    \u003cBox sqr=\"2rem\" window bg=\"white\" /\u003e\n  \u003c/Box\u003e\n  {/* Our \"tooltip\" div is the container for what we want to show in our\n  tooltip on focus or hover. */}\n  \u003cdiv class=\"tooltip\"\u003e\n    \u003cText bold lf taCenter\u003e\n      Tooltip text\n    \u003c/Text\u003e\n  \u003c/div\u003e\n\u003c/ToolTip\u003e\n```\n\n![Tooltip image](./assets/tooltip.png)\n\n### Container\n\nContainer is a component that's main purpose is to provide a background image. It also can set colors as the background but the css for images is set for responsiveness. If you need things to lay on top of a background image this is the component to use. Just wrap the content in Container and set bgSrc prop to the location/URL of your image. It also has flex enabled and all sizing props. By default justify content is column and align items is center. You can change these individually to you own desire. You can also use the `across` props to set them to flex-start / normal respectively.\n\nExample:\n\n```javascript\n\u003cWrapper\u003e\n  {/* Add invert prop to make text white instead of black */}\n  \u003cContainer bgSrc={image} h=\"50vh\" invert\u003e\n    \u003ch3\u003eStuff...\u003c/h3\u003e\n    \u003ch3\u003eStuff...\u003c/h3\u003e\n    \u003ch3\u003eStuff...\u003c/h3\u003e\n  \u003c/Container\u003e\n\u003c/Wrapper\u003e\n```\n\n### Button\n\nIt's a beautiful button! It has some color props to quickly and easily change the color scheme of the button.\n\nList of color props:\n\n- red\n- orange\n- yellow\n- green\n- teal\n- cyan\n- blue\n- purple\n- pink\n- invert\n\n### Linkton\n\nLooks exactly like a button, but is a Link from @reach/router.\n\nList of color props:\n\n- red\n- orange\n- yellow\n- green\n- teal\n- cyan\n- blue\n- purple\n- pink\n- invert\n\nExample:\n\n```javascript\n\u003cLinkton to=\"/\" red\u003e\n  Go home\n\u003c/Linkton\u003e\n```\n\n### Form\n\nIt's a form with flex-box (direction: column, align: center by default).\n\n### Input\n\nA better looking input to use.\n\n### Importing sriracha-ui css and styled components 🚀\n\nIt's highly recommended to pull in sriracha-ui's global style overhauls, just `import \"sriracha-ui/css/main.css\"` in your root index.js file. Feel free to check out the code to see what is under the hood! 🔥\n\nAll styled components get exported from `sriracha-ui`. So all you need to do is deconstruct the component(s) you want from \"sriracha-ui\".\n\n#### Example\n\n`./src/components/MyComponent`\n\n```javascript\nimport React from \"react\";\nimport { Wrapper, Flex, Button } from \"sriracha-ui\";\n\nexport default function MyComponent() {\n  return (\n    \u003cWrapper\u003e\n      \u003cFlex drape w=\"80vw\"\u003e\n        \u003ch2\u003eCard Header\u003c/h2\u003e\n        \u003cp\u003eCard text.\u003c/p\u003e\n        \u003cFlex\u003e\n          \u003cButton primary\u003eLeft Button\u003c/Button\u003e\n          \u003cButton secondary\u003eRight Button\u003c/Button\u003e\n        \u003c/Flex\u003e\n      \u003c/Card\u003e\n    \u003c/Wrapper\u003e\n  );\n}\n```\n\n## Theme Color Variables 🖌\n\nIf you want to use the color variables in just throw in theme to your Sriracha UI import: `import { theme } from \"sriracha-ui\"`\n\nExample:\n\n```javascript\nimport React from \"react\";\nimport { Wrapper, Flex, Button, theme } from \"sriracha-ui\";\n\nexport default function MyComponent() {\n  return (\n    \u003cWrapper bg={theme.colors.gray8}\u003e\n      \u003cFlex w=\"80vw\" drape\u003e\n        \u003ch2\u003eCard Header\u003c/h2\u003e\n        \u003cp\u003eCard text.\u003c/p\u003e\n        \u003cFlex\u003e\n          \u003cButton primary\u003eLeft Button\u003c/Button\u003e\n          \u003cButton secondary\u003eRight Button\u003c/Button\u003e\n        \u003c/Flex\u003e\n      \u003c/Flex\u003e\n    \u003c/Wrapper\u003e\n  );\n}\n```\n\n[Check here to see the full list of my javascript theme colors.](https://github.com/ApaptivUI/sriracha-ui/blob/master/styled/theme/index.js)\n\n### Flex and Box Shape Props\n\nFlex's and Box's have unique shape props you can use to turn your div's into awesome little shapes! Highly recommend using the sqr prop to set height and width to equal size's and giving a background (bg) prop color since the default is set to none.\n\nYou can also set a custom clip path with the `clip` prop.\n\nExample:\n\n```javascript\n\u003cBox sqr=\"5rem\" bg={theme.colors.red5} message /\u003e\n```\n\n| CSS Property Name | Style Map     | Property Value                                                                                                      |\n| ----------------- | ------------- | ------------------------------------------------------------------------------------------------------------------- |\n| clip-path         | triangle      | polygon(50% 0%, 0% 100%, 100% 100%)                                                                                 |\n| clip-path         | trapezoid     | polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)                                                                         |\n| clip-path         | parallelogram | polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)                                                                         |\n| clip-path         | rhombus       | polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)                                                                         |\n| clip-path         | pentagon      | polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)                                                               |\n| clip-path         | hexagon       | polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)                                                       |\n| clip-path         | heptagon      | polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)                                                       |\n| clip-path         | octagon       | polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)                                     |\n| clip-path         | nonagon       | polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%)                            |\n| clip-path         | decagon       | polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)                   |\n| clip-path         | bevel         | polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)                                     |\n| clip-path         | rabbet        | polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%) |\n| clip-path         | arrowLeft     | polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%) |\n| clip-path         | arrowRight    | polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)                                               |\n| clip-path         | pointLeft     | polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%)                                                               |\n| clip-path         | pointRight    | polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%)                                                                 |\n| clip-path         | chevronLeft   | polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%)                                                      |\n| clip-path         | chevronRight  | polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)                                                        |\n| clip-path         | star          | polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)                     |\n| clip-path         | cross         | polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%) |\n| clip-path         | window        | polygon(0 40%, 40% 40%, 40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%)     |\n| clip-path         | message       | polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)                                               |\n| clip-path         | close         | polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%) |\n| clip-path         | circle        | circle(50% at 50% 50%)                                                                                              |\n| clip-path         | ellipse       | ellipse(34% 50% at 50% 50%)                                                                                         |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsriracha-ui%2Fsriracha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsriracha-ui%2Fsriracha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsriracha-ui%2Fsriracha/lists"}