relay-upstarts-design-library

Design Library

This is a design library of UI components for Svelte projects, using Tailwind CSS and Flowbite UI components.

The components are not the full set of UI components available from Flowbite; rather, we have selected only the Flowbite components that we use in our projects.

We also include a few customized browser-standard components, such as <footer>, that are very simple and customized for our own use.

This design library contains UI components in the src/lib/ui folder. The file src/lib/index.js is the entry point for the library.

Preview

This repository also contains a preview application in the src/routes folder. Use the application to preview the UI components in the library. View the preview application on GitHub pages at

• https://relayshanghai.github.io/relay-upstarts-design-library/

Alternatively, you can clone this repository and run the preview application locally.

npm install
npm run dev

Each component in the library has a page that displays a preview of the component, code you can copy to use the component, and an interactive form where you can change the component's properties and see the changes in the preview.

Development

See the file README-DEV.md for instructions on how to edit or add components to the design library.

Usage

Import the components you wish to use from 'relay-upstarts-design-library'. Then use the components in your Svelte application.

<script>
	import { Button, Text } from 'relay-upstarts-design-library';
</script>

<Text tag="h3">Heading 3</Text>
<Text color="success">Success text default</Text>
<Button variant="secondary">Click me!</Button>