For developers

Setup QDS in your React app

Ensure you have tailwindcss installed as a peer dependency before installing QDS. If you don’t have it installed, follow the instructions in the Tailwind CSS documentation to set it up.

Install `@qasa/qds-ui`

Install the QDS package with your preferred package manager.

pnpm install @qasa/qds-ui

Add the provider

Wrap your application with the QdsProvider component and pass it the locale prop.

import { QdsProvider } from '@qasa/qds-ui'
import { useLocale } from './hooks'
 
function App() {
  const locale = useLocale() // your locale hook
 
  return (
    <QdsProvider locale={locale}>
      <YourApp />
    </QdsProvider>
  )
}

Set up the Tailwind preset

In your Tailwind CSS file, add the QDS preset and set the source path to include the @qasa/qds-ui package using Tailwind CSS @source directive.

global.css

@import 'tailwindcss';
@import '@qasa/qds-ui/preset.css'; 
 
/* path of `@qasa/qds-ui` relative to the CSS file */
@source '../node_modules/@qasa/qds-ui'; /* */

Add fonts

To set up the custom fonts, set the --font-family-sans and --font-family-semi-mono CSS variables globally.

For best performance, we recommend using local font files. Follow the setup instructions for your framework or bundler to integrate them properly

global.css

@import 'tailwindcss';
@import '@qasa/qds-ui/preset.css';
 
/* path of `@qasa/qds-ui` relative to the CSS file */
@source '../node_modules/@qasa/qds-ui';
 
:root {
  --font-family-sans: 'Qasa Diatype Rounded'; 
  --font-family-semi-mono: 'Qasa Diatype Rounded Semi-Mono'; 
}

Don’t have the font files?

Please reach out to the QDS team on Slack to get access to the font files.

Quick setup: If you need a quick setup, you can use hosted font files. Contact the QDS team on Slack to get the hosted URLs.

Start using components