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
Drawer
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
Initialize your Subframe project
This one-time installation will setup your project settings and theme in your code base.
2
Configure tsconfig.json aliases
Add an alias to your
tsconfig.json file for your components. This will allow you to import Subframe components in your code using the shorthand: import { Button } from "@/ui/components/Button"1{
2 "compilerOptions": {
3 "paths": {
4 "@/ui/*": ["./src/ui/*"]
5 }
6 }
7}
83
Setup Tailwind config
Add the Subframe preset to your root
tailwind.config.js file to ensure your Subframe theme applies to your project and update your content paths to ensure Tailwind runs on your Subframe components.1module.exports = {
2
3 // Extend the Subframe presets
4 presets: [require("./src/ui/tailwind.config.js")],
5
6 content: [
7 "./src/ui/**/*.{js,ts,jsx,tsx}",
8 // ...rest of your content source paths
9 ],
10}4
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 your root page (e.g. index.html):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>