@surrealdb/ui

The SurrealDB UI Kit defines the design system and UI primitives for use throughout all frontend projects at SurrealDB.

Using the UI Kit

First, import the styles and fonts:

import "@surrealdb/ui/styles.css";
import "@surrealdb/ui/fonts.css";

Then, configure the Mantine theme:

import { MantineProvider } from "@mantine/core";
import { MANTINE_THEME } from "@surrealdb/ui/theme";

<MantineProvider theme={MANTINE_THEME}>
  <App />
</MantineProvider>

Finally, use the components:

import { Heading } from "@surrealdb/ui";

<Heading kicker="Foo" description="Bar">
	Hello world
</Heading>

Getting Started

To install dependencies:

bun install

Start the Storybook development server:

bun run storybook:dev

Icon tool

The icon tool is used to convert the SVG icons to a format that can be used in the UI Kit.

Requirements

• Install picosvg
• Export an SVG zip and locate it in the root of the project.

bun run icons

This will generate the src/constants/icons.ts file.

Notes

Optimise pictos

mkdir -p out                   
for f in *.png; do 
  magick "$f" \             
    -resize 500x500 \
    -background none \   
    -gravity center \                                    
    -extent 500x500 \
    "out/${f%.*}.webp"
done