import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={a:`a`,h1:`h1`,li:`li`,p:`p`,ul:`ul`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Custom Components/Introduction`}),`
`,(0,c.jsx)(t.h1,{id:`developing-custom-components-with-ds-primitives`,children:`Developing custom components with DS primitives`}),`
`,(0,c.jsx)(t.p,{children:`The DS provides lower level primitives for building custom components that you can use
if existing DS components are not enough to implement complex or unique designs.
Using these primitives ensures that your new custom components will still be
compatible with our visual design language and continue receiving updates as the
Design System evolves.`}),`
`,(0,c.jsx)(t.p,{children:`However, you should always prefer using the existing components to just using
these lower level primitives.`}),`
`,(0,c.jsx)(t.p,{children:`Furthermore, if you believe your component can be a good addition for the Design System:`}),`
`,(0,c.jsxs)(t.ul,{children:[`
`,(0,c.jsxs)(t.li,{children:[`Read the `,(0,c.jsx)(t.a,{href:`/story/contributing--page`,children:`contribution guide`})]}),`
`,(0,c.jsxs)(t.li,{children:[`Reach out to `,(0,c.jsx)(t.a,{href:`https://preply.slack.com/archives/C024EAEHP6V`,rel:`nofollow`,children:`#design-system-public`})]}),`
`,(0,c.jsx)(t.li,{children:`Use Less.js instead of StyledComponents.`}),`
`,(0,c.jsxs)(t.li,{children:[`Become familiar with the DS `,(0,c.jsx)(t.a,{href:`https://preply.atlassian.net/wiki/spaces/DS/pages/2778300873/Guidelines`,rel:`nofollow`,children:`internal guidelines and conventions`}),` and the step by step `,(0,c.jsx)(t.a,{href:`https://preply.atlassian.net/wiki/spaces/DS/pages/3250815332/Runbooks`,rel:`nofollow`,children:`runbooks`}),`.`]}),`
`]}),`
`,(0,c.jsx)(t.p,{children:`Check the guidelines below for some generic strategies to minimize the need for custom CSS.`}),`
`,(0,c.jsx)(t.p,{children:`The following guides provide further information on how to use the lower level primitives according to your stack:`}),`
`,(0,c.jsxs)(t.ul,{children:[`
`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`/story/guides-custom-components-less-js-intro--page`,children:`Less.js`})}),`
`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`/story/guides-custom-components-styledcomponents-intro--page`,children:`StyledComponents`})}),`
`]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};