SixUI

Ready-to-use foundational React components implementing Google's Material Design 3.

Leverages Meta's StyleX for zero-runtime styling.
Fully themable through CSS styles or CSS vars.
Type-safe APIs, styles and themes.

Components

Browse the library of components on https://sixui.com.

Default color system (specs)

Components

Avatar

Badge (specs)

Breadcrumbs

Button (specs)

Elevated button (specs)

Filled button (specs)

Filled tonal button (specs)

Outlined button (specs)

Text button (specs)

Danger button

Card (specs)

Horizontal card

Vertical card

Checkbox (specs)

Chip (specs)

Assist chip (specs)

Filter chip (specs)

Input chip (specs)

Suggestion chip (specs)

Circular progress indicator (specs)

Determinate circular progress indicator

Indeterminate circular progress indicator

Combobox (specs)

Multi combobox

Dialog (specs)

TODO: screenshot

Disclosure

Divider (specs)

TODO: screenshot

Element with label

With text field

With checkbox

FAB (specs)

Surface FAB

Primary FAB

Secondary FAB

Tertiary FAB

Branded FAB

Icon button (specs)

Standard icon button (specs)

Filled icon button (specs)

Filled tonal icon button (specs)

Outlined icon button (specs)

List (specs)

List item (specs)

Menu (specs)

Menu list (specs)

Paper

Placeholder

Radio (specs)

Select (specs)

Multi select

Skeleton

As container

As overlay

Stepper

Horizontal stepper

Vertical stepper

Switch (specs)

With icons

Tabs (specs)

Primary tabs (specs)

Secondary tabs (specs)

Text Field (specs)

Filled text Field (specs)

Outlined text Field (specs)

Typography (specs)

Utils

Anchored

Component showcase

Elevation (specs)

Focus ring (specs)

Importing @sixui/ui as a third-party module

Setup

$ nvm use 18
$ yarn set version stable
$ yarn add @sixui/ui

Yarn

# .yarnrc.yml

# ...
nodeLinker: node-modules

$ yarn install

StyleX

See https://stylexjs.com/docs/learn/installation/.

Usage

// BasicExample.tsx

'use client';

import { ThemeProvider, baseTheme, Button } from '@sixui/ui';

const BasicExample: React.FC = () => (
  <ThemeProvider theme={baseTheme}>
    <Button>Hello World!</Button>
  </ThemeProvider>
);

export default BasicExample;

Notes with Next.js

// next.config.js

const withStylex = require('@stylexjs/nextjs-plugin');
const babelrc = require('./.babelrc.js');
const plugins = babelrc.plugins;
const [_name, options] = plugins.find(
  (plugin) => Array.isArray(plugin) && plugin[0] === '@stylexjs/babel-plugin',
);
const rootDir = options.unstable_moduleResolution.rootDir ?? __dirname;

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@sixui/ui'],
};

module.exports = withStylex({
  rootDir,
  useCSSLayers: true,
})(nextConfig);

// src/app/layout.tsx

import '@sixui/ui/styles.css';

// ...

Notes with Vite

$ yarn add vite-plugin-stylex --dev

// vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import styleX from 'vite-plugin-stylex';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), styleX()],
  optimizeDeps: {
    exclude: ['@sixui/ui'],
  },
});

// src/main.tsx

import '@sixui/ui/styles.css';

// ...

Notes with `react-router-dom`

import { forwardRef } from 'react';
import {
  Link as RouterLink,
  LinkProps as RouterLinkProps,
} from 'react-router-dom';
import { Button } from '@sixui/ui';

export const LinkBehavior = forwardRef<
  HTMLAnchorElement,
  Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
>(function LinkBehavior(props, ref) {
  const { href, ...other } = props;

  // Map href (sixui) -> to (react-router)
  return <RouterLink ref={ref} to={href} {...other} />;
});

export const Usage: React.FC = () => (
  <Button component={LinkBehavior} href='/login'>
    Login
  </Button>
);