Usage

Learn the basics of working with Stoked UI components.

Quickstart

After installation, you can import any Material UI component and start playing around. For example, try adding the grid and alternatingRows properties on the FileExplorer component to see how the style changes:

File
Size
Lastmodified

Documents

566.5 MB

Bookmarked

22.9 KB

History

import * as React from 'react';
import { FileExplorer } from '@stoked-ui/file-explorer/FileExplorer';
import { NestedFiles } from '../../../src/components/fileExplorer/data';

export default function FileExplorerUsage() {
  return <FileExplorer sx={{ width: '100%' }} items={NestedFiles} grid alternatingRows />;
}

import * as React from 'react';
import { FileExplorer } from '@stoked-ui/file-explorer/FileExplorer';
import { NestedFiles } from '../../../src/components/fileExplorer/data';

export default function FileExplorerUsage() {
  return <FileExplorer sx={{ width: '100%' }} items={NestedFiles} grid alternatingRows />;
}

Press Enter to start editing

Globals

Since Material UI components are built to function in isolation, they don't require any kind of globally scoped styles. For a better user experience and developer experience, we recommend adding the following globals to your app.

Responsive meta tag

Material UI is a mobile-first component library—we write code for mobile devices first, and then scale up the components as necessary using CSS media queries.

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> element:

<meta name="viewport" content="initial-scale=1, width=device-width" />

CssBaseline

Material UI provides an optional CssBaseline component. It fixes some inconsistencies across browsers and devices while providing resets that are better tailored to fit Material UI than alternative global style sheets like normalize.css.

Default font

Material UI uses the Roboto font by default. See Installation—Roboto font for complete details.