Skip to content

eyedea-io/smashing-ui

Repository files navigation

Smashing UI

Modern, TypeScript based, React UI framework ready for your next application.

Preview

View Storybook

Getting started

Install theme

yarn add @smashing/theme

Add Theme Provider

import {SmashingThemeProvider} from '@smashing/theme'

const App = () => <SmashingThemeProvider>{/* ... */}</SmashingThemeProvider>

You can read more about smashing theme provider to learn how to customize theme.

Components

Core

  • Alert - Component used to give feedback to the user about an action or state.
  • Avatar - Component used to represent users.
  • Button - Common button component
  • Dialog - Component is used to show content on top of an overlay.
  • FormField - Component used for to add label, description, hint and error handling to input.
  • Menu - Multiple components that help create menus.
  • Popover - Component displays floating content in relation to a target.
  • Select - Simple select component being an overlay to a default system one.
  • TextInput - Text input component used in forms.
  • Tooltip - Component used to describe icon buttons.

Typography

  • Text - Inline text component.
  • Strong - Bold variant of Text component.
  • Paragraph - Component used for bigger chunks of texts.
  • Heading - Component used for article and section titles.
  • Label - Component used to describe form inputs.

Functional

  • Head - Manage page <head> tag content.
  • Title - Manage page <title> tag content.
  • css - Global css styles - normalize.css and reset.

Development

  1. Install packages yarn
  2. Run yarn build
  3. Run yarn watch for hot reload and open a new terminal window in the same folder and run yarn storybook

Sponsored by

Flow Platform