Draft Components

draft-components is set of React-based components for building or rapid prototyping web interfaces.

Demo Website

Getting Started

1. Install the draft-components package and its peer dependencies using npm or yarn:

npm install draft-components react@^17 react-dom@^17

2. Include draft-components.css stylesheets to your index.js/index.ts (or in your main App file):

import 'draft-components/css/draft-components.css';

In case you are using sass, you can import source sass files to your main sass file:

// using node-style package resolution
@import '~draft-components/scss/draft-components';

// you can customize the styles bundle and include only needed parts
@import '~draft-components/scss/abstracts';
@import '~draft-components/scss/themes/default-theme';
@import '~draft-components/scss/base';
// include styles only for specific components
@import '~draft-components/scss/components/button';
@import '~draft-components/scss/components/text-field';
...

3. After previous steps you'll be able to import React components:

import { FormattedContent, Button } from 'draft-components';
// with tree-shaking:
import { FormattedContent } from 'draft-components/components/formatted-content';
import { Button } from 'draft-components/components/button';

function App() {
  return (
    <div>
      <FormattedContent.Title1>
        draft-components example
      </FormattedContent.Title1>
      <Button>Button Text</Button>
    </div>
  );
}