Getting Started

Introduction

Welcome to our DD360 ds library! This library is designed to help you create beautiful and engaging user interfaces quickly and easily. With our library, you can access a lot of components, tools, and resources to create stunning user interfaces for your web applications. Our library is designed to be easy to use and understand, so even those with minimal React experience can get up and running quickly. To get started, simply install the library, check out the documentation, and begin building your own user interfaces with DD360 ds. Happy coding!

Installation

To get started, you need to install the DD360 ds library package from npm. You can do this by running the following command:

1npm install dd360-ds

1yarn add dd360-ds

1pnpm i dd360-ds

Add styles

Our library uses Tailwind CSS for styling. If your project uses Tailwind CSS you can skip this step. To add styles in your project you need to import the DD360 ds library style sheet in your entry point, in this example we use React (App.js as entry point).

1import 'dd360-ds/dd360.css'

Setup

For our library to work properly, you will need to wrap your application inside our Provider.

Go to pages/_app.js or pages/_app.tsx (create it if it doesn't exist) and add this:

Next.js

1import { ThemeProvider } from 'dd360-ds/theme'
2import 'dd360-ds/dd360.css'
3
4export default function App({ Component, pageProps }: AppProps) {
5    return (
6        <ThemeProvider>
7            <Component {...pageProps} />
8        </ThemeProvider>
9    )
10}

React.js

Go to the root of your application and do this:

1import { ThemeProvider } from 'dd360-ds/theme'
2import 'dd360-ds/dd360.css'
3
4ReactDOM.createRoot(document.getElementById("root")).render(
5  <StrictMode>
6    <ThemeProvider>
7      <App />
8    </ThemeProvider>
9  </StrictMode>
10);

Customize theme (optional) 🎨👨‍🎨

ThemeProvider provides a simple way to customize the default themes, you can change the colors and fonts.

To extend or override a token in the default theme, import the createTheme function and add the keys you want to override. You can also add new values to the theme.

For example, if you want to update your theme colors to include your brand colors, here's what to do:

1import { createTheme,  ThemeProvider, Text  } from "dd360-ds/theme" 
2import { Button } from "dd360-ds
3
4const theme = createTheme({
5  // // brand colors
6  palette: {
7    primary: {
8      contrastText: 'white',
9      main: '#1c4ed9'
10    },
11    secondary: {
12      main: 'white',
13      contrastText: ''
14    },
15    success: {
16      main: '#22c55e'
17    },
18    warning: {
19      main: '#eab308'
20    },
21    info: {
22      main: '#6b7280'
23    },
24    error: {
25      main: '#ef4444'
26    },
27    background: '#fff',
28    textColor: '#000'
29  },
30  typography: {
31    fontFamily: 'Rubik Pixels',
32    h1: { fontSize: 36 },
33    h2: { fontSize: 32 },
34    h3: { fontSize: 28 },
35    h4: { fontSize: 24 },
36    h5: { fontSize: 20 },
37    h6: { fontSize: 18 },
38    base: {
39      fontSize: 16
40    }
41  }
42
43  // 3. Pass the new theme to 'ThemeProvider'
44  <ThemeProvider theme={theme}>
45    <App />
46  </ThemeProvider>
47
48  // 4. Now you can use these colors in your components
49  function MyComponent() {
50    return <Button>Button primary</Button>
51  }
52})

Start Using the Library

Now that you've added the library to your application, you can start using it by adding the components you want to use. To do this, simply add the component tag to the JSX of your application. For example, if you want to use a button, you can add the following:

1import { Button } from "dd360-ds"
2
3<Button onClick={() => alert("Clicked")}>Click Me!</Button>
4
5