3dSignals Design System

Check out our storybook for live demos and docs.

Installation and usage

yarn add 3dsignals-design-system

Then use it in your app:

import {
    useClickOutside,
    Theme,
    Anchor,
    Button,
    Card,
    Chip,
    Icon,
    Text,
    Toggle,
    Tooltip,
    MetricCard,
    MetricCardInfo,
    MetricCardStack,
    MetricCardRow,
    ChartCardHeader,
    Checkbox,
    Radio,
    Dropdown,
    DropdownItem
} from "3dsignals-design-system";

const {
    colors,
    typography,
    breakPoints,
    spacing,
    shadows,
    focusOutline
} = Theme;

const App = (props) => {
    // use components normally in your app, and Theme for layouts, fonts, colors etc. 
    // Check out the docs for each component props and more info.
    const style = {
        background: colors.grey200,
        padding: spacing[2].desktop,
        boxShadow: shadows[1],
    };
    return (
        <div style={style}>
            <Card>
                <Text>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
                    <Tooltip>
                        <Icon/>
                    </Tooltip>
                </Text>
            </Card>
        </div>
    );
};