An intelligent, modern React component library built with TypeScript + SCSS.
Intelligent design System Connect swift experience. Fully open source product design system.
English | 简体中文
- 🎨 SCSS-based styling system with theme customization support
- 📦 Supports both ESM and CommonJS module formats
- 🔧 Full TypeScript type support
- ✅ Unit testing with Vitest
- 🌙 Dark mode support
We intentionally provide a consistent, peaceful, awareness-guiding, open, and necessary set of components for the visual system, to facilitate the design and development of our products and business.
Apron refers to the airport apron.
We hope that when these components are arranged together, they will be as neat as an airport apron, while also reflecting our design philosophy:
- Agreement
- Peace
- Realizing
- Open
- Necessity
npm install @apron-design/react
# or
yarn add @apron-design/react
# or
pnpm add @apron-design/reactImport all components and styles globally. Suitable for quick start or when bundle size is not a concern:
// Import global styles in your entry file (e.g., main.tsx or App.tsx)
import '@apron-design/react/styles';
// Then use components anywhere
import { Button, Input, Modal, Toast } from '@apron-design/react';
function App() {
return (
<div>
<Button variant="primary" onClick={() => Toast.success('Success!')}>
Click me
</Button>
<Input placeholder="Enter content" />
</div>
);
}Import only the components you need to reduce bundle size:
// Method: Import components from main package (recommended)
// Styles still need to be imported once globally
import '@apron-design/react/styles';
import { Button } from '@apron-design/react';
import { Input, Textarea } from '@apron-design/react';
import { Modal, Drawer } from '@apron-design/react';
function App() {
return <Button variant="primary">Button</Button>;
}💡 Tip: Since the component library uses ES Module format, modern bundlers (like Vite, Webpack 5+) will automatically perform Tree Shaking, only bundling the component code you actually use.
The library provides the following components:
General
Button- ButtonLink- Link
Layout
Row/Col- Grid layoutSpace- SpacingDivider- Divider
Data Display
Avatar/AvatarGroup- AvatarBadge- BadgeCard- CardCollapse- Collapse panelEmpty- Empty stateImage- ImagePagination- PaginationSkeleton- Skeleton screenSteps- StepsTabs- TabsTag- TagTimeline- TimelineTooltip- TooltipPopover- Popover
Data Entry
Input/Textarea- InputInputOtp- OTP InputSelect- SelectCascader- Cascading selectorDatePicker- Date pickerCheckbox/CheckboxGroup- CheckboxRadio/RadioGroup- RadioRate- RateSwitch- SwitchForm/FormItem- Form
Feedback
Alert- AlertMessage- Global messageModal- Modal dialogDrawer- DrawerResponsiveModal- Responsive modalSpin- LoadingToast- Toast
Some components provide global methods that can be called anywhere:
import { Message, Toast, Spin } from '@apron-design/react';
// Message notification
Message.success('Operation successful');
Message.error('Operation failed');
Message.warning('Warning message');
Message.info('Info message');
// Toast (mobile)
Toast.success('Success');
Toast.fail('Failed');
Toast.loading('Loading...');
Toast.close();
// Global loading
Spin.show({ text: 'Loading...' });
Spin.close();The component library supports Server-Side Rendering (SSR) and can be used with frameworks like Next.js and Remix:
// Next.js App Router example
// app/layout.tsx
import '@apron-design/react/styles';
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}
// app/page.tsx
import { Button, Card } from '@apron-design/react';
export default function Page() {
return (
<Card title="Welcome">
<Button variant="primary">Get Started</Button>
</Card>
);
}
⚠️ Note: Global methods (likeToast.show(),Spin.show(),Message.success()) rely on browser APIs and can only be called on the client side. In SSR environments, ensure these methods are called withinuseEffector event handlers.
'use client'; // Required in Next.js for client components
import { useEffect } from 'react';
import { Toast } from '@apron-design/react';
export default function MyComponent() {
useEffect(() => {
// ✅ Correct: Call within useEffect
Toast.success('Page loaded');
}, []);
const handleClick = () => {
// ✅ Correct: Call within event handler
Toast.success('Click successful');
};
return <button onClick={handleClick}>Click</button>;
}The component library uses CSS variables for theme customization. You can customize the theme by overriding these variables:
:root {
--apron-color-primary: #3b82f6;
--apron-color-primary-hover: #2563eb;
--apron-radius-md: 6px;
}Add the data-theme="dark" attribute to the root element to enable dark mode:
<html data-theme="dark">
...
</html>MIT