Build faster with Twizzle components
A modular frontend library package for React. Built on styled-components and adapted for industry standard React components. Integrates smoothly with any React project.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { Avatar, Badge, Box, Typography } from "@twizzle-library/twizzle-library";
import Image from "next/image";
const Card = () => {
<Box
style={{
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "center",
borderBottom: "1px solid #eaeaea",
}}
>
<Image
src={"/images/toronto.jpg"}
width="350px"
height={"200px"}
alt="Toronto"
/>
<Box
style={{
display: "block",
padding: "10px 20px",
}}
>
<Badge color={"green"}> Travel</Badge>
<Typography
variant={4}
style={{ margin: "20px 0px" }}
bold
>
Top 10 places to visit in Toronto
</Typography>
<Typography
variant={"p"}
style={{ margin: "40px 0px" }}
bold
>
The largest, liveliest, and most ethnically diverse city in Canada is Toronto.
It is home to a diverse range of tourist attractions, including the CN Tower, Scotiabank Arena, and a multitude of museums and galleries.
Also, Niagara Falls is only a short drive away.
</Typography>
</Box>
</Box>
<Box style={{ padding: "10px" }}>
<Box style={{ width: "20%" }}>
<Avatar name="John Doe" />
</Box>
<Box
style={{ flexDirection: "column", width: "80%" }}
>
<Typography variant={"p"} style={{ margin: 0 }} bold>
John Doe
</Typography>
<Typography variant={"p"} style={{ margin: 0 }} italic>
yesterday
</Typography>
</Box>
</Box>
};
Why use Twizzle?
Open Source
Twizzle is fully open-source and is built on top of React. It can be used in any React application for free under the MIT license.
Customizable
Twizzle comes production ready with a wide range of customizable components that can be used in new and existing React projects.
Built with Typescript
Twizzle components are built to support type safety and type inference. All components and props are type safe and are encouraged to be used with Typescript.
Easy to Install
Twizzle is easy to install and easy to configre as well with minor modifications to Theme Context that comes with Twizzle.
Out of the box
components
/144