This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.
npm install @base-framework/uitypescript
// Atom
const Link = Atom((props, children) => ({
...props,
children,
tag: 'a',
}));
// Organism Atom
const Link = Atom((props, children) => (
Link({...props }, [
Icon({ class: 'icon' }),
children
])
));
// Organism Atom with Component
const Link = Atom((props, children) => (
Nav([
Ul([
Li([
Link([
Icon({ class: 'icon' }),
Span('Text')
])
])
])
]),
new List({...props }, [
children
])
));
// Organism Function with Component
const List = (props, children) => Div([
Header([
H1('Title')
]),
new List({...props }, [
children
])
]);
`
#### Organisms Nesting
Organisms should use composition to nest other atoms, organisms, or components.
`typescript
const SecondaryButton = Atom((props, children) => (Button({
...props,
class: 'secondary-btn',
children
}));
`
Utilization of Organisms
To leverage an organism, invoke its function and pass the requisite values via a props and children. The organisms created with the Atom callback functions support passing optional props or children to the atom. The props object should always be first but if the atom does not require props, the children array or string can be passed as the first argument.
`javascript
// props only
Div({class: 'text'});
// text child only
Div('test');
// array child only
Div([
Div('test')
]);
// props and text child
Div({class: 'text'}, 'test');
// props and array children
Div({class: 'text'}, [
Div('test'),
Div('test')
]);
`
$3
`typescript
SecondaryButton({
click(e) =>
{
// Handle the click event
}
})
`
Icon Systems
This library supports two icon systems with universal automatic detection. All components automatically support both systems - just pass your icon!
$3
Default icon system using SVG strings:
`javascript
import { Icon } from '@base-framework/ui/atoms';
import { Icons } from '@base-framework/ui/icons';
Icon({ size: 'md' }, Icons.home)
Button({ variant: 'withIcon', icon: Icons.plus }, 'Add')
`
$3
Google's Material Symbols with 11,000+ icons in 4 style variants:
`javascript
import { MaterialIcon } from '@base-framework/ui/atoms';
import { MaterialSymbols } from '@base-framework/ui/icons';
MaterialIcon({ name: MaterialSymbols.home, size: 'md', variant: 'filled' })
Button({ variant: 'withIcon', icon: MaterialSymbols.add }, 'Add')
`
$3
All components (Button, Alert, Modal, Dialog, Navigation, etc.) automatically detect and render both icon types:
`javascript
// Both work - no configuration needed!
Button({ variant: 'withIcon', icon: Icons.plus }, 'Add')
Button({ variant: 'withIcon', icon: MaterialSymbols.add }, 'Add')
Button({ variant: 'withIcon', icon: 'add' }, 'Add') // Material Symbol name
`
Style Variants: outlined (default), filled, rounded, sharp`