Overview
Theme
Icons
Installation
Quickstart
Components
Accordion
Alert
Area Chart
Avatar
Badge
Bar Chart
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Card
Checkbox Group
Context Menu
Copy to clipboard button
Dialog
Dialog Layout
Drawer
Drawer Layout
Dropdown Menu
Fullscreen Dialog
Icon Button
Icon with background
Line Chart
Link Button
Loader
Pie Chart
Progress
Radio Card Group
Radio Group
Select
Sidebar with sections
Skeleton Circle
Skeleton Text
Slider
Stepper
Switch
Table
Tabs
Text Area
Text Field
Toast
Toggle Group
Tooltip
Tree View
Vertical Stepper
Installation
Prepare your local environment. Subframe generates React code written in Typescript and styled with Tailwind CSS. We work with any framework that uses React and Typescript.
Setup
1
Clone our starter kit
2
Initialize your Subframe project
This one-time installation will setup your project settings and theme in your code base.
3
Load fonts
Fonts are set by your theme and will be used in your Subframe components and pages. Add the following to your
<head> tag in src/app/layout.tsx:Changing the fonts in your theme will require updating these links.
1<head>
2 <link rel="preconnect" href="https://fonts.googleapis.com"/>
3 <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
4 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
5</head>