import { mdx } from '@mdx-js/react'; import { Props, Description } from '~/props/src/index'; import { SystemUIShowcases, showcaseKeys } from '~/systemui-showcases/src'; import { primerTheme as theme } from '../stories/primer-theme'; import { CssLayout } from '~/mdx-layout-css'; export default CssLayout; # SystemUIShowcases Component ### Supported Keys


  {showcaseKeys.map((k) => (
    {`${k}, `}
  ))}

## Usage ```tsx import { SystemUIShowcases } from '@divriots/dockit-react/systemui-showcases'; import theme from './theme'; // using explicit component props ; // using a class for styling the showcase component ; ``` ### Showcase Component The component used for showcasing is either a box, a line or a paragraph of text. This is determined automatically by the showcase key. Props for it can be passed in the `componentProps` property of `SystemUIShowcases`. ## Props ## Showcasing of all supported keys ### space ### width ### height ### bg ### boxShadow ### borderRadius ### borderWidth ### borderStyle ### borderColor ### border ### borderTop ### borderBottom ### borderLeft ### borderRight ### fontSize ### fontFamily ### fontWeight ### lineHeight ### letterSpacing ### color ### zIndex