The component library for fast and accessible development of gorgeous interfaces.
Projects using it: Sales Portal Dashboards
Be the most accessible it can be out of the box and the fastest way to production.
Go to docs to see complete, live examples
Install ATP Library
npm i atp-react-uiInstall TailwindCSS
npm install -D tailwindcss
npx tailwindcss initInstall TailwindForms
npm install -D @tailwindcss/formsInside tailwind.config.js
const atpLib = require('atp-react-ui/config');
module.exports = atpLib({
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
});Then place AtpLib at the root of your project (the order doesn't matter, as long as your application is inside).
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AtpLib } from 'atp-react-ui';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<AtpLib>
<App />
</AtpLib>
);
Use components inside your project
import { Button } from 'atp-react-ui';
function App() {
return <Button>Hi there!</Button>;
}
export default App;Update your .prettierrc by adding following to it:
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindFunctions": ["twSort"],Improve twSort from atp-react-ui and use it as:
import { twSort, AtpThemeType } from atp-react-ui;
const customTheme: AtpThemeType = {
helperText: {
base: twSort`flex-grow-0 relative flex h-5 md:bg-gray-900`,
},
};
// It will automatically be sorted as
const customTheme: AtpThemeType = {
helperText: {
base: twSort`relative flex h-5 flex-grow-0 md:bg-gray-900`,
},
};Important: In case auto-sorting doesn't work. Try restarting IDE.
- Fork
- Clone
npm installnpm run storybook
It will start a local server at localhost:6006 with all components rendered.
⚠ Use npm run cz instead of git commit! It will guide you through some short questions and guarantee that you commit message is standardized.
Commit will also trigger linting