Installation

WebCopy Anchor Link

pnpm add @smartui/react

Import the stylesheet once, at the root of the app. It contains the tokens and every component style.

import '@smartui/react/styles.css';
import { Button } from '@smartui/react';

export function Save() {
  return <Button onPress={() => console.log('saved')}>Save schedule</Button>;
}

SmartUI does not need Tailwind. Components are styled with plain CSS classes that read token variables, so they work in any React setup.

Dark modeCopy Anchor Link

Set data-theme="dark" or the class dark on the root element. Every component follows.

<html data-theme="dark">

React NativeCopy Anchor Link

pnpm add @smartui/native

import { ThemeProvider, Button } from '@smartui/native';

export default function App() {
  return (
    <ThemeProvider>
      <Button onPress={() => {}}>Create booking</Button>
    </ThemeProvider>
  );
}

The native package uses the same prop names as the web package, so a screen reads the same on both.